Блог на Jekyll. Категории и тэги

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

Как Jekyll видит категории?

Сразу из коробки нам доступна переменная site.categories. В этой переменной хранится массив всех категорий и соответствующих им статей. Однако, переменная доступна, но она будет пуста до тех пор, пока мы не определим хотя бы одну статью в категорию. Чтобы затем использовать эту переменную в html, обращаться к ней надо по-привычному через {{site.categories}} . Обращаю внимание, что переменная будет содержать массив примерно следующего содержания: {"cat1"=>[#,#,#], "cat2"=>[#,#],...}, где cat1 - это название категории, а далее в квадратных скобках обозначение статей данной категории. Это информация пригодится чуть дальше.

Назначение категорий статьям

Чтобы присвоить или определить статью под какую-либо категорию, достаточно в YAML шапке данной статьи указать category:

title: Some Title
date: 2016-08-01 14:22
category: MyCategory

Если статья относится сразу к несольким категориям, то логично указать их массивом:

title: Some Title
date: 2016-08-01 14:22
category: [MyCategory1, AnotherCat, SomethingCat]

После добавления последнего варианта, например, переменная site.categories будет содержать 3 объекта с разными названиями и одинаковыми ссылками на одну и ту же статью.

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

Отображение списка статей по категориям

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

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

Опустим момент как добавить эту страницу, про это уже был разговор, а просто изложим требуемое содержимое:

<!-- categories.html -->
---
layout: default
title: Категории
permalink: /categories/
---

<h3>Список всех статей по доступным категориям.</h3>

{% for postscat in site.categories %}
{% assign cat = postscat | first %}
<h4 id="{{ cat | slugify }}"> - {{ cat }}</h4>
<ul>
	{% for post in site.categories.[cat] %}
	<li>
		{{post.date | date: "%d-%m-%Y"}}
		<a href="{{post.url}}">{{post.title}}</a>
	</li>
	{% endfor %}
</ul>
{% endfor %}

Процесс примерно следующий. Осуществляется перебор по объектам переменной site.categories. Поскольку каждый выбранный объект представляется в виде "catname"=>[#,#,#] и для дальнейшего использования сейчас мне нужно только название категории, то далее определим нужную переменную для внутреннего использования: {% assign cat = postscat | first %}. Таким образом в переменной cat теперь храниться название категории, которое чуть ниже выводиться в виде подзаголовка. Ну и далее организуется еще один цикл с перебором по всем статьям данной категории. Выходные данные представлены в виде списка названий статьей со ссылками на их собственные страницы.

Итог

Аналогичным образом можно работать и с тэгами. В этом случае просто поменяется название переменной на site.tags, а весь алгоритм останется прежним.