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