До этого момента не приходилось затрагивать эту тему. По факту оказалось очень даже привлекательная функция, многим может быть полезна. Для меня, думаю как и для большинства, основной формой подачи информации в Jekyll является (или являлось) создание постов и страниц. На этом как бы все потребности были удовлетворены и основные задачи выполнены. Однако, Jekyll имеет в своем арсенале еще парочку “фич”, позволяющих удобнее работать с публикуемым потоком информации. Попробуем разобраться.
Исходные данные
Используем статические файлы
Заголовок может звучит более многообещающим, чем мое содержание, но по-другому называть не хотелось. Принцип работы 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
.
Теперь можно легко добавлять биографии других космонавтов отдельными файлами, на заботясь о том, куда это придется встраивать и оформлять в коде. А также информация о космонавтах вынесена в отдельный блок, никак не связанный со остальными статьями.
Использование файлов данных
Этот функционал напоминает урезанную версию коллекций. Для понимания это должно быть проще. Сейчас поясню основные моменты.
- Все файлы данных должны находится строго в папке
<source>/_data
. - Нет необходимости предварительно объявлять данные как коллекции в настройках.
- В качестве файлов данных допускается использовать форматы YAML, JSON, CSV.
- Файлы данных не обрабатываются в отдельные страницы как коллекции.
- Фалы данных доступны в переменной
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
, который должен был получиться на выходе.