Чанки

Слово chunk переводится как «кусок» или «ломоть». Название честное: чанк — это просто кусок HTML, который вы вырезали из страницы и положили отдельно, чтобы вставлять по имени.

Зачем вынимать кусок из шаблона

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

Чанк разрывает этот круг. Шапка лежит одна, а каждый шаблон зовёт её по имени.

<!-- Шаблон «Главная» -->
<body>
  {{header}}
  <section class="hero"> ... </section>
  {{footer}}
</body>

<!-- Шаблон «Внутренняя страница» -->
<body>
  {{header}}
  <article class="article">[*content*]</article>
  {{footer}}
</body>

Двойные фигурные скобки и означают «вставь сюда чанк с таким именем». Имя даётся в админке при создании чанка; в скобках его пишут ровно так же, буква в букву.

Что лежит внутри чанка

Обычная разметка, ничего особенного. Вот чанк шапки этого сайта, сокращённый до сути:

<header class="site-header">
  <div class="site-header__inner container">

    <a class="logo" href="[(site_url)]">
      <span class="logo__text">Easy Logic</span>
    </a>

    <nav class="main-nav" aria-label="Основное меню">
      [[DLMenu]]
    </nav>

    <button class="icon-btn burger" type="button"
            aria-expanded="false" aria-controls="mobile-nav">
      <svg class="icon"><use href="#i-menu"></use></svg>
    </button>

  </div>
</header>

Внутри чанка спокойно живут и другие вызовы: [(site_url)] подставит адрес сайта, [[DLMenu]] вызовет сниппет, который построит меню по дереву страниц. Чанк не мешает ничему — он просто разворачивается на своём месте, и движок идёт дальше.

Чанк с параметрами

Одно исключение из «подставляется как есть» всё же полезно знать. Чанку можно передать значения — тогда одна разметка обслуживает карточки с разным содержимым.

<!-- Сам чанк card -->
<article class="card">
  <h3 class="card__title"><a href="[+url+]">[+title+]</a></h3>
  <p class="card__text">[+text+]</p>
</article>

<!-- Вызов с параметрами -->
{{card?
  &title=`Хлебные крошки`
  &url=`/manualy/hlebnye-kroshki/`
  &text=`Путь по сайту и микроразметка для поисковиков`
}}

Внутри чанка параметры видны как [+имя+] — плюс означает «значение пришло снаружи». Такие чанки почти всегда вызывает не человек, а сниппет: он перебирает страницы и на каждой подставляет свои значения в один и тот же чанк. Так строятся меню, списки материалов и хлебные крошки.

Что уже стало чанками в этом проекте

Сайт пока статический, но границы будущих чанков размечены в вёрстке комментариями. Откройте исходный код любой страницы — они там.

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

Как чанки выглядят в админке

1. Все чанки лежат одним списком

   Меню «Элементы», закладка «Чанки». Слева — имя, которым чанк зовут из шаблона, справа — описание, его видите только вы. Мелких строк вроде crumb-link тут больше, чем крупных блоков: это заготовки для списков.

   Увеличить

2. Внутри карточки — та самая разметка

   Щелчок по имени открывает карточку: название, описание, категория и поле с кодом. Это и есть кусок HTML, который движок подставит вместо {{chunk-header}} — без единого изменения.

   Увеличить

Насколько мелко дробить

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

Правило, к которому я пришёл, — выносить кусок, если он:

• встречается больше одного раза и
• имеет самостоятельное имя, понятное вслух («шапка», «подвал», «карточка мануала»);
• меняется целиком, а не по одному тегу.

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