Блог на Jekyll. Макеты страниц

Макеты страниц, они же - layouts, существуют для реализации Jekyll’ом функции генерации страниц. Я считаю, это основной элемент вообще любого генератора статических страниц, базовый функционал, который позволяет далее обрастать другими полезными дополнениями. Единожды настроив макет, пользователь может в дальнейшем использовать его многократно. Также, благодаря макетам, в Jekyll происходит отделение “контентной” составляющей сайта от технической. Все эти факторы повышают уровень удобства пользования системой. Рассмотрим немного подробнее.

Исходные данные

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

Имеем установленный и работающий Jekyll. (Проверить можно, осуществив быстрый старт.)
В корне папки созданы файлы index.html и _config.yml.

Простой пример макета

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

Теперь необходимо наполнить макет каким-то содержимым. Для этой цели можно отталкиваться от уже созданного файла index.html из предыдущего поста. Откроем для редактирования и добавим пару строчек.

<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="UTF-8">
  <title>Jekyll блог</title>
</head>
<body>
  <h1>12 апреля - День Космонавтики!</h1>
  <p>Международный день полёта человека в космос!</p>
</body>
</html>

Логично можем разделить весь код на две составляющие: непосредственно код для описания страницы и смысловое содержание страницы с простыми html тегами. В основном, содержимое тега <head> - это метаданные, название сайта, ссылки. Эти данные очень редко меняются от странице к странице сайта, поэтому их будет логично определить как “константу”, т.е. вынести в макет.

Весь код из файла index.html необходимо перенести в созданный файл макета default.html, а содержимое тега <body> заменить на тег {{ content }} . В сам файл index.html добавить перед содержимым специальную шапку, которая в jekyll называется YAML front matter. В результате должно получиться следующее содержание.

<!-- default.html -->
<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="UTF-8">
  <title>Jekyll блог</title>
</head>
<body>
  {{ content }} 
</body>
</html>

<!-- index.html -->
---
layout: default
---
<h1>12 апреля - День Космонавтики!</h1>
<p>Международный день полёта человека в космос!</p>

Сейчас достаточно принять эту своеобразную шапку как просто часть кода, которая дает понять Jekyll, что этот файл надо обработать особым образом. Касательного этого примера - благодаря использованию подобного front matter, Jekyll все содержание данного файла отправит в макет страницы default.html и разместит его на месте тега {{ content }} .

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

Итог

Создать и использовать макет страниц в Jekyll достаточно легко. При создании макета необходимо подразумевать отделение каких-то общих структур кода от частных. Нельзя забывать про обязательное наличие:

папки _layouts для макетов.
тега {{ content }} в коде самого макета - именно туда помещается содержимое из других файлов.
YAML front matter в файлах, использующих макеты.

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