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

Шаблонизаторы: зачем они нужны

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

  • создание базовой разметки блоков или всей страницы;
  • возможность одним действием производить правки нескольких компонентов, которые могут находиться даже на разных страницах;
  • быстро менять контент в блоках;
  • добавлять, удалять, перемещать блоки на странице или между страницами сайта;
  • создавать повторяющиеся компоненты, например, карточки с аннотациями статей.

Когда требуется использовать шаблонизатор

Предположим, вам требуется сверстать главную страницу интернет-магазина, которая представляет из себя каталог. В нем появляются карточки товара, имеющие одинаковую структуру, но при этом с некоторыми отличиями: фото товара, название товара, цена, возможно дополнительное выделение карточек с акциями.

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

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

Разные варианты отображения карточек в одном каталоге

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

Рассмотренная ситуация с карточками не катастрофична, но показывает следующие проблемы:

  • Нужно постоянно держать в голове контент проекта, хотя бы приблизительный. Если вернуться к сайту после перерыва или если заказчик вдруг захочет внести серьезные изменения в структуру, то будет сложно адаптироваться к ним.
  • Выше вероятность возникновения ошибок на этапах разработки и внесения правок. Например, можно забыть где-то применить изменения, что приведет к появлению багов во всей верстке.
  • Потребуется больше времени на верстку и внесение правок.

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

Работа с HTML-шаблонизаторами

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

Для примера представим стандартный макет, который требуется сверстать. В нем есть такие элементы как шапка и подвал. Они повторяются на всех страницах и всегда (или почти всегда) имеют одинаковый внешний вид. А вот элементы, расположенные в центральной части шаблона, могут меняться в зависимости от типа страницы. Например, на главной странице сайта там может быть каталог товаров, на странице продукта в центральной части уже располагается информация о товаре и далее по аналогии.

Иллюстрация одного из вариантов расположения подключаемых блоков

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

Приготовление основного шаблона

Для примера рассмотрим достаточно примитивный вариант страницы и расположения контента на ней. В HTML это будет реализовано так:

 

<!DOCTYPE html>

<html lang="ru">

<head>

  <meta charset="UTF-8">

  <title>Сайт про сайт</title>

</head>

<body>

  <header>

    <!-- шапка сайта -->

  </header>

  <main class="container">

    <include content />

  </main>

  <footer>

    <!-- подвал сайта -->

  </footer>

</body>

</html>

 

В блоках <header> и <footer> прописывается HTML-разметка верхней и нижней части соответственно. Так как она будет на всех страницах одинаковой, то создавать для них отдельный файл не нужно. А вот для центральной части, где контент будет сильно меняться в зависимости от страницы, потребуется подключить файл с соответствующей разметкой.

Естественно, в центральной части можно подключать сразу несколько файлов с заготовленными шаблонами, если в этом возникнет необходимость. Далее рассмотрим создание подключаемых файлов.

Приготовление шаблона подключаемых файлов

Создадим HTML-шаблон каталога:

 

<use layout.html />

 

<h1>Страница каталога</h1>

<div class="catalog">

  <div class="catalog-item">Карточка 1</div>

  <div class="catalog-item">Карточка 2</div>

  <div class="catalog-item">Карточка 3</div>

</div>

 

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

 

<use layout.html />

 

<h1>Страница новостей</h1>

<div class="catalog">

  <div class="catalog-item">Новость 1</div>

  <div class="catalog-item">Новость 2</div>

  <div class="catalog-item">Новость 3</div>

</div>

 

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

Создание шаблонов компонентов

Компоненты, в отличии от шаблонов, разрабатываются заранее и потом вызываются в верстке при необходимости. По сути, компоненты — это маленькие блоки, которые используются на странице, например, те же карточки товара, кнопки, разделы страницы и так далее. Примечательно, что один компонент может состоять из нескольких компонентов. Например, блок на странице включает в себя другие блоки (допустим, те же карточки), в свою очередь этот блок уже включает в себя разные элементы, которые тоже могут быть реализованы в виде компонентов.

Пример использования компонентов на сайте

Для примера создадим компонент карточки товара:

 

<div class="card">

  <div class="card__image"><img src="" alt=""></div>

  <h2 class="card__title"></h2>

  <p class="card__description"></p>

  <a href="" class="card__btn"></a>

</div>

 

И вызовем его в файле, где отображается каталог:

 

<h1>Каталог магазина</h1>

<div class="catalog">

  <use card>

  <use card>

  <use card>

</div>

 

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

Добавление вариативности данных

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

 

<div class="card">

  <div class="card__image"><img src={data.src} alt={data.alt}></div>

  <h2 class="card__title">{data.title}</h2>

  <p class="card__description">{data.description}</p>

  <a href={data.href} class="card__btn">{data.btn}</a>

</div>

 

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

Добавление условий

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

Сторонние шаблонизаторы

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

  • Pug. За основу взят Node.js, поэтому для работы с этим инструментом знания JavaScript очень желательны, а еще лучше уметь работать с Node. Имеет необычный синтаксис, но если его освоить, то инструмент даст хороший профит в повседневной работе. Требуется предварительная установка и сборка под конкретный проект.

Страница с инструкцией по использованию шаблонизатора Pug

  • Twig. Этот шаблонизатор уже написан на PHP. Развертывается на сервере и не требует предварительной сборки, однако для работы нужен локальный сервер.

Главная страница шаблонизатора Twig

Конечный выбор инструмента HTML-шаблонизации зависит от ваших задач и окружения, в котором будет функционировать проект.

Так нужны ли HTML-шаблонизаторы

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

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

Заключение

Чтобы научиться пользоваться шаблонизаторами, нужно просто понять общие принципы, например, чем отличаются шаблоны от компонентов, в каких случаях они используются. Выбор инструмента является скорее второстепенным. Главное – научится правильно использовать возможности шаблонизаторов в соответствии с нуждами проекта.