Learn and Discover Open Source with Daily Genuine Experience. From Coding, Front End, Back End, Database, and Static Site Generator.
 
 


Preface

Goal: An introduction to pagination.

Pagination is a whole big topic. It is rare that common front end web based component require algorithm. This pagination takes tinking time, instead of just rely on design skill.

Table of Content

  • Preface: Table of Content

  • 1: Article Provided

  • 2: Prepare: Configuration, Theme and Content

  • 3: Layout

  • 4: Skeleton

  • 5: Math: Algebra

  • What is Next ?

Source Code

You can download the source code of this article here.

Extract and run on CLI using $ npm install.


1: Article Provided

For each step, I made different layout, and explain the deatil in separate articles. This article series start from simple pagination layout.

Step By Step

We are going to have six step to achieve this pagination.

  • Layout 01: Simple

  • Layout 02: Number

  • Layout 03: Adjacent

  • Layout 04: Indicator

  • Layout 05: Responsive

  • Layout 06: Screen Reader

This is the spoiler, of what we are going to do in this article series.

Additional

I also provide other additional article as well:

  • Introduction

  • Navigation Style (using layout 02 as example)

  • Javascript (function helper for handling URL)

  • Section

Preview

Complete Pagination

Hugo Pagination: Indicator Animation

Responsive

Hugo Pagination: Responsive Animation


2: Prepare

This preparation is required.

Configuration

We need to setup pagination settings.

# Home page setting
index_generator:
  path: '/blog'
  per_page    : 2
  order_by: -date
  
# Pagination
pagination_dir: page

For live site, I normally have 10 pages for each pagination. But for this tutorial, I only have limited number of example article. This is why I only set 2 article per page.

Theme

Since we have made a lot of changes in previous theme, consider move on to new theme.

  1. Create theme themes/tutor-05.

You can use source code above, oor from gitlab repository or, you can also copy paste from themes/tutor-04.

  1. Edit configuration _config.yml, and save.
# Extensions
theme: tutor-05

Content: Example Article

Just make sure you have enough article, to test all pagination case.

% tree source/_posts
source/_posts
├── lyrics
│   ├── barbara-streisand-the-way-we-were.md
│   ├── bon-jovi-diamond-ring.md
│   ├── darius-rucker-it-wont-be-like-this-for-long.md
│   ├── david-gates-lady-valentine.md
│   ├── dido-white-flag.md
│   ├── george-benson-moodys-mood.md
│   ├── heatwave-all-i-am.md
│   ├── moody-blues-white-satin.md
│   ├── natalie-cole-i-wish-you-love.md
│   ├── norah-jones-shoot-the-moon.md
│   └── vanessa-williams-love-is.md
├── quotes
│   ├── dead-poets-society.md
│   ├── every-day.md
│   ├── fight-club.md
│   ├── jerry-maguire.md
│   └── scott-pilgrim.md
└── white-winter.md

2 directories, 17 files

Here we have 17 articles.

Hexo: Tree Posts Content


3: Layout

Consider make a slight change, to inside layout/index.ejs.

Partial: Pagination

Since code can be complex, it is better to put, the pagination as partial, somewhere else.

  <section class="section">
    <%- partial('pagination/01-simple') %>
  </section>

Layout: EJS Index

The complete code is as below.

  • themes/tutor-05/layout/index.ejs
    [gitlab.com/…/layout/index.ejs][tutor-layout-index]
<main role="main" 
      class="column is-full box-deco has-background-white">
  <section class="section">
    <h1 class="title is-4"><%= config.author %></h1>
    <h2 class="subtitle is-4"><%= config.subtitle %></h2>
  </section>

  <section class="section">
    <%- partial('pagination/01-simple') %>
  </section>
  
  <br/>

  <div class="post-list">
  <% page.posts.each(function(post){ %>
    <section class="section" id="archive">
      <%- partial('summary/blog-item', {post: post}) %>
    </section>
  <% }) %>
  </div>

</main>

All Pagination Options

Since we are going to have six steps, we may switch the layout often, so we need a way to copy-and-paste easily. Here below, is the pagination. You should only select one of them.

        partial('pagination/01-simple')
        partial('pagination/02-number')
        partial('pagination/03-adjacent')
        partial('pagination/04-indicator')
        partial('pagination/05-responsive')
        partial('pagination/06-screenreader')

4: Skeleton

This part is the most basic part, and would be used in each layout for each step.

Layout: EJS Pagination Code

The skeleton is similar as below:

<!-- helper function -->
<!-- variable initialization -->
<nav class="pagination is-small is-centered" 
     role="navigation"
     aria-label="pagination">

    <ul class="pagination-list">
      <!-- left  navigation code -->
      <!-- middle numbering code -->
      <!-- right navigation code -->
    </ul>

  <% } %>
</nav>

Navigation code contain buttons such as:

  • Left Pagination: First

  • Left Pagination: Previous

  • Right Pagination: Next

  • Right Pagination: Last

While numbering code is in the middle

  • Middle Pagination: Numbering

Notice that, you may easily change the position. For example, put the middle pagination on right side, instead of in the middle. So alternatively you can switch to:

<!-- helper function -->
<!-- variable initialization -->
<nav class="pagination is-small is-centered" 
     role="navigation"
     aria-label="pagination">

    <!-- navigation code -->

    <ul class="pagination-list">
      <!-- numbering code -->
    </ul>

  <% } %>
</nav>

Minimal Logic

The pagination would only be shown, if there is more than one pagination page. No need to show any pagination navigation, if we what we have is only one page. Hence our minimal pagination logic would be:

<nav ...>
  <% if (page.total > 1) { %>
    ...
    <!-- pagination code -->

  <% } %>
</nav>

Of course this is not enough. Our minimal pagination should show something.

Loop

The loop for each pagination, is simply as below:

    <% 
  var cursor; 
  for (cursor = 1; cursor <= page.total; cursor++) { 
    ...
    <% } %>

I'm using the term cursor.


5: Math: Algebra

Assumption

Consider an example, this blog post that contain seventeen posts.

# CONST

Total Post   = 17
Per Page     = 2

# COMPUTED

page.total   = 9

Equation

And change the number of page for each pagination, by number for example: 2, 3, 5, 10, and 20.

# Home page setting
index_generator:
  per_page    : 2

Restart the server everytime you change the config.

$ hexo server -p 4000 --debug

Table

Do not worry! page.total do the math internally in Hexo.

We can also achieve page.total by ceiling division. And the result is on this table below.

# ALGEBRA

+-------------+-------+-------+-------+-------+-------+
| pagination  |   2   |   3   |   5   |  10   |  20   |
+-------------+-------+-------+-------+-------+-------+
| VARIABLE                                            |
| division    |  8.5  |  5.7  |  3.4  |  1.7  |  0.85 |
| page.total  |   9   |   6   |   4   |   2   |  N/A  |
+-------------+-------+-------+-------+-------+-------+

Of course, we do not need to show any pagination, if there is only one page for all result. That is why we can optionally, convert 1 into N/A.


What is Next ?

Now we are ready to begin this pagination journey.

Consider continue reading [ Hexo - Pagination - Simple ]. There are, some interesting topic about Pagination in Hexo.

Thank you for reading.