ssg  
Article Series

Jekyll in General

Jekyll Plain

Where to Discuss?

Local Group

Preface

Goal: Pagination using Number.

Source Code

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


1: Prepare

Layout Liquid: Blog

Consider use pagination-v1/02-number.html partial, in _layouts/blog.html.

{% include pagination-v1/02-number.html %}

2: Preview: General

This is what we want to achieve in this tutorial.

Jekyll Pagination: Number Pagination without Navigation

HTML Preview

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

<nav role="navigation">
  <!-- Page numbers. -->
    [ <a href="/pages">1</a> ]
    [ <a href="/pages/blog-2">2</a> ]
    [ <a href="/pages/blog-3">3</a> ]
    [ <a href="/pages/blog-4">4</a> ]
    [ 5 ]
    [ <a href="/pages/blog-6">6</a> ]
    [ <a href="/pages/blog-7">7</a> ]
    [ <a href="/pages/blog-8">8</a> ]
    [ <a href="/pages/blog-9">9</a> ]
</nav>

We will achieve this with jekyll code.


3: Navigation: Number

Pagination by number is also simple.

Partial: Pagination-v1 Number

We can make the code safer, but this is not necessary.

{% capture spaceless %}
  {% if page.paginate_root == nil %}
    {% assign paginate_root = "/" %}
  {% else %}    
    {% assign paginate_root = page.paginate_root %}
  {% endif %}

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

This below should be sufficient.

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

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

    {% capture spaceless %}
      {% assign p_first = paginate_root
                        | prepend: site.baseurl %}
      {% assign page_current = paginator.page %}
    {% endcapture %}

    <!-- Page numbers. -->
    {% for page_cursor in (1..total_pages) %}
      {% if page_cursor == page_current %}
        [ {{ page_cursor }} ]
      {% else %}

        {% if page_cursor == 1 %}
          {% assign p_link = p_first %}
        {% else %}
          {% assign p_link = site.paginate_path
                           | relative_url
                           | replace: ':num', page_cursor %}
        {% endif %}

        [ <a href="{{ p_link }}">{{ page_cursor }}</a> ]
       {% endif %}
    {% endfor %}

  {% endif %}
</nav>

Partial: Pagination-v2 Number

As usual, there is a slight difference, between pagination-v1 and pagination-v2.

  {% assign p_link = site.pagination.permalink
                   | prepend: paginate_root
                   | relative_url
                   | replace: ':num', page_cursor

How does it works ?

Just a simple loop:

    {% for page_cursor in (1..total_pages) %}
      ...
    {% endfor %}

And simple conditional:

{% assign page_current = paginator.page %} %}
...

      {% if page_cursor == page_current %}
        [ {{ page_cursor }} ]
      {% else %}

        {% if page_cursor == 1 %}
          {% assign p_link = p_first %}
        {% else %}
          {% assign p_link = site.paginate_path
                           | relative_url
                           | replace: ':num', page_cursor %}
        {% endif %}

        [ <a href="{{ p_link }}">{{ page_cursor }}</a> ]
       {% endif %}

There is, no href link for current page.


4: Navigation: Button

Sure you can combine with navigation button

  • previous, and next;

  • first, and last.

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

    {% capture spaceless %}
      {% assign p_first = paginate_root
                        | prepend: site.baseurl %}
      {% assign page_current = paginator.page %}
    {% endcapture %}

    <!-- First Page. -->
    {% unless paginator.page == 1 %}
      [ <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 %}

    <!-- Page numbers. -->
    ...

    <!-- 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>

We are going to make this code simpler, by using filter plugin in later chapter.


What is Next ?

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

Thank you for reading.