Шаблон, чанк и TV в MODX Revolution: как разделить разметку и данные

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

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

Примеры предназначены для MODX Revolution с pdoTools и включённым Fenom. Имена wm-base, wm-header, wm-footer и остальных элементов здесь учебные: их нужно создать. Для вывода списка используется pdoResources из pdoTools.

Сначала разделите три роли

Чанк не заменяет базу данных, а TV не обязан содержать всю секцию HTML. Например, одинаковую разметку обложки храните в шаблоне, а выбранное изображение — в поле страницы. Тогда смена оформления не требует повторного редактирования всех материалов.

Создайте основу сайта и шаблон статьи

В разделе «Элементы» создайте шаблон wm-base. Это минимальный каркас документа; оформление и скрипты вашего сайта добавляются отдельно.

<!doctype html>
<html lang="ru">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>{$_modx->resource.pagetitle | escape}</title>
</head>
<body>
  {include 'wm-header'}
  <main>{block 'main'}{/block}</main>
  {include 'wm-footer'}
</body>
</html>

Основа вызывает два чанка. Создайте wm-header:

<header>
  <p>{$_modx->config.site_name | escape}</p>
</header>

И чанк wm-footer:

<footer>
  <p>{$_modx->config.site_name | escape}</p>
</footer>

Теперь создайте шаблон wm-article, который наследует основу:

{extends 'template:wm-base'}
{block 'main'}
  <article>
    <h1>{$_modx->resource.pagetitle | escape}</h1>
    {if $_modx->resource.subtitle?}
      <p>{$_modx->resource.subtitle | escape}</p>
    {/if}
    <div class="wm-text">{$_modx->resource.content}</div>
  </article>
{/block}

template: указывает на шаблон MODX. Блок main в основе и потомке должен называться одинаково. Назначьте wm-article ресурсу статьи, заполните его заголовок и основной текст. TV subtitle добавим ниже.

Текст content в примере — HTML, который готовит доверенный редактор, поэтому он выводится как разметка. Обычные текстовые поля экранируются через escape. Если данные пришли от посетителя, очищайте их на сервере до вывода.

Чанк можно использовать с разными данными

Вынесем небольшой информационный блок в чанк wm-note:

<aside class="wm-note">
  <h2>{$title | escape}</h2>
  <p>{$text | escape}</p>
</aside>

При включении передайте значения:

{include 'wm-note'
  title='Перед началом'
  text='Проверьте версию MODX и установленные дополнения.'
}

У чанка своя задача — вывести переданные title и text. Он не должен самостоятельно выбирать страницу, из которой эти значения придут. Такой чанк можно использовать в разных шаблонах, меняя только параметры.

TV добавляет данные, которых нет в стандартных полях

Заголовок уже хранится в pagetitle, основной текст — в content. Не создавайте дубли этих полей без причины. Для отдельного подзаголовка создайте TV с именем subtitle, подписью «Подзаголовок» и типом ввода «Текст».

1. Создайте TV в разделе «Элементы».
2. На вкладке доступа к шаблонам привяжите его к wm-article.
3. Откройте ресурс с этим шаблоном и заполните подзаголовок на вкладке дополнительных полей.
4. Сохраните ресурс и проверьте страницу.

В Fenom текущая страница обращается к TV через $_modx->resource.subtitle. Это имя поля, а не его подпись в менеджере. При пустом подзаголовке условие в шаблоне статьи уберёт весь абзац. Устройство TV описано в официальной документации MODX.

Свяжите список ресурсов и чанк карточки

Для списка статей создайте чанк wm-article-card. В него будут приходить поля выбранного ресурса:

<article class="wm-article-card">
  <h2>
    <a href="{$_modx->makeUrl($id) | escape}">
      {$pagetitle | escape}
    </a>
  </h2>
  {if $description?}<p>{$description | escape}</p>{/if}
</article>

В шаблоне раздела вызовите pdoResources:

{'pdoResources' | snippet : [
  'parents' => $_modx->resource.id,
  'depth' => 0,
  'tpl' => 'wm-article-card',
  'limit' => 12,
  'sortby' => 'menuindex',
  'sortdir' => 'ASC'
]}

Создайте статьи как дочерние ресурсы раздела. Сниппет выберет их и для каждой строки вызовет чанк из tpl. Здесь $pagetitle — заголовок статьи из выборки. $_modx->resource.pagetitle внутри карточки означал бы заголовок открытого раздела.

Этот список ограничен двенадцатью записями. Для постраничной навигации нужен pdoPage; подключение TV к выборке тоже задаётся отдельно. Оба сценария разобраны в руководстве по Fenom.

Как выбрать место для нового блока

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

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

Проверьте связку целиком

1. Откройте статью с заполненным подзаголовком, затем очистите поле и проверьте, что пустой абзац исчез.
2. Измените чанк шапки и убедитесь, что правка появилась на страницах с общей основой.
3. Создайте две статьи с разными заголовками и описаниями: карточки должны показывать свои данные.
4. Откройте пустой раздел. Если нужна отдельная надпись об отсутствии статей, добавьте её после проверки результата выборки.
5. Проверьте назначенные шаблоны и обработку Fenom, если вместо результата видны фигурные скобки.

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