- Что такое шаблон MODX
- Где находятся шаблоны
- Создаем простой шаблон
- Что в коде постоянно, а что меняется
- Назначаем шаблон двум ресурсам
- Редактируем общий шаблон
- Создаем второй вариант копированием
- Когда действительно нужны разные шаблоны
- Как шаблон связан с TV
- Fenom: те же данные в другой записи
- Где хранятся шаблоны
- Хранение кода шаблона в файле
- Если результат не совпал с примером
- Следующий урок
В уроках о ресурсах и их полях и синтаксисе MODX мы познакомились с данными страницы и тегами для их вывода. Теперь создадим собственный шаблон и назначим его двум учебным ресурсам.
Готовый дизайн скачивать не нужно. Работаем с небольшой HTML-заготовкой через админку. Практику выполняем стандартным синтаксисом, а Fenom ниже показан только для сравнения.
Что такое шаблон MODX
Шаблон — элемент, определяющий разметку страницы. Обычно он содержит HTML и теги MODX: места для заголовка, содержимого, настроек и других данных.
Например, шапка и подвал могут быть записаны прямо в шаблоне, а заголовок и основной текст подставляться из открытого ресурса.
Одному документу назначается один шаблон. При этом один шаблон можно использовать у нескольких документов: разметка будет одинаковой, а данные — своими.
Не путайте элемент «Шаблон» в MODX с готовым HTML-дизайном. Архив верстки может содержать стили, скрипты, изображения и несколько страниц. Для этого урока достаточно самостоятельно написанного HTML.
Где находятся шаблоны
В левой панели менеджера откройте вкладку «Элементы» и разверните раздел «Шаблоны». Здесь находится начальный шаблон установки и другие созданные элементы.
В редакторе шаблона понадобятся следующие поля:
| Поле | Назначение |
|---|---|
| Название | Название элемента, по которому его выбирают в менеджере. |
| Описание | Пояснение для работы в админке. Это не meta description страниц. |
| Категория | Группировка элементов в дереве. Не является родителем ресурса. |
| Значок | Иконка, которая может использоваться ресурсами этого шаблона в дереве менеджера. |
| Код шаблона (HTML) | Разметка, на основании которой формируется страница. |
Название шаблона не становится заголовком страницы. Например, элемент «Учебный» может оформлять ресурсы «Практикум», «Первый материал» и «О проекте».
Создаем простой шаблон
Для упражнения используем новый элемент, не заменяя начальный шаблон установки.
- На вкладке «Элементы» откройте контекстное меню раздела «Шаблоны».
- Выберите создание нового шаблона. Также можно воспользоваться кнопкой добавления рядом с разделом.
- Укажите имя «Учебный».
- В описание добавьте: «Простой шаблон для проверки полей ресурса».
- Вставьте приведенный ниже HTML и сохраните элемент.
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>[[*pagetitle:htmlent]] | [[++site_name:htmlent]]</title>
<meta name="description" content="[[*description:htmlent]]">
</head>
<body>
<header>
<p>Учебный сайт на MODX</p>
<nav>
<a href="[[~[[++site_start]]]]">На главную</a>
</nav>
</header>
<main>
<h1>[[*pagetitle:htmlent]]</h1>
<div class="page-content">
[[*content]]
</div>
</main>
<footer>
<p>Подвал учебного сайта.</p>
</footer>
</body>
</html>Это полный код небольшой учебной страницы. Для его работы не нужны отдельные CSS, JavaScript, чанки или конструктор блоков.
Что в коде постоянно, а что меняется
| Фрагмент | Откуда берется значение |
|---|---|
| Подпись в шапке и текст подвала | Записаны непосредственно в шаблоне. |
| pagetitle | Основной заголовок открытого ресурса. |
| description | Описание открытого ресурса. |
| content | Содержимое открытого ресурса. |
| site_name | Название сайта из настроек. |
| Ссылка на главную | Формируется по ID из настройки site_start. |
htmlent используется для текстовых значений. К content его не добавляем, потому что в содержимом могут находиться нужные HTML-абзацы, списки и другая разметка.
Назначаем шаблон двум ресурсам
Сохранение нового шаблона не переназначает ему уже существующие страницы. Нужно выбрать его у нужных ресурсов.
- Перейдите на вкладку «Ресурсы».
- Откройте «Практикум», созданный в предыдущем уроке.
- В поле «Шаблон» выберите «Учебный».
- Подтвердите смену, если менеджер запросит подтверждение, и сохраните ресурс.
- Повторите назначение для «Первого материала».
Если этих ресурсов нет, создайте два обычных учебных документа и заполните у них разные заголовки и содержание. ID могут быть любыми.
Откройте обе страницы через просмотр ресурса. Не проверяйте результат только по главной сайта: она может использовать другой шаблон.
На страницах должны быть одинаковые шапка, ссылка и подвал, но разные H1 и тексты. Во вкладке браузера также будет заголовок соответствующего ресурса.
Редактируем общий шаблон
Проверим, как изменение элемента влияет на использующие его страницы.
- Вернитесь в «Элементы» и откройте шаблон «Учебный».
- Замените текст подвала на «Общее оформление учебных страниц».
- Сохраните шаблон.
- Обновите обе страницы. При необходимости очистите кеш MODX.
Новая подпись появится на обеих страницах. Заголовки и содержимое ресурсов при этом не изменятся.
Если вместо этого изменить content только у «Первого материала», поменяется лишь его текст. Так разделяются оформление и данные.
Создаем второй вариант копированием
Теперь добавим дополнительный блок только одной странице. Для упражнения создадим копию шаблона.
- Откройте контекстное меню шаблона «Учебный».
- Выберите копирование или дублирование — название команды зависит от версии интерфейса.
- Назовите копию «Учебный — с примечанием».
- Откройте полученный элемент.
В копии замените весь фрагмент main на:
<main>
<h1>[[*pagetitle:htmlent]]</h1>
<aside>
<p>Эта страница использует вариант шаблона с примечанием.</p>
</aside>
<div class="page-content">
[[*content]]
</div>
</main>Остальной HTML копии оставьте без изменений и сохраните.
У ресурса «Первый материал» выберите «Учебный — с примечанием». У «Практикума» оставьте исходный «Учебный».
Откройте обе страницы. Примечание должно появиться только у первого материала, а его собственные заголовок и содержание — сохраниться.
Копия — самостоятельный элемент. Изменение исходного шаблона не обновляет автоматически HTML его копии. Для общих повторяемых частей позже используем чанки.
Когда действительно нужны разные шаблоны
Не нужно создавать отдельный шаблон для каждой страницы. Два ресурса с одинаковой структурой, но разными текстами обычно могут использовать один элемент.
Другой шаблон полезен, когда меняется само представление, например:
- У статьи появляется боковая колонка, которой нет у обычной страницы.
- Страница раздела выводит список записей, а отдельная запись — полный текст.
- Контакты имеют другую компоновку и место для формы.
- Для определенного типа страниц нужен отдельный набор TV.
Универсальный шаблон с условиями тоже допустим. Выбор зависит от структуры проекта: отдельный вариант имеет смысл, когда делает код и редактирование понятнее, а не просто увеличивает число элементов.
Как шаблон связан с TV
TV — дополнительные поля ресурсов. Их доступность связывается с назначенным шаблоном.
Например, у страниц одного типа может быть поле изображения, а у другого — отдельная подпись. Само создание шаблона такие поля не добавляет: TV нужно подготовить и назначить нужным элементам.
После копирования шаблона проверяйте доступные TV и свойства, а не только HTML. При смене шаблона у ресурса набор видимых дополнительных полей может измениться.
В этом упражнении используем только стандартные поля. Создание и назначение TV разберем следующим уроком.
Fenom: те же данные в другой записи
Выполнять эту часть для прохождения урока не нужно. Если позже включите Fenom, поля можно записать иначе.
| Задача | Стандартный синтаксис | Fenom |
|---|---|---|
| Заголовок как текст | [[*pagetitle:htmlent]] |
{$_modx->resource.pagetitle | escape} |
| Описание как текст | [[*description:htmlent]] |
{$_modx->resource.description | escape} |
| HTML-содержимое | [[*content]] |
{$_modx->resource.content} |
Например, центральная часть:
<main>
<h1>{$_modx->resource.pagetitle | escape}</h1>
<div class="page-content">
{$_modx->resource.content}
</div>
</main>Это альтернативная запись фрагмента, а не дополнительный блок для вставки рядом со стандартным. Пока продолжаем работать стандартными тегами.
Где хранятся шаблоны
Обычные шаблоны, созданные в менеджере, хранятся в базе данных в таблице с именем вида modx_site_templates. modx_ — префикс установки, который у вас может отличаться.
У шаблона есть собственный ID. Он не равен ID ресурса: несколько ресурсов могут ссылаться на одну и ту же запись шаблона.
В этом уроке редактируем элемент через админку. Для создания и назначения шаблона открывать таблицу базы вручную не требуется.
Хранение кода шаблона в файле
Начиная с MODX Revolution 2.2 код шаблона можно хранить в связанном файле и редактировать через внешний редактор.
Для этого:
- Сохраните HTML-код шаблона в файл, доступный через выбранный источник файлов.
- В редакторе шаблона включите флажок «Статичный».
- Выберите источник файлов и укажите в поле «Статичный файл» путь относительно его базового каталога.
- Сохраните шаблон.
Теперь код можно менять как через менеджер, так и в связанном файле. После изменения файла очищайте кеш MODX при проверке результата. Запись шаблона остается в админке и назначается ресурсам обычным способом.
Это штатная возможность MODX, не требующая pdoTools или Fenom. Расширение .tpl также не включает Fenom автоматически.
Автоматизация статических элементов
Начиная с MODX 2.7 часть действий можно автоматизировать. Настройки находятся в системных параметрах, в разделе «Статические элементы».
- static_elements_automate_templates — автоматизация для шаблонов.
- static_elements_default_mediasource — источник файлов по умолчанию.
- static_elements_basepath — базовый путь внутри выбранного источника.
- static_elements_default_category — категория по умолчанию, если нужна.
Параметры automate_chunks, automate_snippets, automate_plugins и automate_tvs включают аналогичный режим для других типов элементов. Для одного шаблона включать их все не требуется.
Перед включением настройте источник и базовый путь. Автоматизация связана с созданием и обслуживанием файлов: при переименовании или удалении элемента затрагивается и связанный файл.
В начальном упражнении автоматизацию оставляем выключенной. Достаточно обычного шаблона с кодом в админке или ручной привязки одного файла.
Если результат не совпал с примером
| Проблема | Что проверить |
|---|---|
| Новый шаблон создан, но страница выглядит по-старому | Назначение шаблона у открытого ресурса и сохранение изменений. |
| Шапка видна, а содержимого нет | Заполнение content и наличие его вызова в коде. |
| На двух страницах одинаковый текст | Не записан ли он напрямую в шаблоне вместо вызова поля. |
| После редактирования ничего не изменилось | Сохранение нужного элемента, назначенный шаблон и кеш. |
| Вместо оформления выводится только содержимое | Не выбран ли вариант без назначенного шаблона. |
| На странице виден код Fenom | Включена ли его обработка. Для текущей практики вернитесь к стандартному варианту. |
Почему у нового ресурса шаблон уже выбран
Шаблон нового ресурса может выбираться автоматически в зависимости от настроек установки, родителя и используемых дополнений.
Это не означает, что создание нового шаблона переназначило ему существующие документы. При создании или копировании ресурса проверяйте фактическое значение поля «Шаблон».
Можно ли удалить ненужный шаблон
Перед удалением проверьте, какие ресурсы его используют, и назначьте им подходящую замену. Не удаляйте общий элемент ради проверки кнопки.
Для учебной практики достаточно оставить два созданных шаблона. Удаление не требуется для перехода к следующему уроку.
Следующий урок
Теперь у нас есть два варианта оформления и ресурсы, которым они назначены. Дальше создадим дополнительное поле TV, сделаем его доступным выбранному шаблону и подключим к выводу страницы.
