Where to Discuss?

Local Group

Preface

Goal: A Simple Pagination.

Every journey start with a single step.

Source Code

You can download the source code of this article here.

Extract and run on CLI using $ npm install.


1: Preview: General

This is what we want to achieve in this tutorial.

Hexo Pagination: Simple Positioning Indicator

Layout: EJS Index

Consider use pagination/01-simple layout, in index.ejs

HTML Preview

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

<nav class="pagination is-small is-centered"
     role="navigation" 
     aria-label="pagination">

    <!-- First Page. -->   
      <a class="pagination-previous" 
         href="/blog"
         rel="first">First</a>

    <!-- Previous Page. -->
      <a class="pagination-previous" 
         href="/blog/page/8/"
         rel="prev">Previous</a>

    <!-- Indicator Number. -->
    <a class="pagination-link"
       disabled="">Page: 9 of 9</a>

    <!-- Next Page. -->
      <a class="pagination-next" 
         title="This is the last page"
         disabled="">Next</a>

    <!-- Last Page. -->
      <a class="pagination-next" 
         title="This is the last page"
         disabled="">Last</a>

    <!-- Dummy. Do not delete! -->
    <ul class="pagination-list">
    </ul>

</nav>

We will achieve this with Hexo code.


2: Navigation: Previous and Next

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

    <!-- Previous Page. -->
    <% if (page.prev_link) { %>
      <a class="pagination-previous"
         href="<%= url_for(page.prev_link) %>" 
         rel="prev">Previous</a>
    <% } else { %>
      <a class="pagination-previous"
         title="This is the first page"
         disabled>Previous</a>
    <% } %>

    <!-- Next Page. -->
    <% if (page.next_link) { %>
      <a class="pagination-next"
         href="<%= url_for(page.next_link) %>" 
         rel="next">Next</a>
    <% } else { %>
      <a class="pagination-next"
         title="This is the last page"
         disabled>Next</a>
    <% } %>

  <% } %>
</nav>

Browser: Pagination Preview

Examine any page in blog section.

Hexo Pagination: Simple Previous Next

How does it works ?

This code above rely on

  • Previous Page: page.prev_link, and

  • Next Page: page.next_link.

This should be self explanatory.

Stylesheet: Bulma Class

Bulma specific class are these below

  • ul: pagination

  • a: pagination-previous, pagination-next

  • a: disabled

Bulma doesn’t put all pagination class in ul li.


3: Navigation: First and Last

Consider also add first page and last page.

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

    <!-- First Page. -->
    <% if (page.prev != 0) { %>
      <a class="pagination-previous"
         href="<%= url_for(config.index_generator.path) %>" 
         rel="first">First</a>
    <% } else { %>
      <a class="pagination-previous"
         title="This is the first page"
         disabled>First</a>
    <% } %>

    <!-- Last Page. -->
    <% if (page.next != 0) { %>
    <%
        var lastPage = config.index_generator.path + 
                 '/' + config.pagination_dir + 
                 '/' + page.total;
    %>
      <a class="pagination-next"
         href="<%= url_for(lastPage) %>" 
         rel="last">Last</a>
    <% } else { %>
      <a class="pagination-next"
         title="This is the last page"
         disabled>Last</a>
    <% } %>

  <% } %>
</nav>

Browser: Pagination Preview

Examine any page in blog section.

Hexo Pagination: Simple First Last

How does it works ?

Hexo has a special method, to show first page and last page:

  • First Page: page.prev != 0.

  • Last Page: page.next != 0.

Javascript: Pagination URL

Noticee this javascript below:

        var lastPage = config.index_generator.path + 
                 '/' + config.pagination_dir + 
                 '/' + page.total;

Later, we are going to make a clean code, by separating the javascript code, outside the html code.


4: Active Page Indicator

And also the pagination positioning in between, in the middle of those.

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

    <!-- Indicator Number. -->
    <a class="pagination-link" 
       disabled>Page: <%= page.current %> of <%= page.total %></a>

  <% } %>
</nav>

Browser: Pagination Preview

Examine any page in blog section.

Hexo Pagination: Simple Positioning Indicator

How does it works ?

This just show:

Page: <%= page.current %> of <%= page.total %>

5: Dummy List

All above are pagination indicators. We will use number later using ul li structure. We can put it here, just in case we want to add number something later.

    <!-- Dummy. Do not delete! -->
    <ul class="pagination-list">
    </ul>

6: Summary

Complete code is here below:

<nav class="pagination is-small is-centered" 
     role="navigation" aria-label="pagination">
  <% if (page.total > 1) { %>
    <!-- First Page. -->
    <% if (page.prev != 0) { %>
      <a class="pagination-previous"
         href="<%= url_for(config.index_generator.path) %>" 
         rel="first">First</a>
        <% } else { %>
      <a class="pagination-previous"
         title="This is the first page"
         disabled>First</a>
    <% } %>

    <!-- Previous Page. -->
    <% if (page.prev_link) { %>
      <a class="pagination-previous"
         href="<%= url_for(page.prev_link) %>" 
         rel="prev">Previous</a>
    <% } else { %>
      <a class="pagination-previous"
         title="This is the first page"
         disabled>Previous</a>
    <% } %>

    <!-- Indicator Number. -->
    <a class="pagination-link" 
       disabled>Page: <%= page.current %> of <%= page.total %></a>

    <!-- Next Page. -->
    <% if (page.next_link) { %>
      <a class="pagination-next"
         href="<%= url_for(page.next_link) %>" 
         rel="next">Next</a>
    <% } else { %>
      <a class="pagination-next"
         title="This is the last page"
         disabled>Next</a>
    <% } %>

    <!-- Last Page. -->
    <% if (page.next != 0) { %>
    <%
        var lastPage = config.index_generator.path + 
                 '/' + config.pagination_dir + 
                 '/' + page.total;
    %>
      <a class="pagination-next"
         href="<%= url_for(lastPage) %>" 
         rel="last">Last</a>
    <% } else { %>
      <a class="pagination-next"
         title="This is the last page"
         disabled>Last</a>
    <% } %>

    <!-- Dummy. Do not delete! -->
    <ul class="pagination-list">
    </ul>

  <% } %>
</nav>

Browser: Pagination Preview

Examine any page in blog section.

Hexo Pagination: Simple All Indicators Combined


What is Next ?

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

Thank you for reading.