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.
Layout: EJS Index
Consider use pagination/01-simple layout, in index.ejs
-
- themes/tutor-05/layout/index.ejs
- gitlab.com/…/layout/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.
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.
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.
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:
-
- themes/tutor-05/layout/pagination/01-simple.ejs
- gitlab.com/…/layout/pagination/01-simple.ejs.
<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.
What is Next ?
Consider continue reading [ Hexo - Pagination - Number ]. There are, some interesting topic about Pagination in Hexo.
Thank you for reading.