Уроки MODX 2 для начинающих: основы и учебный сайт

Эта карта поможет освоить основы MODX 2 и пройти учебную практику на небольшом сайте Creative. Разберемся с ресурсами, шаблонами, чанками, сниппетами, TV и стандартными тегами, затем подключим оформление и сделаем редактируемыми основные блоки сайта.

Не нужно проходить весь раздел MODX подряд. Откройте этап, который соответствует вашей задаче, выполните практику и переходите дальше.

Что вы сделаете

В конце маршрута у вас будет работать учебный одностраничный сайт услуг:

• MODX 2 установлена, админка открывается.
• HTML-шаблон Creative подключен к ресурсу.
• Заголовки и содержание первых секций редактируются через админку.
• Карточки услуг выводятся из MIGX.
• Портфолио подключено через Gallery.
• Контактная форма обрабатывает данные через FormIt.

Это учебная сборка, а не готовый к публикации сайт. Перед реальным запуском замените демонстрационные тексты, изображения и контакты, проверьте почту, безопасность и окружение хостинга.

Для кого этот маршрут

Карта рассчитана на начинающих пользователей MODX. Для старта достаточно понимать основы HTML: теги, атрибуты и классы. CSS и JavaScript будем затрагивать при подключении готовой верстки. Глубоко изучать PHP перед началом не требуется.

Примеры интерфейса и скриншоты сделаны на MODX 2. Этот маршрут посвящен основам системы и стандартному парсеру MODX. Основные понятия пригодятся и при работе с MODX 3, но совместимость дополнений и отдельные настройки всегда проверяйте для своей версии.

Fenom, файловая организация проекта, IDE и разработка боевого сайта находятся за рамками этой начальной карты. После основ для них будет отдельный практический курс.

Как проходить уроки

1. Работайте на отдельной учебной установке, а не на действующем клиентском сайте.
2. Перед изменением шаблона или установкой дополнения сохраняйте копию файлов и базы.
3. Выполняйте шаги по порядку и сохраняйте элементы.
4. После каждого упражнения открывайте результат в браузере.
5. Если урок содержит дополнительные варианты и справочные таблицы, используйте их по задаче — запоминать все параметры не нужно.

Этап 1. Разобраться в основах MODX

Перед установкой полезно понять, что в MODX отвечает за страницы, что — за их оформление, а что — за повторяемые части сайта.

1. Что такое MODX — познакомьтесь с системой и определите, подходит ли она для вашего проекта.
2. Основные понятия и структура MODX — разберитесь с ресурсами, элементами, контекстами и каталогами.
3. FAQ по MODX — проверьте, что понадобится для установки и работы с CMS.

Результат этапа: вы отличаете страницу-ресурс от шаблона, чанка и сниппета и понимаете, зачем нужны дополнительные поля.

Этап 2. Скачать и установить MODX 2

Для этого маршрута используем MODX 2, на которой подготовлены основные скриншоты и учебные действия.

1. Выбрать и скачать MODX — найдите дистрибутив ветки 2, который будете использовать для учебной установки.
2. Установить MODX локально — подготовьте сайт на компьютере для безопасной практики.

Локальный сервер — удобная среда для обучения, но его настройки отличаются от хостинга. Перед переносом проверяйте версию PHP, адреса проекта и отправку почты уже в целевом окружении.

Результат этапа: тестовый сайт открывается в браузере, а вы можете войти в менеджер MODX.

Этап 3. Освоиться в админке

1. Админка MODX — найдите дерево ресурсов, вкладку элементов и системные настройки.
2. Настроить MODX после установки — задайте основные параметры своего учебного сайта.
3. Познакомиться с установкой дополнений — разберитесь с менеджером пакетов и проверкой совместимости.
4. Настроить редактор Ace — включите подсветку кода для работы с шаблонами и чанками в админке.

Не устанавливайте весь список компонентов из обзора дополнений. В этом маршруте подключаем только то, что нужно для следующего упражнения.

Результат этапа: вы можете найти ресурс и шаблон, внести изменение и сохранить его.

Этап 4. Научиться работать с ресурсами и элементами

1. Ресурсы MODX — создайте и измените страницу, заполните стандартные поля и разберитесь с деревом сайта.
2. Основной синтаксис MODX — изучите вызовы полей и элементов и разницу между кешируемыми и некешируемыми тегами.
3. Шаблоны MODX — разберитесь, как шаблон задает общую HTML-структуру страницы.
4. Чанки — вынесите повторяемую разметку в отдельный элемент.
5. Сниппеты — познакомьтесь с вызовом готовой логики.
6. Дополнительные поля TV — добавьте к странице поле, которого нет среди стандартных.
7. Модификаторы и фильтры — научитесь обрабатывать значение непосредственно при выводе.

В этой части используем стандартный парсер MODX. Fenom не включаем и дополнительные файлы проекта не настраиваем.

Результат этапа: вы можете назначить ресурсам шаблон, вывести его поля и вынести общий фрагмент HTML в чанк.

Этап 5. Подключить дизайн Creative

Теперь применим основу к готовой верстке. Для учебного проекта используем одностраничный Creative.

1. Перенести Creative в MODX — загрузите оформление, подключите шаблон и сделайте управляемыми первые секции.
2. Подключить карточки услуг и портфолио через MIGX — создайте повторяемые записи, настройте изображения и вывод.
3. Посмотреть редактор блоков на MIGX — дополнительный пример для тех, кому нужны секции разных типов. Для обычного списка услуг этот урок можно пропустить.
4. Подключить портфолио через Gallery — замените тестовый вариант на MIGX альбомом и сравните способы управления изображениями.
5. Настроить размеры изображений и миниатюр — откройте этот урок после первого рабочего вывода Gallery.

Результат этапа: Creative открывается через MODX, содержание основных секций редактируется в менеджере, а карточки услуг и изображения портфолио выводятся из дополнений.

Этап 6. Подключить контактную форму

1. Сделать форму на FormIt — настройте серверную проверку и обработку отправки.
2. Познакомиться с AjaxForm — дополнительный legacy-пример AJAX-отправки для знакомства и сопровождения существующих сайтов.

Сначала проверьте обычную форму: неверные данные должны получить ошибки, а правильная отправка — дать понятный результат и письмо. Локально для проверки почты можно использовать Mailpit.

AjaxForm не обязателен для того, чтобы на странице было несколько форм, и не выбран как основа нового боевого проекта.

Результат этапа: контактная форма Creative обрабатывает данные через MODX. На этом учебный маршрут по основам завершен.

После базового курса: отдельные карты обучения

Дальнейшие курсы рассчитаны на тех, кто уже понимает ресурсы, шаблоны, чанки, сниппеты, TV и стандартные вызовы. В боевых проектах можно показывать стандартный синтаксис для поисковых читателей, но практическую сборку вести на выбранном стеке курса.

Практический курс: личный сайт на MODX 3 и FlexStart

Для следующего курса предлагаю результат: многостраничный сайт специалиста или небольшой студии с услугами, портфолио, контактами и блогом. Такой сайт использует основные возможности FlexStart и дает практический повод настроить шаблоны главной, услуги, статьи и раздела блога.

В этом курсе начинаем с новой установки MODX 3. Работаем через IDE, файловые элементы и Fenom, общие настройки редактора переносим в ClientConfig, редактируемые секции главной строим через PageBlocks. Это отдельный боевой проект, а не обязательный перенос Creative с MODX 2.

Карта курса находится здесь (на текущий момент еще сырой — идет обновление старых уроков).

Планируемый адрес новой карты: https://web-revenue.ru/modx-revo/flexstart-course. Это предложение — перед публикацией проверить, утвердить адрес и подготовить саму карту.

Отдельный курс: интернет-магазин на MODX 2 и miniShop2

Магазинная практика остается на MODX 2 и miniShop2. В ней будут свои этапы: категории, товары, карточка товара, корзина, заказ, уведомления и проверка оплаты. Не смешиваем ее с сайтом-визиткой на MODX 3.

Пока не готов, как будет готов хотя бы на 40% появится здесь (будет частично смешан с предыдущим курсом, про личный сайт).

Необязательная ветка: обновление существующего сайта

Если у вас уже есть рабочий сайт на MODX 2, переход на третью версию не является обязательным продолжением курса. Сначала проверьте дополнения, собственный код и подготовьте копию сайта.

Инструкция находится в статье об обновлении MODX и переходе с версии 2 на 3.

← Предыдущая статьяMODX cборка (готовый сайт) для быстрого старта

Следующая статья →Что такое MODX Revolution и для каких сайтов она подходит