Preface
Goal: A Simple Pagination.
Every journey start with a single step.
Source Code
This article use tutor-07 theme. We will create it step by step.
1: Preview: General
This is what we want to achieve in this tutorial.
Layout: Nunjucks Blog
Consider use pagination/01-simple partial, in blog.njk.
{% include "pagination/01-simple.njk" %}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>We will achieve this with eleventy code.
2: Navigation: Previous and Next
{% 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">
<!-- Previous Page. -->
{% if pagination.previousPageLink %}
<a class="pagination-previous hoverable"
href="{{ pagination.previousPageLink }}"
rel="prev">Previous</a>
{% else %}
<a class="pagination-previous"
title="This is the first page"
disabled>Previous</a>
{% endif %}
<!-- Next Page. -->
{% if pagination.nextPageLink %}
<a class="pagination-next hoverable"
href="{{ pagination.nextPageLink }}"
rel="next">Next</a>
{% else %}
<a class="pagination-next"
title="This is the last page"
disabled>Next</a>
{% endif %}
</nav>
{% endif %}Browser: Pagination Preview
Examine any page in blog section.
How does it works ?
This code above rely on
-
Previous Page:
pagination.previousPageLink, and -
Next Page:
pagination.nextPageLink.
This should be self explanatory.
Stylesheet: Bulma Class
Bulma specific class are these below
-
ul:
pagination -
a:
pagination-previous,pagination-next -
a:
disabled
Bulma doesn’t put all pagination class in ul li.
3: Navigation: First and Last
Consider also add first page and last page.
{% 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">
<!-- First Page. -->
{% if current > 1 %}
<a class="pagination-previous hoverable"
href="{{ pagination.firstPageLink }}"
rel="first">First</a>
{% else %}
<a class="pagination-previous"
title="This is the first page"
disabled>First</a>
{% endif %}
<!-- Last Page. -->
{% if current != totalPages %}
<a class="pagination-next hoverable"
href="{{ pagination.lastPageLink }}"
rel="last">Last</a>
{% else %}
<a class="pagination-next"
title="This is the last page"
disabled>Last</a>
{% endif %}
</nav>
{% endif %}Browser: Pagination Preview
Examine any page in blog section.
How does it works ?
Eleventy does not have a special method,
to show first page and last page,
so we must rely on our logic.
{% set totalPages = pagination.links.length %}
{% set current = pagination.pageNumber + 1 %}-
First Page:
{% if current > 1 %}. -
Last Page:
{% if current != totalPages %}.
This code above rely on
-
First Page:
pagination.firstPageLink, and -
Last Page:
pagination.lastPageLink.
4: Active Page Indicator
And also the pagination positioning in between, in the middle of those.
{% 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">
<!-- Indicator Number. -->
<a class="pagination-link"
disabled>Page: {{ current }} of {{ totalPages }}</a>
</nav>
{% endif %}Browser: Pagination Preview
Examine any page in blog section.
How does it works ?
This just show:
Page: {{ current }} of {{ totalPages }}5: Dummy List
All above are pagination indicators.
We will use number later using ul li structure.
We can put it here, just in case we want to add number something later.
<!-- Dummy. Do not delete! -->
<ul class="pagination-list">
</ul>6: Summary
Complete code is here below:
{% 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">
<!-- First Page. -->
{% if current > 1 %}
<a class="pagination-previous hoverable"
href="{{ pagination.firstPageLink }}"
rel="first">First</a>
{% else %}
<a class="pagination-previous"
title="This is the first page"
disabled>First</a>
{% endif %}
<!-- Previous Page. -->
{% if pagination.previousPageLink %}
<a class="pagination-previous hoverable"
href="{{ pagination.previousPageLink }}"
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: {{ current }} of {{ totalPages }}</a>
<!-- Next Page. -->
{% if pagination.nextPageLink %}
<a class="pagination-next hoverable"
href="{{ pagination.nextPageLink }}"
rel="next">Next</a>
{% else %}
<a class="pagination-next"
title="This is the last page"
disabled>Next</a>
{% endif %}
<!-- Last Page. -->
{% if current != totalPages %}
<a class="pagination-next hoverable"
href="{{ pagination.lastPageLink }}"
rel="last">Last</a>
{% else %}
<a class="pagination-next"
title="This is the last page"
disabled>Last</a>
{% endif %}
<!-- Dummy. Do not delete! -->
<ul class="pagination-list">
</ul>
</nav>
{% endif %}Browser: Pagination Preview
Examine any page in blog section.
What is Next ?
Consider continue reading [ Eleventy - Pagination - Number ]. We should move on to pagination number.
Thank you for reading.