Шаблоны и метки

Шаблоны сайта

Шаблоны сайта — обычные HTML-файлы внутри выбранной папки design. PHP-код из шаблона не выполняется.

Пример минимального шаблона:

<!doctype html>
<html lang="uk">
<head>
    <meta charset="utf-8">
    <title>[#title#]</title>
    <meta name="description" content="[#description#]">
    <link rel="stylesheet" href="/design/my-site/css/style.css">
</head>
<body>
    <header>[#menu_top#]</header>
    <main>
        <h1>[#H1#]</h1>
        [#breadcrumbs#]
        [#content#]
    </main>
</body>
</html>

Системные метки

Метка	Значение
`[#title#]`	SEO title текущего языка
`[#description#]`	meta description
`[#keywords#]`	keywords
`[#H1#]`	подпись/H1 страницы
`[#home_link#]`	корень текущего языка: `/`, `/en/`, `/ru/`
`[#lang_menu#]`	языковое меню
`[#page_header_media#]`	медиа заголовка импортированной страницы
`[#breadcrumbs#]`	стандартные хлебные крошки

Остальные метки обнаруживаются автоматически и настраиваются в редакторе страницы.

Привязка метки

Для метки можно выбрать:

наследование от родителя;
отключение;
визуальный редактор;
HTML-код;
активный экземпляр модуля.

После выбора визуального редактора или HTML-кода справа появляется кнопка редактирования содержимого. При выборе активного экземпляра модуля появляется кнопка «Редактировать модуль», ведущая прямо в редактор этого экземпляра. Она позволяет перейти к данным модуля без поиска в общем списке. Для наследуемой и отключённой привязки кнопка не выводится.

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

После изменения HTML-шаблона снова откройте страницу: сканер перечитает метки вида [#name#].

Допустимое имя начинается с латинской буквы и может содержать буквы, цифры, _, -, .. Максимальная длина — 100 символов.

Переменные модульного шаблона

Внутри шаблонов модулей применяются переменные %name%. Набор зависит от модуля и полей экземпляра.

Важно: текущий слой совместимости подставляет значения как HTML. Разработчик шаблона должен учитывать контекст и не использовать непроверенные данные внутри JavaScript, CSS или HTML-атрибутов.

Именованные секции

Секции начинаются HTML-комментарием:

<!-- @wrapper -->
<section>%items%</section>

<!-- @item -->
<article>%title%</article>

Используемые секции:

повторяющиеся блоки и соцкнопки: wrapper, item;
галерея: content или wrapper, rows или item;
слайдер: content, rows или item;
хлебные крошки: begin, link/item, activelink/current, delimiter, end;
меню: item.

Шаблон пункта меню использует %id%, %url%/%link%, %title%/%text% и %children%. Последняя переменная выводит готовое подменю. Пример: <li><a href="%url%">%title%</a>%children%</li>.

Хлебные крошки — пример

<!-- @begin -->
<nav aria-label="Хлебные крошки"><ol itemscope itemtype="https://schema.org/BreadcrumbList">
<!-- @link -->
<li itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem"><a href="%link%" itemprop="item"><span itemprop="name">%text%</span></a><meta itemprop="position" content="%position%"></li>
<!-- @activelink -->
<li aria-current="page" itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem"><span itemprop="name">%text%</span><meta itemprop="position" content="%position%"></li>
<!-- @delimiter -->
<li aria-hidden="true">/</li>
<!-- @end -->
</ol></nav>

Переменные: %id%, %position%, %link%, %url%, %text%, %title%.

Для корректной разметки Google не переносите itemprop="itemListElement" на ссылку: это свойство должно описывать контейнер ListItem, а сама ссылка внутри него получает itemprop="item". У последнего пункта свойство item необязательно.

Мультиязычность

Языковые значения задаются в админке. Файлы дизайна обычно остаются общими: меняются данные, подставляемые в метки. Для отдельных статических вариантов файловый загрузчик шаблонного ядра поддерживает суффиксы языка, однако публичный сайт в текущей реализации выбирает HTML-файл из структуры и заполняет его языковыми значениями.

Вложенные метки

Рендеринг выполняется в два прохода. Поэтому системная метка, находящаяся внутри результата модуля, например [#home_link#], также заменяется. Не создавайте циклические ссылки между метками.