Jekyll Pagination - Summary

   
   
 jekyll  
 ssg  
Article Series

This article series contain few sections.


Obsolete Repository:
This article use obsolete repository. Please refer to below repository for a more recent articles.

Complete Repository

Where to Discuss?

Local Group

Table of Content

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

Jekyll Pagination: Simple Positioning Indicator

  • 2: Number Pagination

Jekyll Pagination: Stylesheet Before After

  • 3: Middle Pagination Only, with complex logic

Jekyll Pagination: Adjacent Animation

  • 4: Combined (Indicator and Middle Pagination)

Hugo Pagination: Combined Animation

  • 5: Responsive, using SASS

Hugo Pagination: Responsive Animation

  • 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

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:

And the blog list page will show you as below figure:

Jekyll Demo: Blog List Page

Begin The Guidance

Let’s get the tutorial started.

Consider continue reading [ Jekyll Pagination - Simple ].

Thank you for reading.