Jekyll Plain - Pagination - Simple

   
   
 jekyll  plain  
 ssg  
Article Series

Jekyll in General

Jekyll Plain

Jekyll Bootstrap OC

Jekyll Bulma MD

Conclusions

Repository

Where to Discuss?

Local Group

Table of Content

Preface

Goal: A Simple Pagination.

Every journey start with a single step.

Source Code

This article use tutor-05 theme. We will create it step by step.

1: Preview: General

This is what we want to achieve in this tutorial.

Jekyll Pagination: Simple Pagination with Navigation

Layout Liquid: Blog

Consider use pagination-v1/01-simple.html partial, in _layouts/blog.html.

{% include pagination-v1/01-simple.html %}

HTML Preview

Consider fast forward to the last page, so we can have both enabled button and disabled button. We need those two kinds of button as an ideal example

Jekyll Pagination: Enable and Disable Button

The HTML that we want to achieve in this article, is similar as below.

<nav role="navigation">
    <!-- First Page. -->
      [ <a href="/pages">First</a> ]

    <!-- Previous Page. -->
      [ <a href="/pages/blog-8">Previous</a> ]

    <!-- Indicator Number. -->
      [ Page: 9 of 9 ]

    <!-- Next Page. -->
      [ Next ]

    <!-- Last Page. -->
      [ Last ]
</nav>

We will achieve this with jekyll code.

2: Navigation: Previous and Next

{% capture spaceless %}
  {% assign total_pages = paginator.total_pages %}

  <!-- Get paginate_root from page in frontmatter -->
  {% assign paginate_root = page.paginate_root %}
{% endcapture %}

<nav role="navigation">
  {% if total_pages > 1 %}

    <!-- Previous Page. -->
    {% if paginator.previous_page %}
      {% assign p_prev = paginator.previous_page_path
                       | prepend: site.baseurl %}
      [ <a href="{{ p_prev }}">Previous</a> ]
    {% else %}
      [ Previous ]
    {% endif %}

    <!-- Next Page. -->
    {% if paginator.next_page %}
      {% assign p_next = paginator.next_page_path
                       | prepend: site.baseurl %}
      [ <a href="{{ p_next }}">Next</a> ]
    {% else %}
      [ Next ]
    {% endif %}

  {% endif %}
</nav>
{% endif %}

Browser: Pagination Preview

Examine any page in blog section.

How does it works ?

This code above rely on

  • Previous Page: paginator.previous_page, and

  • Next Page: paginator.next_page.

This should be self explanatory.

3: Navigation: First and Last

Consider also add first page and last page.

{% capture spaceless %}
  {% assign total_pages = paginator.total_pages %}

  <!-- Get paginate_root from page in frontmatter -->
  {% assign paginate_root = page.paginate_root %}
{% endcapture %}

<nav role="navigation">
  {% if total_pages > 1 %}

    <!-- First Page. -->
    {% unless paginator.page == 1 %}
      {% assign p_first = paginate_root 
                        | prepend: site.baseurl %}
      [ <a href="{{ p_first }}">First</a> ]
    {% else %}
      [ First ]
    {% endunless %}

    <!-- Last Page. -->
    {% unless paginator.page == total_pages %}
      {% assign p_last = site.paginate_path
                       | relative_url
                       | replace: ':num', total_pages %}
      [ <a href="{{ p_last }}">Last</a> ]
    {% else %}
      [ Last ]
    {% endunless %}

  {% endif %}
</nav>

Browser: Pagination Preview

Examine any page in blog section.

How does it works ?

jekyll utilize paginator.page, to show first page and last page.

{% assign total_pages = paginator.total_pages %} %}

  • First Page: {% unless paginator.page == 1 %}.

  • Last Page: {% unless paginator.page == total_pages %}.

This code above rely on the calculation of:

  • First Page: p_first, and

  • Last Page: p_last.

4: Active Page Indicator

And also the pagination positioning in between, in the middle of those.

{% capture spaceless %}
  {% assign total_pages = paginator.total_pages %}

  <!-- Get paginate_root from page in frontmatter -->
  {% assign paginate_root = page.paginate_root %}
{% endcapture %}

{% if totalPages > 1 %}
<nav class="pagination is-small is-centered" 
     role="navigation" aria-label="pagination">

    <!-- Indicator Number. -->
      [ Page: {{ paginator.page }} of {{ total_pages }} ]

</nav>
{% endif %}

Browser: Pagination Preview

Examine any page in blog section.

How does it works ?

This just show:

[ Page: {{ paginator.page }} of {{ total_pages }} ]

5: Summary: Pagination-v1

Complete code is here below:

{% capture spaceless %}
  {% assign total_pages = paginator.total_pages %}

  <!-- Get paginate_root from page in frontmatter -->
  {% assign paginate_root = page.paginate_root %}
{% endcapture %}

<nav role="navigation">
  {% if total_pages > 1 %}

    <!-- First Page. -->
    {% unless paginator.page == 1 %}
      {% assign p_first = paginate_root 
                        | prepend: site.baseurl %}
      [ <a href="{{ p_first }}">First</a> ]
    {% else %}
      [ First ]
    {% endunless %}

    <!-- Previous Page. -->
    {% if paginator.previous_page %}
      {% assign p_prev = paginator.previous_page_path
                       | prepend: site.baseurl %}
      [ <a href="{{ p_prev }}">Previous</a> ]
    {% else %}
      [ Previous ]
    {% endif %}

    <!-- Indicator Number. -->
      [ Page: {{ paginator.page }} of {{ total_pages }} ]

    <!-- Next Page. -->
    {% if paginator.next_page %}
      {% assign p_next = paginator.next_page_path
                       | prepend: site.baseurl %}
      [ <a href="{{ p_next }}">Next</a> ]
    {% else %}
      [ Next ]
    {% endif %}

    <!-- Last Page. -->
    {% unless paginator.page == total_pages %}
      {% assign p_last = site.paginate_path
                       | relative_url
                       | replace: ':num', total_pages %}
      [ <a href="{{ p_last }}">Last</a> ]
    {% else %}
      [ Last ]
    {% endunless %}

  {% endif %}
</nav>

Browser: Pagination Preview

Examine any page in blog section.

Jekyll Pagination: Simple Pagination with Navigation

6: Summary: Pagination-v2

Difference

pagination-v2 code is slightly different.

While in pagination-v1, the last URL computed by this:

      {% assign p_last = site.paginate_path
                       | relative_url
                       | replace: ':num', total_pages %}

In pagination-v2, the last URL computed by this:

      {% assign p_last = site.pagination.permalink
                       | prepend: paginate_root
                       | relative_url
                       | replace: ':num', total_pages
       %}

Complete Code

Complete code is here below:

{% capture spaceless %}
  {% assign total_pages = paginator.total_pages %}

  <!-- Get paginate_root from page in frontmatter -->
  {% assign paginate_root = page.paginate_root %}
{% endcapture %}

<nav role="navigation">
  {% if total_pages > 1 %}

    <!-- First Page. -->
    {% unless paginator.page == 1 %}
      {% assign p_first = paginate_root
                        | prepend: site.baseurl %}
       [ <a href="{{ p_first }}">First</a> ]
    {% else %}
      [ First ]
    {% endunless %}

    <!-- Previous Page. -->
    {% if paginator.previous_page %}
      {% assign p_prev = paginator.previous_page_path
                       | prepend: site.baseurl %}
      [ <a href="{{ p_prev }}">Previous</a> ]
    {% else %}
      [ Previous ]
    {% endif %}

    <!-- Indicator Number. -->
      [ Page: {{ paginator.page }} of {{ total_pages }} ]

    <!-- Next Page. -->
    {% if paginator.next_page %}
      {% assign p_next = paginator.next_page_path
                       | prepend: site.baseurl %}
      [ <a href="{{ p_next }}">Next</a> ]
    {% else %}
      [ Next ]
    {% endif %}

    <!-- Last Page. -->
    {% unless paginator.page == total_pages %}
      {% assign p_last = site.pagination.permalink
                       | prepend: paginate_root
                       | relative_url
                       | replace: ':num', total_pages
       %}
      [ <a href="{{ p_last }}">Last</a> ]
    {% else %}
      [ Last ]
    {% endunless %}

  {% endif %}
</nav>

What is Next ?

Consider continue reading [ Jekyll Plain - Pagination - Number ].

Thank you for reading.