Блог на Jekyll. Создание статей и страниц

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

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

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

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

Подготовка к написанию статьи

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

  • Все статьи должны содержаться в определенной папке - _posts, находящейся в корневом каталоге проекта.
  • Статьи можно писать в HTML формате или Markdown. Это как называется “из коробки”. Также Jekyll с помощью расширений может обрабатывать и другие популярные форматы. Полезную информацию далее нужно черпать тут.
  • Обязательно наличие в статье вводного блока информации, т.н. Front matter
  • Название файла статьи должно выглядеть следующим образом: YEAR-MONTH-DAY-title.MARKUP. .MARKUP - разрешение формата файла, а остальные параметры должны быть понятны наверняка.

Надеюсь ничего важного не упустил. Больше станет понятно на простом примере.

Создание статьи

Создам файл статьи 2016-04-25-gagarin-space.md в папке _posts со следующим содержанием:

---
layout: default
title: Первый человек в космосе!
---
Первый человек в космосе!

12 апреля 1961 года Юрий Гагарин стал первым человеком в мировой истории, совершившим полёт в космическое пространство. Ракета-носитель «Восток» с кораблём «Восток-1», на борту которого находился Гагарин, была запущена с космодрома Байконур. После 108 минут полёта Гагарин успешно приземлился в Саратовской области, неподалёку от города Энгельса.

Начиная с 12 апреля 1962 года, день полёта Гагарина в космос был объявлен праздником — Днём космонавтики.

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

Далее необходимо определенным образом отобразить эту статью, поскольку сейчас нигде в проекте нет упоминания о свежем посте. Итак, сам Jekyll предлагает довольно просто вариант для размещения информации о статье на главной странице сайта. Способ простой и наглядный, им и воспользуемся. Для этого index.html приведем к следующему виду:

---
layout: default
---
<ul>
  {% for post in site.posts %}
    <li>
      <a href="{{ post.url }}">{{ post.title }}</a>
    </li>
  {% endfor %}
</ul>

Создаем список из всех постов на сайте и отображаем ссылки на них через названия статей. Помимо HTML кода тут также содержится код Liquid. Боятся этого не стоит, а лучше потратить несколько минут на изучение основ обращения с этим языком шаблонов. Есть две похожие удобные документации от создателей языка - одна на официальном сайте shopify, другая на их же официальном репозитории GitHub’a. Для начала работы с этим языком в Jekyll вполне хватит базовых понятий. Как устроены циклы, работа с переменными, добавление фильтров - пожалуй, основные моменты, которые могут пригодится.

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

Создание страниц

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

Чтобы создать полностью отдельную страницу, подобную главной странице index.html, Jekyll предлагает 2 основных варианта:

  1. Размещать страницы в корневом каталоге проекта.
  2. Размещать каждую страницу в отдельной папке с содержанием в ней своего index.html.
  3. Разместить все страницы в отдельной папке.

Для примера, рассмотрим создание страницы about.html. Такая страница очень часто встречается на сайтах, как правило, имеет свой собственный дизайн и свою постоянную ссылку.

По первому варианту будет достаточно создать about.html в корне папки с проектом и разместить в файле информацию о сайте. По второму варианту - создается папка about и в ней файл index.html с содержимым. В первом случае страница будет доступна по адресу http://example.com/about.html, во втором варианте получим т.н. “clean url” http://example.com/about/. Если подобных страниц накапливается большое количество, то их можно разместить в отдельной папке, например _myPages, при этом в конфигурационный файл добавить следующую настройку: include: ["_myPages"] и в шапках этих страниц обязательно указать параметр permalink - это позволит обращаться к страницам по указанному в этой опции адресу.

Также благодаря использованию permalink в шапке страниц можно добиться получения “clean url” без размещения индексного файла в разноименных папках как во втором варианте. Сейчас таким способом и воспользуюсь.

Создам страницу “о сайте” и размещу ссылку на нее на главной странице. Воспользуюсь первым способом и создам файл about.html в корне проекта.

<!-- about.html
Обратите внимание на permalink: /about, страница всегда будет доступна по этому адресу -->
---
layout: default
permalink: /about
---
<h3>Сайт посвящен космонавтике!</h3>
<p>На сайте будет располагаться информация о космических исследованиях, путешествиях, достижениях человечества в освоении космического пространства.</p>
<!-- index.html -->
---
layout: default
---
<!-- Добавлена ссылка на страницу about.html -->
<h2><a href="/about">Информация о сайте</a></h2>
<ul>
  {% for post in site.posts %}
    <li>
      <a href="{{ post.url }}">{{ post.title }}</a>
    </li>
  {% endfor %}
</ul>

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

Итог

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