Шаблоны

На прошлой странице мы выяснили: CMS хранит текст отдельно от вёрстки. Шаблон — это и есть та самая вёрстка, которая лежит отдельно. Ровно тот HTML, который вы написали, плюс несколько меток в квадратных скобках.

Откуда берётся шаблон

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

Вот это «почти всё» и есть шаблон. Различия вынимаются и заменяются метками. Метку в Evolution называют плейсхолдером — от английского placeholder, «держатель места»: она занимает место, пока туда не подставили настоящее значение.

<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="UTF-8">
  <title>[*pagetitle*]</title>
  <meta name="description" content="[*description*]">
  <link rel="stylesheet" href="assets/css/base.css">
</head>
<body>

  <h1>[*pagetitle*]</h1>
  [*content*]

</body>
</html>

Этот шаблон обслуживает любое количество страниц. Откроют «Контакты» — на месте [*pagetitle*] окажется слово «Контакты», на месте [*content*] — текст контактов. Откроют «Об авторе» — те же места займёт другое. Сам шаблон при этом не меняется никогда.

Что можно вызвать в шаблоне

У каждой страницы в Evolution есть набор полей — они заполняются в админке, когда страницу создают. Любое из них вызывается в шаблоне одинаково: имя поля в квадратных скобках со звёздочками.

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

Сколько шаблонов нужно сайту

Первая мысль новичка — по шаблону на страницу. Это ровно то, от чего мы уходили: полсотни шаблонов ничем не лучше полусотни HTML-файлов.

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

1. Главная

   Первый экран, треки, путь из шести этапов, блок об авторе. Такого набора нет больше нигде — отсюда отдельный шаблон.

2. Хаб раздела

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

3. Внутренняя страница

   Крошки, боковое меню, статья, переход к соседям. Эта страница сделана по нему — и ещё сорок семь.

Настоящий шаблон этого сайта

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

<!DOCTYPE html>
<html lang="ru">
<head>
  {{chunk-head}}
</head>
<body class="page">

  <a class="skip-link" href="#main">Перейти к содержанию</a>
  {{chunk-sprite}}
  {{chunk-header}}

  <main class="page__main" id="main" tabindex="-1">
    <section class="page-header">
      <div class="container">
        [[DLCrumbs]]
        <h1 class="page-header__title">[*pagetitle*]</h1>
        <p class="page-header__lead">[*introtext*]</p>
      </div>
    </section>

    <section class="section">
      <div class="container">
        <div class="page-layout">
          [[DocLister]]
          <article class="article">
            [*content*]
          </article>
        </div>
      </div>
    </section>
  </main>

  {{chunk-footer}}
</body>
</html>

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

Где шаблоны лежат в админке

1. Все шаблоны сайта одним списком

   Меню «Элементы», закладка «Шаблоны». Сверху — Minimal Template от установщика, ниже пять своих: по одному на тип страницы. В скобках у имени — номер шаблона.

   Увеличить

2. Разметка правится прямо здесь

   Карточка шаблона «Страница с текстом»: имя, описание, категория и поле с кодом — тот самый шаблон, что выше. Правка тут действует сразу на всех страницах этого типа.

   Увеличить

Почему статика верстается под будущий шаблон

Весь сайт сначала свёрстан обычными файлами и только потом переедет в CMS — это пятый этап. Чтобы переезд не превратился в переделку, повторяющиеся куски помечены в разметке комментариями уже сейчас:

<!-- CHUNK: header -->
<header class="site-header">
  ...
</header>
<!-- /CHUNK: header -->

На пятом этапе всё, что лежит между такими комментариями, переносится в CMS один в один, а на его месте в шаблоне остаётся {{chunk-header}}. Вырезал, вставил, заменил строкой. Откройте исходный код этой страницы в браузере — метки видны, они настоящие.

Что спросить у нейросети

Разбить свою вёрстку на шаблоны проще, когда есть с кем посоветоваться. Запрос можно скопировать и подставить свои страницы.