Макеты страниц, они же - 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 в файлах, использующих макеты.
Эта статья носит более теоретический характер, преимущества использования макетов, о которых говорил в начале статьи, здесь раскрыты не полностью. В дальнейшем макеты страниц будут использоваться всегда и все их плюсы точно станут очевидны.