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


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.

Table of Content

  • Preface: Table of Content

  • 1: Pagination URL in Hexo

  • 2: URL Helper

  • 3: Multiple Section

  • 4: Applying Pagination in Sections

  • What is Next ?

Source Code

You can download the source code of this article here.

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.

# 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:

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

instead of

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

We have this result:

  • //blog/page/2/

Which lead to

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:

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.

# 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

<% 
  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.

Hexo: Browser Section Archive

.

Layout: EJS Category

<% 
  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.

Hexo: Browser Section Category

.

Layout: EJS Tag

<% 
  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.

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.

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.