Принципы шаблонизации 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 есть дополнения и установим кое-что полезное на наш сайт.