Принципы шаблонизации MODX

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

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

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

Установка сайта

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

Не бойтесь, что там много написано, на самом деле нужно:

  • Скачать дистрибутив с официального сайта

  • Распаковать и залить на хостинг

  • Открыть свой сайт, добавив /setup/, типа mysite.com/setup/

  • Дальше следовать вопросам установщика: логин и пароль для БД, админа и т.п.

  • В принципе, всё.

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

В первую очередь, это конечно же, официальный сервис от MODX - http://modxcloud.com. Во вторую очередь, это хостинг Simple Dream, который написан и поддерживается мною.

Ну и есть еще разные хостинги, которые не заточены под MODX, но позволяют его достаточно легко устанавливать, например https://bitnami.com.

В общем, будем считать, что с установкой вы разобрались и уже можно заходить в админку, которая находится по адресу mysite.com/manager/.

Лично я буду переделывать http://minishop2.com, поэтому вот, держите доступ:

**- Админка: http://minishop2.com/manager/

  • Логин: test

  • Пароль: test**

Конечно, права ограничены только просмотром.

Теория шаблонизации

Что такое "шаблонизация" и зачем она вообще нужна? Очень просто, это разделение программного кода и оформления.

Раньше было принято мешать php код и html оформление примерно вот так:

<?php
$output = '';
while ($row = mysql_fetch_assoc($res)) {
    $output .= "<td>{$res[id]}</td><td>$row[name]</td>";
}
echo $output;

Понятное дело, что файлов с таким кодом на сайте вагон, и когда вам понадобится поправить очередную табличку, вы можете просто не найти её! Конечно, можно правильно раскладывать свои php файлы, по умному их называть, но что если с этим сайтом работаете не только вы?

Вы готовы дать верстальщику доступ к внутренностям сайта? А если продвинутый менеджер захочет изменить элемент оформления свой странички? Конечно нет!

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

Тогда наш примерный кусок кода будет выглядеть так:

<?php
$tpl = file_get_contents('my.tpl');
$output = '';
while ($row = mysql_fetch_assoc($res)) {
    $placeholders = array('[[+id]]', '[[+name]]');
    $values = array($res['id'], $row['name']);
    
    $output .= str_replace($placeholders, $values, $tpl);
}
echo $output;

То есть, оформление лежит в файле my.tpl, скрипт его получает, готовит данные и заменяет служебные символы (плейсхолдеры) на значения.

Наверное, вы уже догадались, что файл my.tpl выглядит так:

<td>[[+id]]</td><td>[[+name]]</td>

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

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

Забегая вперед, вот как она выглядит в MODX:

$output = '';
while ($row = $res->stmt->fetch(PDO::FETCH_ASSOC)) {
    $output .= $modx->getChunk($tpl, $row);
}
return $output

Очень просто и компактно.

Шаблонизация MODX

Тут нам нужно сразу определиться с терминологией, чтобы потом не путаться. Итак:

  • Ресурс - страница сайта, которая создаётся в админке и выводится пользователям.

  • Элемент - группа служебных сущностей, необходимых для гибкой работы сайта: шаблоны, чанки, сниппеты и ТВ параметры.

  • Шаблон - html оформление страница сайта, то есть ресурсов. Может включать в себя теги MODX.

  • Чанк - кусок чистого html кода, который может включать в себя теги MODX.

  • Сниппет - кусок чистого php кода, не включает в себя теги MODX.

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

  • ТВ параметр - дополнительное поле ресурса, расположенное в отдельной таблице базы данных.

  • Категория - это группа

  • Теги MODX - любые слова, заключенные в квадратные скобочки [[ и ]].

Теги MODX бывают вот такие:

  • [[*****tag]] - тег поля ресурса, например заголовка или содержимого страницы. Это всегда значение текущей страницы.

  • [[**+**tag]] - плейсхолдер, предназначенный для заполнения какими-то данными при работе сниппета, например вывод дочерних ресурсов. Это всегда значение не текущей страницы, а чего-то другого.

  • [[**%**tag]] - запись из системного словаря, меняет свое значение в зависимости от языка сайта.

  • [[**~**id]] - ссылка на страницу, принимает id этой самой страницы.

  • [[**~[[***id]]]] - комбинированный плейсхолдер, то есть поле страницы вложено в ссылку и мы получаем ссылку на текущую страницу.

  • [[**++**tag]] - системные настройки, например имя сайта, или язык.

  • [[**!***tag]] - некэшированный тег, он откладывается парсером в сторонку обрабатывается в последнюю очередь. К любому теги нужно приставить восклицательный знак.

  • [[**-***tag]] - отключенный тег, не обрабатывается движком. К любому тегу нужно приставить тире.

  • [[**#**tag]] - хитрые теги FastField, которых нет в MODX по умолчанию, для них нужно установить pdoTools или FastField.

Для чего я это рассказываю? Для того, чтобы вы понимали, как работает шаблонизатор (парсер) MODX.

  1. Приходит запрос на открытие страницы сайта.

  2. MODX ищет эту страницу и если находит - загружает требуемый ресурс, а если нет - берет в работу страницу 404 not found.

  3. Если у страницы есть шаблон (99.9% случаев), MODX загружает его и ищет в нем свои теги.

  4. Кэшированные теги разбираются сразу, некэшированные оставляются на потом.

  5. Исходя их синтаксиса тега, MODX загружает нужные чанки и сниппеты, а также подставляет данные текущего ресурса в шаблон.

  6. Нужно всегда помнить, что парсер MODX рекурсивный, поэтому после каждой операции выставления новых данных в теги, MODX смотрит, не осталось ли еще на странице двойных скобочек. Если да, то крутим процесс по кругу, пока не будут обработаны все кэшированные плейсхолдеры, или не достигнем системного лимита (по умолчанию - 10 кругов).

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

  8. Теперь еще 10 раз разбираем оставшиеся некэшированные теги, которые с восклицательным знаком. Если уложимся за меньше число раз - ура! Эту операцию мы проводим при каждой загрузке страницы, в кэш она не попадает.

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

  10. Отдаём страницу пользователю. Ту, что он запросил, или 404, если мы не нашли подходящую.

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

Таким образом, вся работа по оформлению в MODX - это правильное составление html шаблона с вкраплениями тегов MODX и назначение его ресурсу. Дальше MODX всё сделает сам.

Стандартный шаблон MODX выглядит так:

<html>
<head>
<title>[[++site_name]] - [[*pagetitle]]</title>
<base href="[[++site_url]]" />
</head>
<body>
[[*content]]
</body>
</html>

Заключение

На этом занятии мы познакомились с общим принципом шаблонизации и её конкретной реализацией в MODX.

На следующем занятии мы узнаем, что у MODX есть дополнения и установим кое-что полезное на наш сайт.

← Предыдущая заметка
Новый курс обучения
Следующая заметка →
Базовые дополнения: Theme.Bootstrap, MinifyX и немного pdoTools
Комментарии (12)
AlroniksИван Климчук
24.07.2014 18:18

Не знал, что в pdotools fastfield используется. Но из него тянется и ошибка неприятная. Если создать тв с точкой в имени , например shop.item.price, то [[#1.tv.shop.item.price]] никогда не сработает. Вот исправления https://github.com/argnist/fastField/pull/10

bezumkinВасилий Наумкин
24.07.2014 18:37

FastField не используется, просто pdoParser умеет работать с его тегами. Местами даже получше самого FastField, например, умеет распечатывать массивы:

[[#REQUEST]]

Вот анонс, если что.

AlroniksИван Климчук
24.07.2014 18:46

Так а то, что я написал, умеет? Я просто с планшета, в код на гитхаб посмотрел, по коду беда вроде как и в фастфилде, но проверить не могу пока что.

AlroniksИван Климчук
24.07.2014 18:51

А не, все ок. Там им плоде есть

Сергей Малышев
21.08.2014 14:52

Василий, подскажите пожалуйста, какую версию MODX устанавливать для прохождения курса? 2.2.14 или 2.3.1? И еще вопрос. Начал устанавливать на beget.ru MODX 2.3.1 на php 5.3. Ругается: FATAL ERROR: MODX Setup cannot continue. To use PHP 5.3.0+, you must set the date.timezone setting in your php.ini. Установка date.timezone в htaccess ничего не дала. На php 5.2 установка проходит нормально.

bezumkinВасилий Наумкин
21.08.2014 14:59

Примеры все на MODX 2.3, но суть от этого не меняется.

Про установку MODX на beget.ru спрашивать нужно у них.

Сергей Малышев
21.08.2014 15:03

Спасибо.

Сергей Малышев
21.08.2014 15:16

Установил MODX 2.3.1. с php 5.2. Установилось нормально. Перевел на php 5.3. Вроде пока работает. Посмотрим, что будет дальше.

bezumkinВасилий Наумкин
21.08.2014 15:18

Дальше всё должно быть окей =)

Андрей88Андрей
28.08.2014 06:50

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

bezumkinВасилий Наумкин
28.08.2014 06:56

Плейсхолдеры никак не создаются. Это просто буковки, которые дословно "держат место", куда потом вставит данные php сниппет.

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

Это как у новой мебели еще на заводе высверлены дырочки, в которые потом при сборке шкафа вкрутят шурупы.

Андрей88Андрей
28.08.2014 07:33

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

bezumkin
Василий Наумкин
04.07.2022 23:34
Что-то странное у тебя произошло: миграция есть, и вроде как выполнена, но таблицы при этом отсутств...
inetlover
Александр Наумов
03.07.2022 20:36
Василий, спасибо! Все понятно!
bezumkin
Василий Наумкин
02.07.2022 20:28
Спасибо, поправил!
bezumkin
Василий Наумкин
30.06.2022 03:58
Есть ли возможность формировать &quot;friendly URL aliases&quot;, используя аналог translit MODx? ...
bezumkin
Василий Наумкин
27.06.2022 03:32
Спасибо за исправления, очень выручаешь =) Но учитывая количество не описаных в заметке дополнительн...
bezumkin
Василий Наумкин
27.06.2022 03:10
что будет использоваться для вывода многоуровневого меню Посмотри как работают комментарии на этом ...
bezumkin
Василий Наумкин
25.06.2022 11:56
Поправил, спасибо!
bezumkin
Василий Наумкин
21.06.2022 01:58
onLoad(data) { this.total = data.total }, и onLoad({total}) { this.total = total }, В нашем случ...
bezumkin
Василий Наумкин
20.06.2022 14:01
Прекрасно тебя понимаю, я когда сам в этом разбирался - голова дымилась. Но зато теперь прямо-таки п...
bezumkin
Василий Наумкин
20.06.2022 09:30
Не надо, оно по умолчанию так - я просто чуть более подробно написал.