Preface
This article series is intended for beginner, who already has knowledge about Jekyll.
Goal: Make Custom Jekyll Pagination Step By Step
I’m using Bootstrap as an example in this guidance. Of course you can use any CSS framework that you like, such as Materialize or Bulma.
Reading
You should read this, for preparation, before you begin.
About Jekyll
Jekyll is the default SSG (Static Site Generator), that is supported by github. Jekyll is not the only SSG (Static Site Generator).
Disclaimer
This is would not be the best custom pagination that you ever have.
After you learn this guidance, you understand the fundamental skill. Thus, a base for you, to make your custom pagination.
Source
I respect copyright. The code below ported from Glenn McComb. The original code is using Hugo Chroma, I have made code overhaul while porting, this Hugo Chroma to Jekyll Liquid.
But of course, the logic behind, is remain the same.
Table of Content
The table content is available as header on each tutorial. There, I present Jekyll Pagination tutorial, step by step, for beginners.
- 1: Simple Pagination
- 2: Number Pagination
- 3: Middle Pagination Only, with complex logic
- 4: Combined (Indicator and Middle Pagination)
- 5: Responsive, using SASS
- 6: Screenreader
No Preview.
This is basically just where to put sr-only class.
Running Demo
Source Code
Source code used in this tutorial, is available at this repository:
Development Config
You should have set your development config as below code:
- _config_dev.yml
url: "http://localhost:4000"
baseurl: "/demo-jekyll"
Then you can run jekyll on terminal.
% jekyll serve --config _config.yml,_config_dev.yml
Then you can preview localhost on your browser.
- http://localhost:4000/demo-jekyll/
Notice the subdirectory /demo-jekyll.
Prepare Artefact
Config
-
- _config.yaml
- gitlab.com/…/_config.yaml
paginate: 7
paginate_path: "pages/blog-:num"
Using Pagination: Blog List Page
I have already made, a ready to use blog page. You may switch from one kind of pagination to another. Each kind of pagination, will be discussed one by one. One article each.
---
layout: page
paginate_root: /pages
---
...
{% comment %}
{% include pagination/01-simple.html %}
{% include pagination/02-number.html %}
{% include pagination/03-adjacent.html %}
{% include pagination/04-indicator.html %}
{% include pagination/05-responsive.html %}
{% include pagination/06-screenreader.html %}
{% endcomment %}
{% include pagination/06-screenreader.html %}
<!-- This loops through the paginated posts -->
<section id="archive">
...
</section>
Complete code is here below:
- /pages/index.html : github.com/…/pages/index.html.
And the blog list page will show you as below figure:
Begin The Guidance
Let’s get the tutorial started.
Consider continue reading [ Jekyll Pagination - Simple ].
Thank you for reading.