ssg  
Where to Discuss?

Local Group

Preface

Goal: Pagination using Number.

Source Code

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


1: Prepare

Layout: Nunjucks Blog

Consider use pagination/02-number partial, in blog.njk.

  {% include "pagination/02-number.njk" %}

2: Preview: General

This is what we want to achieve in this tutorial.

11ty Pagination: Number Pagination without Navigation

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>

We will achieve this with eleventy code.


3: Navigation: Number

Pagination by number is also simple.

Partial: Pagination Number

{% set totalPages = pagination.links.length %}
{% set current    = pagination.pageNumber + 1 %}

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

    <ul class="pagination-list">
    <!-- Page numbers. -->
    {% for cursor, link in pagination.links | hashIt %}
      <li>
      {% if cursor != current  %}
        <a class="pagination-link hoverable"
           href="{{ link }}"
           aria-label="Goto page {{ cursor }}">
          {{ cursor }}
        </a>
       {% else %}
       <a class="pagination-link is-current {{ color }}" 
           aria-label="Page {{ cursor }}">
          {{ cursor }}
        </a>
 
      {% endif %}
      </li>
    {% endfor %}
    </ul>

</nav>
{% endif %}

Browser: Pagination Preview

11ty Pagination: Number List

How does it works ?

Just a simple loop:

    {% for cursor, link in pagination.links | hashIt %}
      ...
    {% endfor %}

And simple conditional:

{% set current    = pagination.pageNumber + 1 %}
...

      {% if cursor != current  %}
        <a class="pagination-link hoverable"
           href="{{ link }}">
          {{ cursor }}
        </a>
       {% else %}
       <a class="pagination-link is-current {{ color }}">
          {{ cursor }}
        </a> 
      {% endif %}

There is, no href link for current page.


What is Next ?

Consider continue reading [ Eleventy - Pagination - Navigation ]. Addtionally, we can decorate pagination number, with specific navigation class using Bulma.

Thank you for reading.