ssg  
Article Series

Jekyll in General

Jekyll Plain

Where to Discuss?

Local Group

Preface

Goal: Put a Bulma stylesheet, based on our plain pagination.

Source Code

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

Previous Tutorial

This article is based on our plain pagination.

It is basically just putting on bulma stylesheet, so that the pagination looks pretty.


Intro

I hava already make a step by step partial, so you can learn pagination from simple to complete one. For each step, I have made different partial.

Step By Step

We are going to have four steps to achieve this pagination.

  • Layout 01: Simple

  • Layout 02: Number

  • Layout 03: Adjacent

  • Layout 04: Indicator

  • Layout 05: Responsive

  • Layout 06: Screenreader

We have already cover Layout 01 through Layout 04, with Jekyll Plain paginatin without stylesheet. Now we need two more articles:

  1. Pagination: Bulma Stylesheet What we need to do now is to refresh our memory from four steps above, all in this article.

  2. Pagination: Bulma Responsive Then we will continue with responsive pagination and screenreader, in the next article.

Pagination Plugin

There are two versions of pagination plugin iin Jekyll.

  • Pagination-v1

  • Pagination-v2

I provide both example. But we are going to use pagination-v1 in this article. There is only slight differences.

Configuration

You can read in this article.

Content: Example Article

I provide 17 articles. It should be enough to simulate responsive pagination.

Layout: Blog

Consider review our last layout/index.html laoput. The complete code is as simply as below layout.

---
layout: columns-single
---

{% include pagination-v1/06-screenreader.html %}

{% assign posts = paginator.posts %}
{% include index/blog-list.html %}

{% comment %}

v1: not developed anymore for years
  {% include pagination-v1/01-simple.html %}
  {% include pagination-v1/02-number.html %}
  {% include pagination-v1/03-adjacent.html %}
  {% include pagination-v1/04-indicator.html %}
  {% include pagination-v1/05-responsive.html %}
  {% include pagination-v1/06-screenreader.html %}

v2: not supported by github pages (Without travis)
  {% include pagination-v2/01-simple.html %}
  {% include pagination-v2/02-number.html %}
  {% include pagination-v2/03-adjacent.html %}
  {% include pagination-v2/04-indicator.html %}
  {% include pagination-v2/05-responsive.html %}
  {% include pagination-v2/06-screenreader.html %}

The choice is yours.

{% endcomment %}

You should start with 01-simple.html, and so on.

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

Now you should be ready with bulma pagination in Jekyll.


1: Simple with Navigation

This preview is what we want to achieve:

Jekyll Bulma Pagination: 01 Simple

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. The HTML that we want to achieve in this article, is similar as below.

<nav class="pagination is-small is-centered"
     role="navigation" 
     aria-label="pagination">

    <!-- First Page. -->   
      <a class="pagination-previous" 
         href="/pages/index.html"
         rel="first">First</a>

    <!-- Previous Page. -->
      <a class="pagination-previous" 
         href="/pages/page-8/index.html" 
         rel="prev">Previous</a>

    <!-- Indicator Number. -->
    <a class="pagination-link"
       disabled>Page: 9 of 9</a>

    <!-- Next Page. -->
      <a class="pagination-next" 
         title="This is the last page"
         disabled="">Next</a>

    <!-- Last Page. -->
      <a class="pagination-next" 
         title="This is the last page"
         disabled="">Last</a>

    <!-- Dummy. Do not delete! -->
    <ul class="pagination-list">
    </ul>

</nav>

Explanation

Partial Liquid

We will achieve this with liquid code below:

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

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

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

    <!-- First Page. -->
    {% unless paginator.page == 1 %}
      {% assign p_first = paginate_root 
                        | prepend: site.baseurl %}
      <a class="pagination-previous hoverable"
         href="{{ p_first }}"
         rel="first">First</a>
    {% else %}
      <a class="pagination-previous"
         title="This is the first page"
         disabled>First</a>
    {% endunless %}

    <!-- Previous Page. -->
    {% if paginator.previous_page %}
      {% assign p_prev = paginator.previous_page_path
                       | prepend: site.baseurl %}
      <a class="pagination-previous hoverable"
         href="{{ p_prev }}" 
         rel="prev">Previous</a>
    {% else %}
      <a class="pagination-previous"
         title="This is the first page"
         disabled>Previous</a>
    {% endif %}

    <!-- Indicator Number. -->
    <a class="pagination-link" 
       disabled>Page: {{ paginator.page }} of {{ total_pages }}</a>

    <!-- Next Page. -->
    {% if paginator.next_page %}
      {% assign p_next = paginator.next_page_path
                       | prepend: site.baseurl %}
      <a class="pagination-next hoverable"
         href="{{ p_next }}"
         rel="next">Next</a>
    {% else %}
      <a class="pagination-next"
         title="This is the last page"
         disabled>Next</a>
    {% endif %}

    <!-- Last Page. -->
    {% unless paginator.page == total_pages %}
      {% assign p_last = site.paginate_path
                       | relative_url 
                       | replace: ':num', total_pages 
                       | prepend: site.baseurl %}
      <a class="pagination-next hoverable"
         href="{{ p_last }}"
         rel="last">Last</a>
    {% else %}
      <a class="pagination-next"
         title="This is the last page"
         disabled>Last</a>
    {% endunless %}

    <!-- Dummy. Do not delete! -->
    <ul class="pagination-list">
    </ul>

  {% endif %}
</nav>

Or alternatively with pagination-v2

Page Indicator

As simple as:

    <!-- Indicator Number. -->
    <a class="pagination-link" 
       disabled>Page: {{ paginator.page }} of {{ total_pages }}</a>

2: Number

This preview is what we want to achieve:

Jekyll Bulma Pagination: 02 Number

HTML Preview

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

    <ul class="pagination-list">
      <!-- Page numbers. -->

      <li>
        <a class="pagination-link hoverable"
           href="/pages/index.html"
           aria-label="Goto page 1">
          1
        </a>
      </li>

      <li>
        <a class="pagination-link hoverable"
           href="/pages/page-2/index.html"
           aria-label="Goto page 2">
          2
        </a>
      </li>

      ...

      <li>
        <a class="pagination-link hoverable"
           href="/pages/page-8/index.html"
           aria-label="Goto page 8">
          8
        </a>
      </li>

      <li>
       <a class="pagination-link is-current brown" 
           aria-label="Page 9">
          9
        </a>
      </li>

    </ul>

Partial Liquid

We will achieve this with liquid code below:

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

  {% assign total_pages = paginator.total_pages %}
  {% assign color_main  = page.color_main  | default: layout.color_main %}
{% endcapture %}

<nav class="pagination is-small is-centered" 
     role="navigation" aria-label="pagination">
  {% 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 class="pagination-previous hoverable"
         href="{{ p_first }}"
         rel="first">First</a>
    {% else %}
      <a class="pagination-previous"
         title="This is the first page"
         disabled>First</a>
    {% endunless %}

    <!-- Previous Page. -->
    {% if paginator.previous_page %}
      {% assign p_prev = paginator.previous_page_path
                       | prepend: site.baseurl %}
      <a class="pagination-previous hoverable"
         href="{{ p_prev }}" 
         rel="prev">Previous</a>
    {% else %}
      <a class="pagination-previous"
         title="This is the first page"
         disabled>Previous</a>
    {% endif %}

    <!-- Next Page. -->
    {% if paginator.next_page %}
      {% assign p_next = paginator.next_page_path
                       | prepend: site.baseurl %}
      <a class="pagination-next hoverable"
         href="{{ p_next }}"
         rel="next">Next</a>
    {% else %}
      <a class="pagination-next"
         title="This is the last page"
         disabled>Next</a>
    {% endif %}

    <!-- Last Page. -->
    {% unless paginator.page == total_pages %}
      {% assign p_last = site.paginate_path
                       | relative_url
                       | replace: ':num', total_pages
                       | prepend: site.baseurl %}
      <a class="pagination-next hoverable"
         href="{{ p_last }}"
         rel="last">Last</a>
    {% else %}
      <a class="pagination-next"
         title="This is the last page"
         disabled>Last</a>
    {% endunless %}

    <ul class="pagination-list">
    <!-- Page numbers. -->
    {% for page_cursor in (1..total_pages) %}
      <li>
      {% if page_cursor == page_current %}
        <a class="pagination-link is-current {{ color_main }}" 
           aria-label="Page {{ page_cursor }}">
          {{ page_cursor }}
        </a>
      {% else %}

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

        <a class="pagination-link hoverable"
           href="{{ p_link }}"
           aria-label="Goto page_cursor {{ page_cursor }}">
          {{ page_cursor }}
        </a>
       {% endif %}
      </li>
    {% endfor %}
    </ul>

  {% endif %}
</nav>

Or alternatively with pagination-v2

Loop: Page Number

As complex as:

    <ul class="pagination-list">
    <!-- Page numbers. -->
    {% for page_cursor in (1..total_pages) %}
      <li>
      {% if page_cursor == page_current %}
        <a class="pagination-link is-current {{ color_main }}" 
           aria-label="Page {{ page_cursor }}">
          {{ page_cursor }}
        </a>
      {% else %}

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

        <a class="pagination-link hoverable"
           href="{{ p_link }}"
           aria-label="Goto page_cursor {{ page_cursor }}">
          {{ page_cursor }}
        </a>
       {% endif %}
      </li>
    {% endfor %}
    </ul>

This would be far shorter with custom plugin.

Explanation


3: Adjacent

Preview: General

It is not easy to explain by words. Let me explain what we want to achive by using these images below. The box without underline, is the active page. since we have 17 articles and 3 page for each pagination, then we have 9 pages of pagination. We have from first page (1), to last page (9).

This is what we want to achieve in this tutorial.

Jekyll Bulma Pagination: 03 Adjacent

Animation: Combined Version

This is the complete version. We will achieve this later.

Jekyll Pagination: Combined Animation

Animation: Stripped Version

I’m following Glenn McComb code, combined with my own code, and this is the result.

Jekyll Pagination: Adjacent Animation

HTML Preview

Just like previous, but filtered to show only number within link offset.

Partial Liquid: Variable Initialization

{% capture spaceless %}
  {% assign total_pages = paginator.total_pages %}
  {% assign color_main  = page.color_main  | default: layout.color_main %}
{% endcapture %}

  {% if total_pages > 1 %}
    {% capture spaceless %}
      <!-- Get paginate_root from page in frontmatter -->
      {% assign paginate_root = page.paginate_root %}
      {% assign p_first = paginate_root | prepend: site.baseurl %}

      {% assign page_current  = paginator.page %}

      {% assign link_offset   = 2 %}  
      {% assign link_max      = link_offset  | times: 2 | plus: 1 %}

      {% assign limit_lower   = link_offset  | plus: 1 %}
      {% assign limit_upper   = total_pages  | minus: link_offset %}
  
      {% assign min_lower     = link_max %}  
      {% assign max_upper     = total_pages  | minus: link_max %}
    
      {% assign lower_offset  = page_current | minus: link_offset %}  
      {% assign upper_offset  = page_current | plus: link_offset %}  
    {% endcapture %}
  {% endif %}

The link offset calculation is as below:

  {% if total_pages > 1 %}
  
    <!-- Page numbers. -->
    {% for page_cursor in (1..total_pages) %}

      {% capture spaceless %}
        <!-- Flag Calculation -->
        {% assign page_current_flag = false %}

        {% if total_pages > link_max %}
        <!-- Complex page_cursor numbers. -->

          <!-- Lower limit pages. -->
          <!-- If the user is on a page_cursor which is in the lower limit.  -->
          {% if page_current <= limit_lower %}
            <!-- If the current loop page_cursor is less than max_links. -->
            {% if page_cursor <= min_lower %}
              {% assign page_current_flag = true %}
            {% endif %}

          <!-- Upper limit pages. -->
          <!-- If the user is on a page_cursor which is in the upper limit. -->
          {% elsif page_current >= limit_upper %}
            <!-- If the current loop page_cursor is greater than total pages minus $max_links -->
            {% if page_cursor > max_upper %}
              {% assign page_current_flag = true %}
            {% endif %}

          <!-- Middle pages. -->
          {% else %}
          
            {% if (page_cursor >= lower_offset) and (page_cursor <= upper_offset) %}
              {% assign page_current_flag = true %}
            {% endif %}

          {% endif %}

        {% else %}
        <!-- Simple page_cursor numbers. -->

          {% assign page_current_flag = true %}
        {% endif %}
      {% endcapture %}

      <!-- Show Pager. -->
      {% if page_current_flag == true %}
      ...
      {% endif %}

    {% endfor %}

  {% endif %}

This can be simplified using custom plugin.

Partial Liquid: HTML View

The complete view with liquid code is as below:

<nav class="pagination is-small is-centered"
     role="navigation" aria-label="pagination">

  {% if total_pages > 1 %}
  <ul class="pagination-list">
  
    {% capture spaceless %}
      <!-- Variable Initialization -->
      ...
    {% endcapture %}

    <!-- Page numbers. -->
    {% for page_cursor in (1..total_pages) %}

      {% capture spaceless %}
        <!-- Flag Calculation -->
        ...
      {% endcapture %}

      <!-- Show Pager. -->
      {% if page_current_flag == true %}
      <li>
        {% if page_cursor == page_current %} 
        <a class="pagination-link is-current {{ color_main }}"
           aria-label="Page {{ page_cursor }}">
          {{ page_cursor }}
        </a>
        {% else %}

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

        <a class="pagination-link hoverable"
           href="{{ p_link }}"
           aria-label="Goto page_cursor {{ page_cursor }}">
          {{ page_cursor }}
        </a>
        {% endif %}
      </li>
      {% endif %}

    {% endfor %}

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

Or alternatively the complete code with pagination-v2:

Explanation


4: Indicator

This preview is what we want to achieve:

Jekyll Bulma Pagination: 04 Indicator

What I like with Bulma Pagination is, we can have alternate view:

Jekyll Bulma Pagination: 04 Indicator Alternate

HTML Preview

<nav class="pagination is-small is-centered" ...>

    <ul class="pagination-list">

      <!-- Previous Page. -->
      <li class="blog-previous"><a class="pagination-previous" ...>
          <span class="fas fa-backward"></span>&nbsp;</a></li>

      <!-- First Page. -->
      <li><a class="pagination-link" ...>1</a></li>

      <!-- Early (More Pages) Indicator. -->
      <li><span class="pagination-ellipsis">&hellip;</span></li>

      <li><a class="pagination-link" ...>3</a></li>
      <li><a class="pagination-link" ...>4</a></li>
      <li><a class="pagination-link is-current" >5</a></li>
      <li><a class="pagination-link" ...>6</a></li>
      <li><a class="pagination-link" ...>7</a></li>

      <!-- Late (More Pages) Indicator. -->
      <li><span class="pagination-ellipsis">&hellip;</span></li>

      <!-- Last Page. -->
      <li><a class="pagination-link"  ...>9</a></li>

      <!-- Next Page. -->
      <li class="blog-next"><a class="pagination-next" ...>
          &nbsp;<span class="fas fa-forward"></span></a></li>

    </ul>

</nav>

Small Animated Preview

This is the complete version.

Jekyll Pagination: Combined Animation

Or alternatively:

Jekyll Pagination: Alternative Combined Animation

Partial Liquid

We will achieve this with liquid code below:

Or

Or

{% capture spaceless %}
  {% assign total_pages = paginator.total_pages %}
  {% assign color_main  = page.color_main  | default: layout.color_main %}
{% endcapture %}

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

    <!-- Previous Page. -->
    {% if paginator.previous_page %}
      {% assign p_prev = paginator.previous_page_path
                       | prepend: site.baseurl %}
      <a class="pagination-previous hoverable"
         href="{{ p_prev }}" 
         rel="prev">&laquo;&nbsp;previous</a>
    {% else %}
      <a class="pagination-previous"
         title="This is the first page"
         disabled>&laquo;&nbsp;previous</a>
    {% endif %}

    <!-- Next Page. -->
    {% if paginator.next_page %}
      {% assign p_next = paginator.next_page_path
                       | prepend: site.baseurl %}
      <a class="pagination-next hoverable"
         href="{{ p_next }}"
         rel="next">next&nbsp;&raquo;</a>
    {% else %}
      <a class="pagination-next"
         title="This is the last page"
         disabled>next&nbsp;&raquo;</a>
    {% endif %}

    {% capture spaceless %}
      <!--
        Pagination links 
        * https://glennmccomb.com/articles/how-to-build-custom-hugo-pagination/
      -->

      <!-- Get paginate_root from page in frontmatter -->
      {% assign paginate_root = page.paginate_root %}
      {% assign p_first = paginate_root 
                        | prepend: site.baseurl %}
      {% assign p_last  = site.paginate_path
                        | relative_url 
                        | replace: ':num', total_pages %}

      {% assign page_current  = paginator.page %}

      {% assign link_offset   = 2 %}  
      {% assign link_max      = link_offset   | times: 2 | plus: 1 %}

      {% assign limit_lower   = link_offset   | plus: 1 %}
      {% assign limit_upper   = total_pages   | minus: link_offset %}
  
      {% assign min_lower     = link_max %}  
      {% assign max_upper     = total_pages   | minus: link_max %}
    
      {% assign lower_offset  = page_current  | minus: link_offset %}  
      {% assign upper_offset  = page_current  | plus: link_offset %}  

      {% assign lower_indicator = 2 %}
      {% assign upper_indicator = total_pages | minus: 1 %}

    {% endcapture %}

    <ul class="pagination-list">

    {% if total_pages > link_max %}
      <!-- First Page. -->
      {% if lower_offset > 1 %}
      <li>
        <a class="pagination-link hoverable"
           href="{{ p_first }}"
           aria-label="Goto page_cursor 1">1</a>
      </li>
      {% endif %}

      <!-- Early (More Pages) Indicator. -->
      {% if lower_offset > lower_indicator %}
      <li>
        <span class="pagination-ellipsis">&hellip;</span>
      </li>
      {% endif %}
    {% endif %}

    <!-- Page numbers. -->
    {% for page_cursor in (1..total_pages) %}

      {% capture spaceless %}
        <!-- Flag Calculation -->
        {% assign page_current_flag = false %}

        {% if total_pages > link_max %}
        <!-- Complex page_cursor numbers. -->

          <!-- Lower limit pages. -->
          <!-- If the user is on a page_cursor which is in the lower limit.  -->
          {% if page_current <= limit_lower %}
            <!-- If the current loop page_cursor is less than max_links. -->
            {% if page_cursor <= min_lower %}
              {% assign page_current_flag = true %}
            {% endif %}

          <!-- Upper limit pages. -->
          <!-- If the user is on a page_cursor which is in the upper limit. -->
          {% elsif page_current >= limit_upper %}
            <!-- If the current loop page_cursor is greater than total pages minus $max_links -->
            {% if page_cursor > max_upper %}
              {% assign page_current_flag = true %}
            {% endif %}

          <!-- Middle pages. -->
          {% else %}
          
            {% if (page_cursor >= lower_offset) and (page_cursor <= upper_offset) %}
              {% assign page_current_flag = true %}
            {% endif %}

          {% endif %}

        {% else %}
        <!-- Simple page_cursor numbers. -->

          {% assign page_current_flag = true %}
        {% endif %}
      {% endcapture %}

      <!-- Show Pager. -->
      {% if page_current_flag == true %}
      <li>
        {% if page_cursor == page_current %} 
        <a class="pagination-link is-current {{ color_main }}"
           aria-label="Page {{ page_cursor }}">
          {{ page_cursor }}
        </a>
        {% else %}

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

        <a class="pagination-link hoverable"
           href="{{ p_link }}"
           aria-label="Goto page_cursor {{ page_cursor }}">
          {{ page_cursor }}
        </a>
        {% endif %}
      </li>
      {% endif %}

    {% endfor %}

    {% if total_pages > link_max %}
      <!-- Late (More Pages) Indicator. -->
      {% if upper_offset < upper_indicator %}
      <li>
        <span class="pagination-ellipsis">&hellip;</span>
      </li>
      {% endif %}

      <!-- Last Page. -->
      {% if upper_offset < total_pages %}
      <li>
        <a class="pagination-link hoverable" 
           href="{{ p_last }}"
           aria-label="Goto page_cursor {{ total_pages }}">
          {{ total_pages }}</a>
      </li>
      {% endif %}
    {% endif %}

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

Or alternatively with pagination-v2

Explanation


What is Next?

Consider continue reading [ Jekyll Bulma - Pagination - Responsive ].

Thank you for reading.