Hexo - Pagination - Number

   
   
 hexo  navigation  bulma  sass  
 ssg  frontend  
Article Series

This article series contain few sections.

Related Article Series

Download Tutorial Source.

Where to Discuss?

Local Group

Table of Content

Preface

Goal: Pagination using Number.

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

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.