Hexo - Pagination - Handling URL

This article series contain few sections.

Preface

Goal: Handling URL using Embedded Javascript (EJS).

I like EJS. Compared to other templating, With EJS, we can also achieve clean code, separating variable initialization from the template.

Source Code

You can download the source code of this article here.

hexo-ejs-bulma-tutor-05.zip

Extract and run on CLI using $ npm install.

1: Pagination URL in Hexo

Pagination URL in Hexo, depend on the confguration settings.

Configuration

Consider remind the configuration.

_config.yml

gitlab.com/…/_config.yml

# URL
url           : http://example/

# root: /child/
root          : /

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

Restart the server everytime you change the config.

$ hexo server -p 4000 --debug

Root URL

With this setting we have the root pagination as:

http://localhost:4000/blog/

Pagination URL

And consecutively

And so on.

Issue

My first attempt is to write the pagination, uising hexo helper url_for as below:

<a href="<%= url_for(config.pagination_dir + '/' + cursor) %>">
  <%= cursor %>
</a>

But it gave me this url

http://localhost:4000/blog/page/2/

instead of

http://localhost:4000/blog/

So here it is, the pagination_url helper. Now we can rewrite as:

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

Later the function grown become longer and longer. We can change the helper, without messing with HTML view.

URL Helper

We need a helper for pagination. Consider give the function a meaningful name, such as pagination_url().

Using The Helper

Simply put the number as an argument.

      <!-- Page numbers. -->
      <% var cursor; 
         for (cursor = 1; cursor <= page.total; cursor++) { %>
      <li>
        ...
        <a href="<%= pagination_url(cursor) %>"
           class="pagination-link"
           aria-label="Goto page <%= cursor %>">
          <%= cursor %>
        </a>
        ...
      </li>
      <% } %>

Simple Helper

To have the right url, I must exclude root pagination.

function pagination_url(number) {
  var path = config.index_generator.path;

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

  return url_for(path);
}

Double Slash Issue

Later I fond that Hexo url_for(), will treat double slash as file protocol. Consider this configuration:

# Home page setting
index_generator:
  path: '/'

Instead of having this url

http://localhost:4000/blog/page/2/

We have this result:

//blog/page/2/

Which lead to

file:////blog/page/2

That is why we need to fix this by this code below:

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);
}

3: Multiple Section

Pagination in Hexo can be used in different layout.

Supported Sections

There are sections, that we can put pagination inside it:

Index: http://localhost:4000/blog/
Archives (root): http://localhost:4000/archives/
Archives (year): http://localhost:4000/archives/2018/
Archives (month): http://localhost:4000/archives/2018/09/
Tags: http://localhost:4000/tags/pop/
Categories: http://localhost:4000/categories/lyric/

Complex Helper

function pagination_url(number) {
  var path;

  // default for index
  var path = config.index_generator.path;
  
  // dirty quick fix, avoid double (//)
  if (path=='/') { path = '' }
  
  if (is_archive()){
    path = '/' + config.archive_dir;

    if (is_month()){
      // trailing zero
      var month = ( page.month < 10 ? '0' + page.month : page.month );
      path += '/' + page.year + '/' + month;
    } else if (is_year()){
      path += '/' + page.year;
    }
  } else if (is_category()){
    path = '/' + config.category_dir + '/' + page.category;
  } else if (is_tag()){
    path = '/' + config.tag_dir + '/' + page.tag;
  }

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

  return url_for(path);
}

4: Applying Pagination in Sections

Changing embedded javascript helper is not enough. We still have to put pagination in each sections.

Configuration

Normally I use per_page: 10 in configuration.

_config.yml

gitlab.com/…/_config.yml

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

For testing the pagination, with only small amount of articles, I prefer as lowest number as possible.

# Pagination
pagination_dir: page
per_page      : 1

Restart the server everytime you change the config.

$ hexo server -p 4000 --debug

Now we can use them for

Archive section page,
Category section page, and
Tag section page.

Consider have a look at difference for each screen size.

Layout: EJS Archive

themes/tutor-05/layout/archive.ejs

gitlab.com/…/layout/archive.ejs

<% 
  var section_title = __('archive');

  if (is_month()){
    section_title += ': ' + page.year + '/' + page.month;
  } else if (is_year()){
    section_title += ': ' + page.year;
  }
%>
<main role="main" 
      class="column is-full box-deco has-background-white">
  <section class="section">
    <h4 class="title is-4"><%= section_title %></h4>
  </section>

  <section class="section">
    <%- partial('pagination/06-screenreader') %>
  </section>

  <section class="section" id="archive">  
    <%- partial('summary/post-list-by-month') %>
  </section>
</main>

Open in your favorite browser.

http://localhost:4000/archives/2018/09/page/2/

Hexo: Browser Section Archive

Layout: EJS Category

themes/tutor-05/layout/category.ejs

gitlab.com/…/layout/category.ejs

<% 
  var section_title = __('category') + ': ' + page.category;
%>
<main role="main" 
      class="column is-full box-deco has-background-white">
  <section class="section">
    <h4 class="title is-4"><%= section_title %></h4>
  </section>

  <section class="section">
    <%- partial('pagination/06-screenreader') %>
  </section>

  <section class="section" id="archive">  
    <%- partial('summary/post-list-by-month') %>
  </section>
</main>

Open in your favorite browser.

http://localhost:4000/categories/lyric/page/2/

Hexo: Browser Section Category

Layout: EJS Tag

themes/tutor-05/layout/tag.ejs

gitlab.com/…/layout/tag.ejs

<% 
  var section_title = __('tag') + ': ' + page.tag;
%>
<main role="main" 
      class="column is-full box-deco has-background-white">
  <section class="section">
    <h4 class="title is-4"><%= section_title %></h4>
  </section>

  <section class="section">
    <%- partial('pagination/06-screenreader') %>
  </section>

  <section class="section" id="archive">  
    <%- partial('summary/post-list-by-month') %>
  </section>
</main>

Open in your favorite browser.

http://localhost:4000/tags/pop/page/2/

Hexo: Browser Section Tag

Layout: EJS Post List: By Month

For these sections to works, we need make a slight adjustment, to our summary layout.

themes/tutor-03/layout/summary/post-list-by-month.ejs

gitlab.com/…/layout/summary/post-list-by-month.ejs

It is a long source code. No need to put it here. But if you desire, there is another article for this.

What is Next ?

Consider continue reading [ Hexo - Pagination - Filtering Caveat ]. There are still, one interesting topic about Pagination in Hexo.

Thank you for reading.