Макеты
Макеты — это шаблоны, которые оборачивают ваш контент. Они позволяют разместить исходный код шаблона в одном месте, чтобы не повторять такие элементы, как навигация и подвал, на каждой странице.
Макеты находятся в каталоге _layouts. Обычно используется базовый шаблон, называемый default.html, и другие макеты наследуют от него по мере необходимости.
Каталог макетов
Jekyll ищет каталог
_layoutsлибо в корне вашего сайтаsource, либо в корне вашей темы.Хотя вы можете настроить имя каталога, в котором могут находиться ваши макеты, установив ключ
layouts_dirв вашем файле конфигурации, сам каталог должен находиться в корне каталогаsourceвашего сайта.
Использование
Первый шаг — размещение исходного кода шаблона в default.html. content — это специальная переменная, значение которой — рендеренный контент поста или страницы, которые он оборачивает.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>{{ page.title }}</title>
<link rel="stylesheet" href="/css/style.css">
</head>
<body>
<nav>
<a href="/">Home</a>
<a href="/blog/">Blog</a>
</nav>
<h1>{{ page.title }}</h1>
<section>
{{ content }}
</section>
<footer>
© to me
</footer>
</body>
</html>
У вас есть полный доступ к данным front matter исходного файла. В примере выше, page.title взято из front matter страницы.
Далее необходимо указать используемый макет в данных front matter вашей страницы. Также можно использовать значения front matter по умолчанию, чтобы не задавать их на каждой странице.
--- title: My First Page layout: default --- This is the content of my page
Рендеренный результат этой страницы:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>My First Page</title>
<link rel="stylesheet" href="/css/style.css">
</head>
<body>
<nav>
<a href="/">Home</a>
<a href="/blog/">Blog</a>
</nav>
<h1>My First Page</h1>
<section>
This is the content of my page
</section>
<footer>
© to me
</footer>
</body>
</html>
Наследование
Наследование макетов полезно, когда вы хотите добавить что-то к существующему макету для части документов на вашем сайте. Частый пример — посты блога; возможно, вам нужно отображать дату и автора, но при этом пост должен быть идентичен вашему базовому макету.
Для этого необходимо создать другой макет, который указывает на исходный макет в front matter. Например, этот макет будет находиться в _layouts/post.html:
---
layout: default
---
<p>{{ page.date }} - Written by {{ page.author }}</p>
{{ content }}
Теперь посты могут использовать этот макет, а остальные страницы — по умолчанию.
Переменные
Вы можете устанавливать front matter в макетах, единственное отличие заключается в том, что при использовании Liquid вам нужно использовать переменную layout вместо page. Например:
---
city: San Francisco
---
<p>{{ layout.city }}</p>
{{ content }}
© 2020 Jekyll Core Team and contributors
Licensed under the MIT license.
https://jekyllrb.com/docs/layouts/
