Where to Discuss?

Local Group

Preface

Goal: Add Navigation to pagination, combine with simple numbering.

Source Code

You can download the source code of this article here.

Extract and run on CLI using $ npm install.


1: Prepare

We are still using layout named pagination/02-number, in our previous index.ejs

Layout: EJS Index

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


2: Navigation: Previous and Next

Consider give it a prev next button.

Bulma Pagination

We can utilize example from Bulma official documentation. Which has a very nice looks.

<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="<%= pagination_url(1) %>" 
         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>
    <% } %>

    <!-- 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) { %>
      <a class="pagination-next"
         href="<%= pagination_url(page.total) %>" 
         rel="last">Last</a>
    <% } else { %>
      <a class="pagination-next"
         title="This is the last page"
         disabled>Last</a>
    <% } %>

  <% } %>
</nav>

Browser: Pagination Preview

Which shown nice pagination.

Hexo Pagination: Stylesheet Before After

Inline Navigation: Previous and Next

Alternatively you can wrap them all inside ul li tags.

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

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

Inline Navigation: First Last

With the same method, put them all inside ul li tags.

      <!-- First Page. -->
      <li class="first">
      <% if (page.prev != 0) { %>
        <a class="pagination-previous"
           href="<%= pagination_url(1) %>" 
           rel="first">&laquo;&laquo;&nbsp;</a>
      <% } else { %>
        <a class="pagination-previous"
           title="This is the first page"
           disabled>&laquo;&laquo;&nbsp;</a>
      <% } %>
      </li>

      <!-- Last Page. -->
      <li class="last">
      <% if (page.next != 0) { %>
        <a class="pagination-next"
           href="<%= pagination_url(page.total) %>" 
           rel="last">&nbsp;&raquo;&raquo;</a>
      <% } else { %>
        <a class="pagination-next"
           title="This is the last page"
           disabled>&nbsp;&raquo;&raquo;</a>
      <% } %>
      </li>

Browser: Pagination Preview

Now have a look at this changes.

Hexo Pagination: Symbol Previous Next

The choice between the two method is up to you. You can even have both, functionality and nice looks.

Changes

That code above is using:

  • symbol « instead of previous word.

  • symbol » instead of next word.

Notice that, we also have additional stylesheet named

  • blog_previous, and blog_next,

  • first, and last.


3: Stylesheet: Before and After

Consider define these pagination classes:

li.blog-previous a:after
  content: " previous"
li.blog-next a:before
  content: "next "

ul.pagination-list
  li.first,
  li.last
    display: none

And add the new scss in main file.

// dart-sass --watch -I sass sass/css:source/css/

...

@import "panel"
@import "blog"
@import "list"
@import "pagination"

Browser: Pagination Preview

Hexo Pagination: Stylesheet Before After


4: Stylesheet: Responsive

Pure CSS

Yes you can do this, and I already make a different article for this.

Bulma Mixins

By the help of mixins/breakpoints, we can write it in bulma style.

+tablet
  li.blog-previous a:after
    content: " previous"
  li.blog-next a:before
    content: "next "

ul.pagination-list
  li.first,
  li.last
    display: none
  +from($tablet)
    li.first,
    li.last
      display: inline-block

Browser: Pagination Preview

Hexo Pagination: Stylesheet Responsive


5: Summary

To summarized this article, we need a complete code, and preview.

Layout: Pagination Number

<%
/*
* Helper function
*/

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);
}
%>
<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="<%= pagination_url(1) %>" 
         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>
    <% } %>

    <!-- 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) { %>
      <a class="pagination-next"
         href="<%= pagination_url(page.total) %>" 
         rel="last">Last</a>
    <% } else { %>
      <a class="pagination-next"
         title="This is the last page"
         disabled>Last</a>
    <% } %>

    <!-- Main Pagination List -->
    <ul class="pagination-list">

      <!-- First Page. -->
      <li class="first">
      <% if (page.prev != 0) { %>
        <a class="pagination-previous"
           href="<%= pagination_url(1) %>" 
           rel="first">&laquo;&laquo;&nbsp;</a>
      <% } else { %>
        <a class="pagination-previous"
           title="This is the first page"
           disabled>&laquo;&laquo;&nbsp;</a>
      <% } %>
      </li>

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

      <!-- 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>
      <% } %>

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

      <!-- Last Page. -->
      <li class="last">
      <% if (page.next != 0) { %>
        <a class="pagination-next"
           href="<%= pagination_url(page.total) %>" 
           rel="last">&nbsp;&raquo;&raquo;</a>
      <% } else { %>
        <a class="pagination-next"
           title="This is the last page"
           disabled>&nbsp;&raquo;&raquo;</a>
      <% } %>
      </li>

    </ul>
  <% } %>
</nav>
  • .

Browser: Pagination Preview

Hexo Pagination: Stylesheet Combined


What is Next ?

Do not get confused yet. Keep calm, just like this cute kitten. Our pagination tutorial still have some materials to go.

adorable kitten

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

Thank you for reading.