Как работать с чанками в ModX Revolution?

Добро пожаловать на 5 урок MODX Revolution для новичков. В предыдущем уроке мы начали рассматривать работу с шаблонами в MODX Revolution. Мы начали со статичного HTML/CSS шаблона и перенесли его в нашу установку MODX Revolution, изменили пути к файлам и начали изучать синтаксис тегов MODX Revolution и как его использовать. В этом уроке мы продолжим работу над нашим шаблоном и изучим концепцию чанков.

В данном уроке я использую шаблон 7-in-1 Business Success Site студии Themeforest. Если вы работаете над шаблоном, который вы скачали или сделали сами, то это даже лучше. Подход к построению сайта одинаков вне зависимости от используемого шаблона.

Давайте начнем. Наш сайт выглядит сейчас точно так же как и загруженный шаблон, потому что мы изменили все пути к css, js и image файлам. Давайте рассмотрим что же такое чанки

Чанки MODX Revolution

Чанки — это куски HTML кода или текста. Важно отметить что чанк — это чистый HTML код без всякой логики. Чанк не может содержать PHP код, он просто не будет выполнятся. PHP код необходимо вставлять в сниппет (разберёмся в этом в следующих уроках). Этот сниппет потом может быть вызван в чанке. В то же время чанк сам  по себе не может содержать всередине чистый PHP.

Для чего использовать чанки?

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

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

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

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

Видно, что этот шаблон разделён на три различные секции: шапка, подвал и средняя область (по такому принципу делятся почти все шаблоны). Соответственно можно поделить наш шаблон на эти три части. После разделения мы можем далее еще разделить эти секции.

Поэтому первой вещью, что мы сделаем — это создадим два новых чанка, которые назовём:  7in1-header и 7in1-footer.

Для создания чанка зайдем в менеджер и в дереве слева зайдем во вкладку Elements. Можно создать чанк двумя способами: правым кликом на Chunk и выбрать“New Chunk” или кликнуть на иконку Chunk.

Создание чанка в MODX Revolution

В появившемся окне вводим необходимую информацию — имя чанка, описание и категория, если это необходимо.

Ввод информации в чанк

Пока сохраним этот чанк, чуть позже вставим туда код.

Давайте продолжим и создадим чанк для подвала.

Сейчас если мы взглянем на дерево ресурсов, то увидим наши два новые чанка в разделе Чанки.

Новые чанки в дереве MODX Revolution

Итак, наши чанки готовы к использованию. Всё, что нужно сделать, это вырезать код из секции нашего шаблона и вставить в чанки. В моём случае, я открою шаблон 7in1 Home, который мы создали в предыдущем уроке и вырежу весь код между отрывающим и закрывающим тегами  <head>. Далее я вставлю этот код в средину чанка 7in1-header, который я только что создал и сохраню его.

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

Новый шаблон MODX Revolution

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

Как вызывать чанк в MODX Revolution

Синтаксис чанков в MODX Revolution очень прост:

Код
[[$chunkName]]

В нашем случае мы просто перейдём в наш шаблон и разместим там  вызов нашего чанка 7in1-header в области, где мы убрали код шапки. Таким образом верхняя часть кода нашего шаблона будет иметь следующий вид:

Код
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en-US">
<head profile="http://gmpg.org/xfn/11">
[[$7in1-header]]
</head>
<body>
<div id="wrapper-1" class="pngfix">
<div id="wrapper-2" class="pngfix">

Если сейчас вы перезагрузите страницу, то увидите, что она примет нормальный вид. Это значит, что парсер MODx видит вызов чанка, он берёт его содержимое и размещает в области, где сделан вызов. Если вы знакомы с программированием PHP, то вы увидите схожесть с концепцией использования включения файлов.

Отлично, теперь мы знаем что делать дальше и сделаем ту же процедуру с подвалом. В моём случае я выделю весь код от начала div подвала до закрывающего тега и размещу его в чанке 7in1-footer,  который мы создали. Затем размещу вызов это чанка в нужном месте. Теперь конец кода моего шаблона выглядит вот так:

Код
</div>
<!-- end bottom_widgets -->
<div class="clear"></div>
<div id="footer_lid" class="grid_16 pngfix"> </div>
[[$7in1-footer]]
</body>
</html>

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

Для моих целей, я собираюсь еще поделить мой шаблон и добавить пару чанков. Эта секция шаблона появляется в основном на каждой странице вебсайта:

Подвал шаблона MODX Revolution

Я думаю разумно разместить код для этой секции в собственном чанке и далее вызывать его в наших шаблонах. Я назову этот чанк 7in1-bottomwidgets и таким образом нижняя часть кода моего шаблона приобретёт следующий вид:

Код
</div>
<!-- end front_content -->
<div class="clear"></div>
<div id="bottom_lid" class="grid_16 pngfix"> </div>
[[$7in1-bottomwidgets]]
<div id="footer_lid" class="grid_16 pngfix"> </div>
[[$7in1-footer]]
</body>
</html>

Как вы видите, в зависимости от внешнего вида нашего шаблона, мы можем делить его дальше и дальше в отдельные чанки либо же не делить совсем.

Ну вот наш небольшой урок подошёл к концу.

2051