Создание сайта на MODX Revolution — введение в основы разработки

Статья-введение по основам разработки сайтов на CMF MODX Revolution. Разберем основные сущности системы, их взаимосвязи, создание страниц, шаблонов, сниппетов, познакомиться с синтаксисом вызова тегов.

Олег Толочко , 10 Августа 2022

506 просмотрели, 0 комментировали

Создание сайта на MODX Revolution — введение в основы разработки

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

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

Сущности

Ресурсы

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

Ресурс может быть и обычной HTML страницей, и другим файлом - .css, .js, .php и так далее.

Есть 4 типа ресурсов:

документ
ссылка
символическая ссылка
файл

При разработке мы будем работать в основном с первым типом - документ, который представляет на выходе простую html страницу. Но остальные типы тоже могут быть полезны — например, при создании карты сайта MODX мы создаем ресурс типа «Файл» с расширением «XML».

У ресурса есть базовые поля, заложенные разработчиками:

заголовок pagetitle
расширенный заголовок longtitle
описание
аннотация
содержимое

Посмотреть название поля можно наведя курсор на его заголовок.

Все эти поля можно редактировать на странице изменения ресурса.

Для создания дополнительных полей, например, цены товара или просмотров статьи — используются TV поля. Принцип их работы разберем дальше.

Шаблоны

За внешний вид ресурса отвечает шаблон. Если у ресурса не будет шаблона, то при открытии этой страницы в браузере выведется поле ресурса «содержимое».

Таким образом можно создавать любые страницы просто на HTML, CSS и JS, не вникая в синтаксис MODX.

Тогда в поле content ресурса будет полностью страница, условно:

<!doctype html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
    </head>
    <body>
        <header>Шапка</header>
        <main>Контент</main>
        <footer>Подвал</footer>
    </body>
</html>

Вопрос только, зачем тогда использовать шаблоны? Чтобы разобраться, давайте пойдем от совсем простого.

У нас есть элементы, которые повторяются на каждой странице сайта: шапка и подвал. Если размещать код страницы в поле «содержимое», то для изменения шапки или подвала придется заходить и редактировать каждый ресурс. При большом количестве страниц это будет слишком долго и неудобно.

И тут на помощь приходят шаблоны. Создадим базовый шаблон с шапкой и подвалом, а между ними укажем поле "содержимое". Тогда шапку и подвал мы сможем редактировать один раз — в шаблоне, а контент страницы уже отдельно в ресурсах.

<!-- Код шаблона -->
<!doctype html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
    </head>
    <body>
        <header>Шапка</header>
        <main>[[*content]]</main>
        <footer>Подвал</footer>
    </body>
</html>

Шаблон - это заранее сформированный код страницы, в котором мы указываем, где вывести поля ресурса, переменные шаблона, чанки или сниппеты.

У большинства сайтов есть типовые страницы: статья, раздел, каталог, товар, вопрос-ответ и подобное. Каждый такой тип страницы — это отдельный шаблон.

Для создания шаблона мы возьмем условную верстку статьи, и вместо конкретного заголовка и текста просто укажем, где нужно вывести поля ресурса "заголовок" и "содержимое".

<!-- Код шаблона -->
<!doctype html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>[[*longtitle:default=`[[*pagetitle]]`]]</title>
    </head>
    <body>
        <header>Шапка</header>
        <main>
            <h1>[[*pagetitle]]</h1>
            <div>[[*content]]</div>
        </main>
        <footer>Подвал</footer>
    </body>
</html>

Теперь нужно «привязать» шаблон к ресурсу. Для этого на странице ресурса выберите в поле «Шаблон» подходящий вариант. При генерации страницы MODX заменит указанные в шаблоне переменные на их значения у конкретного ресурса.

Можно также создать базовый шаблон страницы, где будет только шапка и подвал, а между ними будет выводиться содержимое ресурса. Это полезно для создания отдельных страниц, которые встречаются на сайте в единственном экземпляре: «о нас», «контакты», «правила», «доставка» и подобные, где шаблон как таковой не нужен, но общие элементы должны быть как на всем сайте.

Я обычно делаю шаблоны под повторяющиеся страницы, и один «пустой», в котором есть только шапка и футер, как раз для таких целей. Единичным страницам назначаю его, а контент верстаю прямо в поле "содержимое".

Запомнили: ресурс — это страница или файл, шаблон — это верстка страницы, где указаны переменные, которые MODX заменяет на конкретные значения при генерации страницы.

Ресурсу мы назначаем шаблон, но при этом ресурс может быть и без шаблона. Тогда при просмотре этого ресурса выведется контент поля «содержимое».

Чанки

Чанк — это дословно "кусок" кода. В чанках мы можем использовать только html, js, css и теги MODX. Чистый PHP в чанках работать не будет, но его можно вызывать через сниппеты, которые мы разберем дальше.

Зачем нужны чанки, если у нас уже есть шаблоны? Давайте представим, что нужно сделать 3 шаблона: «пустая страница», «товар» и «категория». В каждом из шаблонов нам нужна будет одинаковая шапка сайта и подвал, а также форма обратной связи.

По логике, шаблон — это верстка, поэтому мы верстаем страницы в html, и создаем 3 разных шаблона, правильно?

Но тут замечаем, что код шапки и подвала снова повторяется в 3 разных местах — в 3 шаблонах. Пробема та же самая, которую раньше мы пытались решить с помощью шаблонов — редактировать неудобно, долго, повышается вероятность ошибки.

Было бы неплохо хранить и редактировать код этих элементов в одном месте, а вызывать в нужных местах как переменную. Как раз для этого нужны чанки.

Мы создадим 2 чанка, например, tplHeader и tplFooter, и в каждом разместим соответствующий html код этого элемента.

<!-- tplHeader -->
<header>Шапка</header>

<!-- tplFooter -->
<footer>Подвал</footer>

Потом вернемся в шаблоны, удалим код элементов и вызовем вместо него эти чанки.

<!-- Код шаблона -->
<!doctype html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>[[*longtitle:default=`[[*pagetitle]]`]]</title>
    </head>
    <body>
        [[$tplHeader]]
        <main>
            <h1>[[*pagetitle]]</h1>
            <div>[[*content]]</div>
        </main>
        [[$tplFooter]]
    </body>
</html>

В итоге весь код сокращается до простой переменной. И задача решена: менять код элемента можно в одном месте — чанке. А изменения сразу будут отражаться во всех шаблонах у всех ресурсов.

Или, например, нам нужно вывести список статей. Айтем статьи в списке имеет определенную верстку, а их должно быть много. Размножать вручную, что ли? Нет - мы создаем чанк с разметкой превью статьи, и при вызове списка статей указываем его как шаблон. Как это делается, разберем позже, пока просто принцип работы чанков.

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

TV поля (поля шаблонов)

Temlate Value, в обиходе "TV поля". Как уже писал выше, в разделе про ресурсы, TVs - это дополнительные поля для хранения информации о ресурсе. Например, цена товара, просмотры статьи, изображение товара и подобные.

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

TV поля могут быть разных видов: текстовое, даты, числа и тд. Соответственно, мы можем настроить и их вывод.

Например, нам нужно создать поле "цена товара". Давайте разберем процесс пошагово.

Для начала создаем шаблон страницы товара, "Товар". Затем создаем ресурс и указываем у него в настройках шаблон "Товар". После создаем TV поле "Цена товара" и привязываем его к шаблону "Товар".
Теперь у созданного ресурса появится дополнительное поле "Цена". Создавать можно и в другом порядке, я просто хочу показать связи.

Сниппеты

В отличие от чанков, где мы могли использовать только html, css и js, сниппеты — это блоки PHP кода, которые могут либо просто выполнять какое-то действие, либо возвращать результат.

Зачастую сниппет возвращает HTML код или какое-то значение. Для использования большинство пакетов (дополнений) реализованы в виде сниппетов, которые можно вызывать в шаблонах и чанках.

В чанке или шаблоне указывается вызов сниппета с определенными параметрами. При парсинге выполняется PHP код сниппета, сниппет вернет значение и оно подставится в место, где вызван сниппет.

В определенной степени на сниппет можно смотреть, как на функцию — он получает какие-то данные на вход и возвращает результат.

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

Однако для полноценной работы, в идеале подтянуть знания PHP и изучить MODX API. Тогда Вы сможете разрабатывать нужные сниппеты самостоятельно, что сильно повышает вашу ценность, как специалиста и дает гибкость при разработке сайтов на MODX.

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

Плагины

Плагин — это также фрагмент PHP кода, но он как раз ничего не возвращает при генерации страницы. Его нельзя вызвать из шаблонов, чанков и тд.

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

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

Например, плагин можно использовать, чтобы встроить на страницу админки собственные стили. Или чтобы перед рендерингом статьи на сайте прогнать текст через типограф.

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

Подобные фишечки иногда экономят кучу времени.

Системные настройки

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

Синтаксис

Мы изучили основные сущности. Их можно использовать в виде тегов MODX: вызывать в шаблоне, в поле содержимого ресурса, в чанках, и с помощью API в сниппетах.

Формат вызова тегов:

[[$tplChunk]] <!-- чанк -->
[[phpSnippet]] <!-- сниппет -->
[[*pagetitle]] <!-- поле ресурса -->
[[*TVValue]] <!-- TV поле -->
[[+placeholder]] <!-- плейсхолдер -->
[[++setting]] <!-- системная настройка -->
[[~link]] <!-- Ссылка -->

Параметры и плейсхолдеры

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

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

<!-- Вызвали чанк с параметрами -->
[[$tplHello?name=`Олег`&age=`23`]]

<!-- Вывод чанка tplHello -->
<p>Привет, [[+name]], тебе [[+age]]</p>
<!-- Вернет <p>Привет, Олег, тебе 23 года</p> -->

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

<!-- Вызвали сниппет с параметрами -->
[[phpHello?name=`Олег`&age=`23`]]

Получаем параметры в сниппете и вовращаем результат:

// Получить параметр и назначить значение по умолчанию
$name = $modx->getOption('name', $scriptProperties, 'Не указано');
// Просто получить параметр
$age = $modx->getOption('age', $scriptProperties);

$output = "<p>Привет, {$name}, тебе {$age}</p>";

return $output;

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

// Получить параметр имя
$name = $modx->getOption('name', $scriptProperties);
// Получить параметр возраст
$age = $modx->getOption('age', $scriptProperties);

$output = "";
if (empty($name) || empty($age)) {
    $output = "<p>Некорректно указано имя или возраст</p>";
} else {
    $output = "<p>Привет, {$name}, тебе {$age}</p>";
}

return $output;

Здесь я указываю HTML прямо в сниппете, но вообще это считается плохой практикой. Изначально задумано, что в сниппете мы строим php массив данных, а потом вызываем чанк и передаем в него эти данные. А в чанке они подставятся в плейсхолдеры. Я думаю это стоит подробно разобрать в отдельном уроке, но вкратце давайте разберем здесь.

Вот наш чанк tplHello.

<!-- Вывод чанка tplHello -->
<p>Привет, [[+name]], тебе [[+age]]</p>

Мы вызываем сниппет phpHello, передавая в параметры имя и возраст.

<!-- Вызвали сниппет с параметрами -->
[[phpHello?name=`Олег`&age=`23`]]

Затем в сниппете получаем параметры, и генерируем HTML код чанком.

// Получить параметр имя
$name = $modx->getOption('name', $scriptProperties);
// Получить параметр возраст
$age = $modx->getOption('age', $scriptProperties);

$output = "";

// Генерируем HTML вызовом чанка с параметрами
$output = $modx->getChunk('tplHello', array('name'=>$name, 'age'=>$age));

return $output;

Таким образом вызов чанка тегом MODX:

<!-- Вызвали сниппет с параметрами -->
[[phpHello?name=`Олег`&age=`23`]]

Эквивалентен вызову чанка в сниппете:

$output = $modx->getChunk('tplHello', array('name'=>$name, 'age'=>$age));

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

[[tplTest?param1=`[[*pagetitle]]`¶m2=`[[+age]]`¶m3=`[[$tplHello]]`]]

Комментирование тегов

Если нужно временно скрыть вызов тега, можно заккоментировать его вот так:

[[--$tplChunk]]

Кэширование тегов

Фильтры и модификаторы

Подход к разработке

MODX в целом позволяет создать сайт без знания PHP - для этого в менеджере пакетов имеется целая куча дополнений, которые предоставляют готовый функционал - вывод листинга с пагинацией, вывод меню, хлебных крошек и подобного. Для создания всего этого без пакетов пришлось бы писать на PHP.

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

Из минусов - все равно нужно будет разбираться в работе пакетов и сниппетов из них, но они существуют уже достаточно давно и в сети есть куча информации, как официальной документации разработчиков, так и специалистов по MODX. И это проще, чем изучать PHP.

Второй вариант - изучить PHP и API MODX, и уметь разрабатывать все самостоятельно. Нужно понимать, что это вариант нельзя назвать более "правильным" - он скорее расширяет ваши возможности. Но для решения большинства задач хватит и обычных пакетов. Но вот когда их не хватает - знание сниппетов дает возможность написать нужное решение самостоятельно.

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

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

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

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

Дополнительно

Кроме того, что мы разобрали, существуют дополнительные возможности, например, настроить вид редактирования страниц в админке для отдельных пользователей - чтобы контент-менеджер на мог залезть в код и тд. Или вывести в меню дополнительные ссылки - например на файл стилей и скриптов, чтобы быстро его открывать и не копошиться в структуре файлового дерева.

Надеюсь, эта статья объяснит основы разработки на MODX и поможет начать создавать сайты. Можете добавить ее в закладки браузера и поделиться в соцетях. Спасибо за прочтение!

Полезные статьи