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


Preface

Goal: Pagination using Number.

Table of Content

  • Preface: Table of Content

  • 1: Prepare

  • 2: Preview: General

  • 3: Navigation: Number

  • What is Next ?

Source Code

You can download the source code of this article here.

Extract and run on CLI using $ npm install.


1: Prepare

Consider use a new layout named pagination/02-number, in our previous index.ejs

Layout: EJS Index

Consider use pagination/02-number layout, in index.ejs


2: Preview: General

This is what we want to achieve in this tutorial.

![Hexo Pagination: Stylesheet Combined][image-ss-05-combined]

HTML Preview

The HTML that we want to achieve in this article, is similar as below.

    <ul class="pagination-list">
      <!-- Page numbers. -->

      <li>
        <a href="/blog" class="pagination-link"
           aria-label="Goto page 1">1</a>
      </li>

      <li>
        <a href="/blog/page/2" class="pagination-link"
           aria-label="Goto page 2">2</a>
      </li>

      ...

      <li>
        <a href="/blog/page/8" class="pagination-link"
           aria-label="Goto page 8">8</a>
      </li>

      <li>
        <a class="pagination-link is-current" 
           aria-label="Page 9">9</a>
      </li>

    </ul>

We will achieve this with Hexo code.


3: Navigation: Number

Pagination by number is also simple.

Pagination URL

The URL that we ant to achieve is as below

  • localhost:4000/blog/page/:number

To achieve this URL, all you need to do is put in a href.

<a href="<%= url_for(config.index_generator.path + '/' + config.pagination_dir + '/' + number) %>
  <%= numberr %>
</a>"

Javascript: Pagination URL

To make a clean code, consider to separate the javascript code, outside the html code.

function pagination_url(number) {
  var path = config.index_generator.path;
  
  // dirty quick fix, avoid double (//)
  if (path=='/') { path = '' }

  if (number>1) {
      path = path + '/' + config.pagination_dir + '/' + number;
  }

  return url_for(path);
}

Just remember our last configuration.

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

Now we can call it with:

<a href="<%= pagination_url(number) %>">
  <%= number %>
</a>

Layout: Pagination Number

<%
  ...
%>
<nav class="pagination is-small is-centered" 
     role="navigation" aria-label="pagination">
  <% if (page.total > 1) { %>

    <!-- Main Pagination List -->
    <ul class="pagination-list">
      <!-- Page numbers. -->
      <% var cursor; 
         for (cursor = 1; cursor <= page.total; cursor++) { %>
      <li>
        <% if (page.current != cursor) { %>
        <a href="<%= pagination_url(cursor) %>"
           class="pagination-link"
           aria-label="Goto page <%= cursor %>">
          <%= cursor %>
        </a>
        <% } else { %>
        <a class="pagination-link is-current" 
           aria-label="Page <%= page.current %>">
          <%= page.current %>
        </a>
        <% } %>
      </li>
      <% } %>
    </ul>
  <% } %>
</nav>

Browser: Pagination Preview

Hexo Pagination: Number List

How does it works ?

Just a simple loop:

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

And simple conditional:

        <% if (page.current != cursor) { %>
          <a href="<%= pagination_url(cursor) %>"><%= cursor %></a>
        <% } else { %>
          <a><%= cursor %></a>
        <% } %>

No href link for current page.


What is Next ?

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

Thank you for reading.