До этого момента не приходилось затрагивать эту тему. По факту оказалось очень даже привлекательная функция, многим может быть полезна. Для меня, думаю как и для большинства, основной формой подачи информации в Jekyll является (или являлось) создание постов и страниц. На этом как бы все потребности были удовлетворены и основные задачи выполнены. Однако, Jekyll имеет в своем арсенале еще парочку “фич”, позволяющих удобнее работать с публикуемым потоком информации. Попробуем разобраться.
Исходные данные
Используем статические файлы
Заголовок может звучит более многообещающим, чем мое содержание, но по-другому называть не хотелось. Принцип работы Jekyll со статическими файлами рассмотрим на примере с картинкой, а именно favicon.
Если присматривались, то во всех предыдущих исходниках при запуске проекта в логах консоли вылезала ошибка, что не найден файл favicon.ico. Сейчас попробуем убить двух зайцев - поставим иконку сайта для браузеров и уберем эту ошибку, а также разберемся со статическими файлами.
Что же Jekyll понимает под статическими файлами? Согласно официальной документации - все что не содержит YAML шапки (YAML front matter) перед основным содержимым. Речь про те самые две строчки по три тире длинной :) Для Jekyll отсутствие этой вводной означает, что файл не принимает участия в отрисовке страницы и его не надо как-либо конвертировать.
В эту категорию и попадают изображения, какие-либо форматы документов (.doc .pdf) и прочее. Надо помнить, что все статические файлы Jekyll размещает по такому же адресу, по которому они находились изначально. То есть все статические файлы из корня проекта будут помещены также в корень сгенерированного сайта, а файлы в папках будут доступны в одноименных папках.
Создаем в корне папку images
и кладем туда иконку сайта, предварительно скачанную с просторов интернета или нарисованную самостоятельно. В результате будет выглядеть примерно так: images/favicon.png
. Сейчас иконку можно взять отсюда.
Далее, чтобы все это новшество подхватилось, необходимо на всех страницах в тэге <head>
указать ссылку на используемую иконку. Сделаем это, добавив строчку со ссылкой в шаблон default.html
.
Теперь на вкладках браузера будет отображаться новая иконка.
Используем коллекции
Коллекции в Jekyll появились в начале мая 2014 года - это, можно сказать, относительно всего проекта недавно. Поэтому многие пользователи этот новый функционал не опробовали, поскольку вплотную пользовались тем, что уже было.
Сам термин “коллекции” - это прямой перевод с оригинального “Collections”. Коллекции, в контексте Jekyll, мне сложно было поначалу представить в голове, немного непонятно было после все этих “постов” и “страниц”. Уже после разбора на нескольких примерах это первое ощущение прошло. Теперь я бы рекомендовал понимать Collections как просто сборник информации.
По сути весь сайт можно было бы тоже назвать сборником информации, поэтому необходимо также пояснить что имеется в виду и под этим определением. Каких-либо содержательных отличий между страницами, постами и коллекциями действительно нет. Это отличие на уровне логического разделения. Страницы как правило образуются как обособленный и неповторяющийся контент на сайте, посты - это цепочка контента, представленная во времени, а коллекции придуманы таким образом, что они по сути являются постами, но без какой-либо временной привязки. Однако, зачастую, характеристика времени в постах не очень-то и важна, именно поэтому в данном случае я бы ставил тождество между постами и коллекциями.
Предварительный итог такой: если есть реальная необходимость в разбиении контента во времени, то лучше размещать информацию постами, если время абсолютно не важно, то можно пользоваться и коллекциями. Это не значит, что статьи в этом случае не подходят… посты - это просто классика, но в определенных случаях может быть удобнее пользоваться коллекциями. Например, сборник материала типа FAQ, какие-то уроки, служебные инструкции и т.п.
Вот так витиевато у меня получилось описать словами, теперь просто покажу как это я представил на практике. На сайте имеется страница со списком космонавтов с их краткой биографией. Вынесем все эти биографии как отдельный сборник информации, который в любой момент можно будет дополнить, отредактировать или убрать из публикации.
1. Объявление коллекции
Коллекции объявляются в файле _config.yml
следующим образом:
где cosmonauts
- это название нашей коллекции данных, а output: true
- метаданные, благодаря которым каждый отдельный документ коллекции будет обработан и на выходе будет иметь свою собственную страницу. Например, файл _cosmonauts/gagarin.md
будет представлен в http://example.com/cosmonauts/gagarin.html
. На практике будет более ясно.
Помимо этих метаданных в настройках можно указывать пользовательские данные, а также менять дефолтные значения на свои. Подробнее можно почитать в официальной документации.
2. Создание коллекции
После того как мы объявили возможность использования коллекции, приступим к её созданию. Коллекция будет представлять из себя список биографий космонавтов.
Размещаться коллекция должна по адресу <source>/_cosmonauts
, т.е. в корне проекта, и название папке впереди должно содержать нижнее подчеркивание. В папке будут располагаться документы с биографиями. Для нашего примера - gagarin.md
и tereshkova.md
. Обязательно наличие в этих файлах YAML front matter, иначе файл будет обработан как статический файл.
В шапке указываем какие-то пользовательские атрибуты, которые хотим использовать в дальнейшем. Все остальное содержимое будет доступно через переменную content
.
3. Использование коллекции
Таким образом мы осуществили подготовку к использованию коллекции в основном коде. За биографию космонавтов на нашем сайте отвечает страница biography.html
. Чтобы отразить на ней данные из нашей свежей коллекции данных поместим туда следующий код:
Через переменную site.cosmonauts
мы получаем список всех данных, содержащихся в нашей коллекции. Далее, осуществляя перебор по всем файлам, обращаемся к нужным нам атрибутам для их использования в коде. Таким образом получим список из космонавтов с краткими характеристиками. По каждому космонавту будет доступна отдельная страница благодаря указанным метаданным в файле настроек output: true
.
Если отдельная страница не нужна, то метаданные можно удалить из настроек. При этом чтобы использовать содержимое файлов gagarin.md, tereshkova.md
на странице biography.html, можно обратиться к нему через переменную cosmonaut.content
.
Теперь можно легко добавлять биографии других космонавтов отдельными файлами, на заботясь о том, куда это придется встраивать и оформлять в коде. А также информация о космонавтах вынесена в отдельный блок, никак не связанный со остальными статьями.
Использование файлов данных
Этот функционал напоминает урезанную версию коллекций. Для понимания это должно быть проще. Сейчас поясню основные моменты.
- Все файлы данных должны находится строго в папке
<source>/_data
. - Нет необходимости предварительно объявлять данные как коллекции в настройках.
- В качестве файлов данных допускается использовать форматы YAML, JSON, CSV.
- Файлы данных не обрабатываются в отдельные страницы как коллекции.
- Фалы данных доступны в переменной
site.data
.
В файлах данных таким образом должно быть удобно хранить и использовать какие-то пользовательские переменные, настройки проекта и т.п.
Для примера добавим в текущий проект на ту же страницу биографий краткие сведения о других космонавтах. Предварительно создаем файл с данными <source>/_data/cosmonauts.yml
со следующим содержимым:
А также добавляем цикл по перебору данных на страницу biography.html
после цикла с коллекциями:
Формат файлов данных предполагает их более узкое использование нежели чем коллекции, поэтому, думаю их стоит использовать под настройки проекта, ссылки аккаунтов, различные списки и прочее.
Как результат этой статьи представлю внешний вид страницы biography
, который должен был получиться на выходе.