Блог на Jekyll. Коллекции, данные, статические файлы

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

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

  1. В предыдущей статье добавили немного стилей.
  2. Как обычно исходники по статьям на github.

Используем статические файлы

Заголовок может звучит более многообещающим, чем мое содержание, но по-другому называть не хотелось. Принцип работы Jekyll со статическими файлами рассмотрим на примере с картинкой, а именно favicon.

Если присматривались, то во всех предыдущих исходниках при запуске проекта в логах консоли вылезала ошибка, что не найден файл favicon.ico. Сейчас попробуем убить двух зайцев - поставим иконку сайта для браузеров и уберем эту ошибку, а также разберемся со статическими файлами.

Что же Jekyll понимает под статическими файлами? Согласно официальной документации - все что не содержит YAML шапки (YAML front matter) перед основным содержимым. Речь про те самые две строчки по три тире длинной :) Для Jekyll отсутствие этой вводной означает, что файл не принимает участия в отрисовке страницы и его не надо как-либо конвертировать.

В эту категорию и попадают изображения, какие-либо форматы документов (.doc .pdf) и прочее. Надо помнить, что все статические файлы Jekyll размещает по такому же адресу, по которому они находились изначально. То есть все статические файлы из корня проекта будут помещены также в корень сгенерированного сайта, а файлы в папках будут доступны в одноименных папках.

Создаем в корне папку images и кладем туда иконку сайта, предварительно скачанную с просторов интернета или нарисованную самостоятельно. В результате будет выглядеть примерно так: images/favicon.png. Сейчас иконку можно взять отсюда.

Далее, чтобы все это новшество подхватилось, необходимо на всех страницах в тэге <head> указать ссылку на используемую иконку. Сделаем это, добавив строчку со ссылкой в шаблон default.html.

<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="UTF-8">
  <title>Jekyll блог</title>
  <link rel="stylesheet" href="/css/main.css">
  <link rel="icon" type="image/png" href="/images/favicon.png">
</head>
<!-- далее следует остальное содержимое. Оно без изменений. -->

Теперь на вкладках браузера будет отображаться новая иконка.

Используем коллекции

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

Сам термин “коллекции” - это прямой перевод с оригинального “Collections”. Коллекции, в контексте Jekyll, мне сложно было поначалу представить в голове, немного непонятно было после все этих “постов” и “страниц”. Уже после разбора на нескольких примерах это первое ощущение прошло. Теперь я бы рекомендовал понимать Collections как просто сборник информации.

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

Предварительный итог такой: если есть реальная необходимость в разбиении контента во времени, то лучше размещать информацию постами, если время абсолютно не важно, то можно пользоваться и коллекциями. Это не значит, что статьи в этом случае не подходят… посты - это просто классика, но в определенных случаях может быть удобнее пользоваться коллекциями. Например, сборник материала типа FAQ, какие-то уроки, служебные инструкции и т.п.

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

1. Объявление коллекции

Коллекции объявляются в файле _config.yml следующим образом:

collections:
  cosmonauts:
    output: true

где cosmonauts - это название нашей коллекции данных, а output: true - метаданные, благодаря которым каждый отдельный документ коллекции будет обработан и на выходе будет иметь свою собственную страницу. Например, файл _cosmonauts/gagarin.md будет представлен в http://example.com/cosmonauts/gagarin.html. На практике будет более ясно.

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

2. Создание коллекции

После того как мы объявили возможность использования коллекции, приступим к её созданию. Коллекция будет представлять из себя список биографий космонавтов.

Размещаться коллекция должна по адресу <source>/_cosmonauts, т.е. в корне проекта, и название папке впереди должно содержать нижнее подчеркивание. В папке будут располагаться документы с биографиями. Для нашего примера - gagarin.md и tereshkova.md. Обязательно наличие в этих файлах YAML front matter, иначе файл будет обработан как статический файл.

---
name: Юрий Алексеевич Гагарин
birthday: 9 марта 1934
expedition: Восток 1.
layout: default
---
#### Юрий Алексеевич Гагарин
Советский лётчик-космонавт, Герой Советского Союза, кавалер высших знаков отличия ряда государств, почётный гражданин многих российских и зарубежных городов. 12 апреля 1961 года Юрий Гагарин стал первым человеком в мировой истории, совершившим полёт в космическое пространство.
---
name: Терешкова Валентина Владимировна
birthday: 6 марта 1937
expedition: Восток 6.
layout: default
---
#### Терешкова Валентина Владимировна
Советский космонавт, первая в мире женщина-космонавт, Герой Советского Союза, Герой Социалистического Труда ЧССР, Герой Социалистического Труда НРБ, Герой Труда Вьетнама, Герой Труда МНР, генерал-майор, кандидат технических наук, профессор. Лётчик-космонавт СССР № 6, 10-й космонавт мира.

В шапке указываем какие-то пользовательские атрибуты, которые хотим использовать в дальнейшем. Все остальное содержимое будет доступно через переменную content.

3. Использование коллекции

Таким образом мы осуществили подготовку к использованию коллекции в основном коде. За биографию космонавтов на нашем сайте отвечает страница biography.html. Чтобы отразить на ней данные из нашей свежей коллекции данных поместим туда следующий код:

<!-- biography.html -->
---
layout: default
permalink: /biography
---
<h3>Самые известные космонавты СССР и России</h3>
<ul>
{% for cosmonaut in site.cosmonauts %}
  <li><a href="/cosmonauts/{{cosmonaut.title}}.html">{{cosmonaut.name}}</a></li>
  <p>Дата рождения:{{cosmonaut.birthday}}</p>
  <p>Название экспедиции:{{cosmonaut.expedition}}</p>
{% endfor %}
</ul>

Через переменную site.cosmonauts мы получаем список всех данных, содержащихся в нашей коллекции. Далее, осуществляя перебор по всем файлам, обращаемся к нужным нам атрибутам для их использования в коде. Таким образом получим список из космонавтов с краткими характеристиками. По каждому космонавту будет доступна отдельная страница благодаря указанным метаданным в файле настроек output: true.

Если отдельная страница не нужна, то метаданные можно удалить из настроек. При этом чтобы использовать содержимое файлов gagarin.md, tereshkova.md на странице biography.html, можно обратиться к нему через переменную cosmonaut.content.

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

Использование файлов данных

Этот функционал напоминает урезанную версию коллекций. Для понимания это должно быть проще. Сейчас поясню основные моменты.

  1. Все файлы данных должны находится строго в папке <source>/_data.
  2. Нет необходимости предварительно объявлять данные как коллекции в настройках.
  3. В качестве файлов данных допускается использовать форматы YAML, JSON, CSV.
  4. Файлы данных не обрабатываются в отдельные страницы как коллекции.
  5. Фалы данных доступны в переменной site.data.

В файлах данных таким образом должно быть удобно хранить и использовать какие-то пользовательские переменные, настройки проекта и т.п.

Для примера добавим в текущий проект на ту же страницу биографий краткие сведения о других космонавтах. Предварительно создаем файл с данными <source>/_data/cosmonauts.yml со следующим содержимым:

- name: Титов, Герман Степанович
  birthday: 11 сентября 1935
  expedition: Восток 2.

- name: Леонов Алексей Архипович
  birthday: 30 мая 1934
  expedition: Восход-2, Союз-19.

- name: Комаров Владимир Михайлович
  birthday: 16 марта 1927
  expedition: Восход-1, Союз-1.

А также добавляем цикл по перебору данных на страницу biography.html после цикла с коллекциями:

---
layout: default
permalink: /biography
---
<!-- тут цикл с коллекциями -->
<ul>
{% for cosmonaut in site.data.cosmonauts %}
  <li>
    <h4>{{cosmonaut.name}}</h4>
    <p>{{cosmonaut.birthday}}</p>
    <p>{{cosmonaut.expedition}}</p>
  </li>
{% endfor %}
</ul>

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

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

Внешний вид страницы biography