Blog post pagination with jekyll-paginate-v2

blog-post-pagination-with-jekyll-paginate-v2.md

Blog Post Pagination with jekyll-paginate-v2

This uses the pagination provided here. See the pagination in action at https://emmasax.com/blog/.

Let's start with the basics. Here's what the Jekyll _config.yml should look like:

title: An Awesome Blog
description: My blog, which is awesome
url: https://an-awesome-blog.com

pagination:
  enabled: true
  per_page: 5
  limit: 0
  sort_field: date
  sort_reverse: true
  trail:
    before: 1
    after: 1

And here's the generic pagination page should look like. This page will loop through all of the blog posts, and add the pagination bars as appropriate. This file is called pagination.html and should live in the _includes/ directory:

<nav aria-label="Blog post navigation">
  <ul class="pagination justify-content-center">
    {% assign second_to_last_page_number = paginator.total_pages | times: 1 | minus: 1 %}
    
    <!-- This generates an array of all of the numbers in the trail -->
    {% assign trail_page_numbers = "" | split: ',' %}
    {% for trail in paginator.page_trail %}
      {% assign trail_page_numbers = trail_page_numbers | push: trail.num %}
    {% endfor %}

    <!-- Show the button to the previous page -->
    {% if paginator.previous_page %}
      {% include previous_page.html %}
    {% else %}
      {% include disabled_x.html %}
    {% endif %}

    <!-- Always show the first page -->
    {% unless trail_page_numbers contains 1 %}
      {% assign page_number = 1 %}
      {% include numbered_page.html %}
    {% endunless %}

    <!-- If there's space between the trail and the first page, then show ... -->
    {% unless trail_page_numbers contains 2 %}
      {% include empty_ellipsis.html %}
    {% endunless %}

    <!-- Loop through the trail -->
    {% for trail in paginator.page_trail %}
      {% assign page_number = trail.num %}
      {% if trail.num == paginator.page %}
        {% include active_page.html %}
      {% else %}
        {% include numbered_page.html %}
      {% endif %}
    {% endfor %}

    <!-- If there's space between the trail and the last page, then show ... -->
    {% unless trail_page_numbers contains second_to_last_page_number %}
      {% include empty_ellipsis.html %}
    {% endunless %}

    <!-- Always show the last page -->
    {% unless trail_page_numbers contains paginator.total_pages %}
      {% assign page_number = paginator.total_pages %}
      {% include numbered_page.html %}
    {% endunless %}

    <!-- Show the button to the next page -->
    {% if paginator.next_page %}
      {% include next_page.html %}
    {% else %}
      {% include disabled_x.html %}
    {% endif %}
  </ul>
</div>

Lastly, here are the HTML files which are called from pagination.html, which should also live in the _includes/ directory:

• active_page.html
• disabled_x.html
• empty_ellipsis.html
• next_page.html
• previous_page.html
• numbered_page.html

active_page.html

<li class="page-item active">
  <a class="page-link">{{ page_number }}</a>
</li>

disabled_x.html

<li class="page-item disabled">
  <a class="page-link">ⓧ</a>
</li>

empty_ellipsis.html

<li class="page-item disabled">
  <a class="page-link">...</a>
</li>

next_page.html

<li class="page-item">
  <a class="page-link" href="{{ paginator.next_page_path }}">Next</a>
</li>

previous_page.html

<li class="page-item">
  <a class="page-link" href="{{ paginator.previous_page_path }}">Previous</a>
</li>

numbered_page.html

{% if page_number == 1 %} <!-- First page -->
  {% assign blog_url = "/blog/" %}
{% else %} <!-- Any other page -->
  {% assign blog_url = "/blog/" | append: page_number | append: "/" %}
{% endif %}

<li class="page-item">
  <a class="page-link" href="{{ blog_url }}">{{ page_number }}</a>
</li>

This uses the pagination provided here. See the pagination in action at https://emmasax.com/blog/.