Рано или поздно сайт (блог) может разрастись до приличных размеров. И если главная страница представляет из себя список статей, то список этот может получиться большим и листать его будет просто утомительно. Поэтому и придумали пагинацию. Как правило, к функциям пагинации относятся непосредственно разбиение потока информации на отдельные фрагменты, а также представление блока для навигации по этим самым фрагментам.
Исходные данные
Потестировать пагинацию на самом деле можно в самом начале разработки. Для этого не нужно создавать по сути никаких дополнительных структур. Единственное добавить разве что несколько статей, которые мы и будем разбивать пагинацией. В исходники из прошлой статьи заранее добавлю несколько новостных постов на главную страницу. Все можно посмотреть как обычно.
Добавление пагинации на сайт
Пагинация в Jekyll работает только с HTML форматом индексного файла (index.html и никак иначе). На странице, которая использует пагинацию, нельзя устанавливать свойство
permalink. Пагинация работает только сквозь все посты на сайте, не поддерживает использование тегов, категорий на данный момент.
Перво-наперво необходимо добавить плагин jekyll-paginate в настройки проекта:
gems: [jekyll-paginate]
paginate: 3
# paginate_path: "/blog/page:num/"где указываем непосредственно название используемого плагина, а также сразу задаем максимальное количество статей, отображаемых на одной странице. Помимо этого можно указать и адрес, по которому будут находиться страницы (по-умолчанию paginate_path: "/page:num/").
После данных манипуляций в проекте станет доступен объект paginator. С помощью основных атрибутов этого объекта и происходит основное взаимодействие в коде.
Далее необходимо разместить в index.html приблизительно следующий код:
<!-- index.html -->
---
layout: default
---
<h2>Последние новости</h2>
<ul>
{% for post in paginator.posts %}
<h3><a href="{{ post.url }}">{{ post.title }}</a></h3>
{% endfor %}
</ul>
<!-- заранее также пропишем блок управления. О нем далее. -->
{% include pagination.html %}где paginator.posts хранит в себе все статьи на текущей странице уже с учетом параметра paginate: 3, указанного в настройках. Перебирая по циклу все эти статьи, формируем список из заголовков.
Далее, чтобы добавить на главную страницу также блок управления пагинацией, т.е. по сути кнопки перехода, создадим следующий блок кода. Поместим его в отдельное включение _includes/pagination.html и будем использовать на главной странице, как было указано выше.
<div class="pagination">
{% if paginator.previous_page %}
<a href="{{ paginator.previous_page_path }}" class="previous">Сюда</a>
{% else %}
<span class="previous">Сюда</span>
{% endif %}
{% if paginator.next_page %}
<a href="{{ paginator.next_page_path }}" class="next">Туда</a>
{% else %}
<span class="next ">Туда</span>
{% endif %}
</div>
<span class="page_number ">Страница {{ paginator.page }} из {{ paginator.total_pages }}</span>Логика этого блока очень проста. Если в paginator доступна предыдущая страница, то отображаем ссылку на эту страницу, иначе отображаем просто текстовое поле. Аналогично и для последующей страницы. И в заключении пишем номер текущей страницы из всего количества.
Итог
Таким нехитрым способом в Jekyll добавляется пагинация. Надо отметить, что это самая простая рабочая вариация данного функционала. На просторах сети можно найти достаточно количество и более сложных версий. Выбор остается за пользователем.
Также хочу упомянуть о следующем - помните, добавляя пагинацию на сайт, вы добавляете и новые страницы для индексирования поисковым системам. Проводите работу на сайте в направлении SEO, используйте rel="canonical", возможно откажитесь от индексирования на некоторых страницах если будут наблюдаться проблемы с поисковыми движками. Просто об этом надо помнить.