The Paginator Navigation include file provides a simple and accessible way to navigate paginated content within a Jekyll site. It dynamically generates pagination links for previous and next pages, as well as numbered navigation between multiple pages.
To use this include in your Jekyll theme, add the following line to your template:
{% include paginator_nav.html %}
You must also have pagination
installed.
This include can be customized by passing in the following optional parameters:
Parameter | Default | Description |
---|---|---|
paginate_path |
site.paginate_path |
Defines the pagination URL pattern (e.g., "/blog/page/:num" ). |
previous_page_path |
paginator.previous_page_path |
The URL for the previous page in the pagination sequence. |
next_page_path |
paginator.next_page_path |
The URL for the next page in the pagination sequence. |
This allows it to work with jekyll-category-pages
{% include paginator_nav.html paginate_path="/blog/page/:num" previous_page_path=paginator.previous_page_path next_page_path=paginator.next_page_path %}
When used in a paginated blog, the output might look like this:
<div class="paginate-container">
<div role="navigation" aria-label="Pagination" class="d-flex d-md-inline-block pagination">
<a class="previous_page" rel="prev" href="/blog/page/2/" aria-disabled="false">Previous</a>
<a href="/blog/" aria-label="1">1</a>
<a href="/blog/page/2/" aria-label="2">2</a>
<a href="/blog/page/3/" aria-label="3">3</a>
<a class="next_page" rel="next" href="/blog/page/2/" aria-disabled="false">Next</a>
</div>
</div>
paginator.total_pages
check ensures pagination is only displayed when necessary./page/1/
for cleaner URLs.jekyll-paginate
or jekyll-paginate-v2
).