Jekyll и навигация между постами

22.12.2016 / #jekyll

Сделать навигацию между постами в Jekyll довольно просто. Воспользуемся для этого глобальной переменной page и поста previous и next. 

<nav>
 <a href="{{ page.previous.url }}">Prev</a>
 <a href="{{ page.next.url }}">Next</a>
</nav>

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

<nav>
 {% if page.previous.url %}
  <a href="{{ page.previous.url }}">Prev</a>
 {% endif %}
 {% if page.next.url %}
  <a href="{{ page.next.url }}">Next</a>
 {% endif %}
</nav>

То есть, если previous или next возвращают nil, то ссылка находящаяся между if не отобразится.

Я использую посты не только для статей, но и для вывода работ. Структура папки _post выглядит таким образом: 

| _post/
  /-- articles/
  /-- projects/

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

{% if page.categories %}
  {% assign category = page.categories[0] %}
  {% assign posts = site.categories[category] %}
  {% for post in posts %}
    {% if post.url == page.url %}
      {% assign post_index0 = forloop.index0 %}
      {% assign post_index1 = forloop.index %}
    {% endif %}
  {% endfor %}
  {% for post in posts %}
    {% if post_index0 == forloop.index %}
      {% assign next_post = post %}
    {% endif %}
    {% if post_index1 == forloop.index0 %}
      {% assign prev_post = post %}
    {% endif %}
  {% endfor %}
{% endif %}

Попробуем разобраться что к чему.

{% if page.categories %}
 {% assign category = page.categories[0] %}
 {% assign posts = site.categories[category] %}
 <!-- остальной код -->
{% endif %}

Если пост имеет категории, тогда создаем две переменные. В первую помещаем необходимую нам категорию, а во вторую все посты связанные с ней.

<!-- остальной код -->
{% for post in posts %}
 {% if post.url == page.url %}
  {% assign post_index0 = forloop.index0 %}
  {% assign post_index1 = forloop.index %}
 {% endif %}
{% endfor %}
 <!-- остальной код -->

При совпадении url страницы и поста, помещаем индексы итерации в post_index0 и post_index.

<!-- остальной код -->
{% for post in posts %}
 {% if post_index0 == forloop.index %}
  {% assign next_post = post %}
 {% endif %}
 {% if post_index1 == forloop.index0 %}
  {% assign prev_post = post %}
 {% endif %}
{% endfor %}
 <!-- остальной код -->

Снова воспользовавшись for перебираем посты и узнаем, есть ли следующий пост и предыдущий.

На этом все!

Все статьи