MODX чанки (chunks)

В прошлых уроках мы разобрали различный синтаксис модх парсера и fenom, а также перенесли HTML шаблон в MODX Revo  (там можно скачать шаблон на основе которого пойдут дальнейшие уроки). Сейчас код шаблона статичный и чтобы что то поправить нужно править код — начнем это исправлять. В данном уроке разобьем код на отдельные части — MODX чанки, чтобы в будущем с кодом шаблона было проще работать.

Что такое

MODX чанки – это контейнеры для HTML/CSS/JS-кода (нельзя добавлять php-скрипты, вернее можно но они будут игнорироватся, для этого есть сниппеты). В чанке можно вызывать другие чанки, tv и сниппеты (можно вкладывать другие элементы).

Где хранятся

Чанки, хранятся в БД, в таблице modx_site_htmlsnippets (где modx_ — это префикс таблиц, который задан во время установки движка).

Как создать

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

Переходим во вкладку «Элементы» и кликаем:

1. На иконку «Новый чанк».
2. На плюс напротив пункта «Чанки».
3. ПКМ кликаем по пункту Чанки и выбираем «Создать» либо «Быстро создать».
4. Воспользоваться пакетом TagElementPlugin.

Как вызывать

Выводятся чанки в шаблоне при помощи следующей конструкции:

• [[$name_chunks]] – кэшируемый вызов (рекомендуется в большинстве случаев).
• [[!$name_chunks]], не кэшируемый вызов — выводится каждый раз из БД MODX парсером — что замедлит сайт.
• {include 'name_chunks'}, вызов чанка при помощи fenom. Также Fenom позволяет включать одни чанки в другие и даже расширять их. Пример вызова чанка с набором параметров: {include 'chunk@propertySet'}. Подробнее про {include} читайте в оф. документации.

Чанк с параметрами

Допустим у нас есть чанк «info», со следующим содержимым:

Привет, [[+name]]. У Вас [[+mesCount]] сообщений.

Он имеет 2 плейсхолдера: [[+name]] и [[+mesCount]]. Передать значения данным плейсхолдерам можно при помощи указания соответствующих параметров вызову чанка:

[[$info? &name=`Алексей` &mesCount=`11`]]

В результате, получим следующее содержимое:

Привет, Алексей. У Вас 11 сообщений.

Условия в чанках

Условия и другие phx фильтры / модификаторы  MODX можно использовать в любых специальных тегах. Например, нам нужно вывести чанк в чанке (один или другой) в зависимости от идентификатора родителя текущего ресурса.

[[*parent:is=`7`:then=`
[[$chunk1]]
`:else=`
[[$chunk2]]
`]]

Внимание! Будьте осторожными, условия могут сильно увеличить время генерации страницы.

Натягиваем шаблон — логика разбивки шаблона

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

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

Выносим весь код шаблона (у на пока только один шаблон базовый, смотрите урок Перенос HTML шаблона в MODX Revo) в отдельный чанк tpl и вызываем чанк tpl в самом шаблоне [[$tpl]] или {include 'tpl'}.

Если сейчас перейти на главную страницу — у нас не чего не поменялось — она также открывается с перенесенным html дизайном.

Далее открываем чанк tpl и вырезаем из него весь контент который меняется (обычно это все кроме шапки и подвала), после чего создаем чанк tpl.1 и вставляем в него вырезанный код, а на месте вырезанного кода вставляем вот такую конструкцию [[$tpl.[[*template]]]] или тоже самое на fenom: {include ('tpl.' ~ $_modx->resource.template)}.

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

Для чего все это?

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

В дальнейшем мы будем создавать дополнительные шаблоны (для типовых страниц, для статей, для портфолио и т.д.), вызывать во всех будем чанк tpl — там у нас шапка, подвал и другие элементы которые присутствуют на всех остальных страницах. У каждого нового шаблона будет свой id, следовательно, мы будем создавать дополнительные чанки tpl.2, tpl.3, …, tpl.7 и уже в них вносить недостающий контент. Забегая вперед, у нас получится примерно такая структура.

Если выбрали феном, то пожалуй лучше разбивать немного по другому. Переименовываем начальный шаблон в base и помещаем в него все из чанка tpl. А на месте вызова {include ('tpl.' ~ $_modx->resource.template)}, пишем {block 'content'}  {/block}

Дольше создаем новый шаблон home и вставляем туда вот такую конструкцию:

{extends 'template:base'}

{block 'content'}

здесь код из чанка tpl.1

{/block}

После этого меняем шаблон главной страницы на home и сохраняем ее, смотрим главную все также должно работать! Получается мы вообще от чанков избавились — они потом появятся по ходу дела). Это раздел расширение шаблонов из статьи про fenom. К стати, если хотите работать через IDE (например phpstorm), есть возможность хранить чанки, шаблоны, сниппеты файловыми элементами.

В следующем уроке изучим сниппеты.