Со “включениями” (includes) уже можно было познакомиться после быстрого старта. Jekyll из коробки даёт порядочно материала для ознакомления с этим понятием. Основная функциональная нагрузка, в принципе, как и у макетов страниц - возможность повторного использования кода, разделение блоков кода на более простые участки. Чтобы далее по тексту не дублировать лишний раз слова, примем, что “включения” и “includes” - это одно и то же понятие. Тем более, считаю, что это вполне корректный перевод данного функционала в контексте Jekyll.
Исходные данные
В этом блоке информации немного меняю прежний подход. Описывать исходное состояние проекта перед текущей работой буду общими словами, снабжая ссылками для подробностей на предыдущие статьи. А также специально для этих целей создал на GitHub репозиторий, на который выкладываю все исходные файлы по каждой статье.
- Имеем простой макет страницы default, написанную статью и отдельную страницу. (в предыдущей статье)
- Весь исходный код по предыдущей статье 3-posts-and-pages.
- Весь исходный код по текущей статье 4-includes-nav.
Создание навигации на сайте
Почему в качестве примера взял навигацию? Согласен, есть более подходящие элементы html страниц для демонстрации использования включений. Про самые важные из них - head, header, footer - информацию можно найти и в быстром старте. Там эти блоки вынесены в отдельные участки кода в папке _includes. Просто по содержанию я хотел сейчас добавить побольше хоть какой-то интерактивности на сайт. В этом плане меню с со ссылками на страницы будет смотреться интереснее, чем наличие мета-тегов в исходном коде страницы (хотя и это очень важный момент, но о нём в другой раз).
Итак, в качестве первого использования includes на сайте создаем навигацию между страницами. Навигация - блок полезный, без него не обходится даже простой сайт, но без наличия этих страниц, между которыми осуществляем переход, не будет и самой навигации. Поскольку на текущем этапе есть только главная страница и страница о сайте, а это скучно, то добавим в корень проекта еще несколько страниц. Стараясь соблюдать тематику этого тестового проекта, добавил страницы со списком космонавтов (для просмотра их биографий) а также страницы с медиа материалом. Оформил все в виде списков без ссылок и самих медиа, сейчас это не так важно.
<!-- biography.html -->
---
layout: default
permalink: /biography
---
<h3>Самые известные космонавты СССР и России</h3>
<ul>
<li>Гагарин, Юрий Алексеевич (СССР)</li>
<li>Терешкова, Валентина Владимировна (СССР)</li>
<li>Титов, Герман Степанович (СССР)</li>
<li>Леонов, Алексей Архипович (СССР)</li>
<li>Комаров, Владимир Михайлович (СССР)</li>
</ul><!-- media.html -->
---
layout: default
permalink: /media
---
<h3>Фото и видео материалы событий.</h3>
<ul>
<li>Первый запуск ракеты с "Восточного".</li>
<li>Запуск с космодрома Куру российского "Союза" с европейским спутником.</li>
<li>"Протон-М" стартовал со станцией поиска жизни на Марсе. Кадры с Байконура.</li>
<li>Запуск программы "ЭкзоМарс".</li>
</ul>Далее создаем папку _includes в корне проекта и там размещаем файл nav.html со следующим содержанием:
<nav>
<ul>
<li><a href="/">Главная</a></li>
<li><a href="/biography">Биография известных космонавтов</a></li>
<li><a href="/media">Медиа</a></li>
<li><a href="/about">Информация о сайте</a></li>
</ul>
</nav>Таким образом подготовили фрагмент кода с навигацией к добавлению в основное содержимое. Чтобы непосредственно использовать это включение необходимо в том месте, где это требуется по логике проекта, добавить теперь только код {% include nav.html %}. По этой инструкции Jekyll осуществит поиск указанного файла в папке _includes и вставит его содержимое на месте её вызова.
Для примера, определим, что навигация нам будет необходима на каждой странице, которая будет использовать шаблон default, поэтому внесем соответствующие изменения в файл шаблона.
<!-- default.html -->
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<title>Jekyll блог</title>
</head>
<body>
<!-- Добавляем секцию header с необходимым включением навигации -->
<header>
{% include nav.html %}
</header>
{{ content }}
</body>
</html>Теперь на всех страницах, использующих дефолтный шаблон, вверху будет отображаться список-меню из страниц сайта. Ссылки для переходов также везде доступны и должны работать.
Итог
Организовав код подобным образом, мы можем легко использовать его повторно (например, в футере сайта), используя ту же самую команду {% include nav.html %}. Также выделили навигацию в отдельный смысловой блок, и когда потребуется внести изменения в его структуру, то код будет легко отыскать и произвести действия нужно будет только в одном месте по всему проекту.
На данном этапе я также добавил несколько статей, чтобы главная страница новостей не состояла из списка с одним элементом. Подробно этот процесс уже был рассмотрен, при необходимости, напоминаю, все можно посмотреть на GitHub/4-includes-nav.