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
-
- themes/tutor-05/layout/index.ejs
- gitlab.com/…/layout/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.
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">« </a>
<% } else { %>
<a class="pagination-previous"
title="This is the first page"
disabled>« </a>
<% } %>
</li>
<!-- Next Page. -->
<li class="blog-next">
<% if (page.next_link) { %>
<a class="pagination-next"
href="<%= url_for(page.next_link) %>"
rel="next"> »</a>
<% } else { %>
<a class="pagination-next"
title="This is the last page"
disabled> »</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">«« </a>
<% } else { %>
<a class="pagination-previous"
title="This is the first page"
disabled>«« </a>
<% } %>
</li>
<!-- Last Page. -->
<li class="last">
<% if (page.next != 0) { %>
<a class="pagination-next"
href="<%= pagination_url(page.total) %>"
rel="last"> »»</a>
<% } else { %>
<a class="pagination-next"
title="This is the last page"
disabled> »»</a>
<% } %>
</li>
Browser: Pagination Preview
Now have a look at this changes.
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:
-
- themes/tutor-05/sass/css/_pagination.scss
- gitlab.com/…/sass/_pagination.scss.
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.
-
- themes/tutor-05/sass/css/main.scss
- gitlab.com/…/sass/main.scss.
// dart-sass --watch -I sass sass/css:source/css/
...
@import "panel"
@import "blog"
@import "list"
@import "pagination"
Browser: Pagination Preview
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
5: Summary
To summarized this article, we need a complete code, and preview.
Layout: Pagination Number
-
- themes/tutor-05/layout/pagination/02-number.ejs
- gitlab.com/…/layout/pagination/02-number.ejs.
<%
/*
* 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">«« </a>
<% } else { %>
<a class="pagination-previous"
title="This is the first page"
disabled>«« </a>
<% } %>
</li>
<!-- Previous Page. -->
<li class="blog-previous">
<% if (page.prev_link) { %>
<a class="pagination-previous"
href="<%= url_for(page.prev_link) %>"
rel="prev">« </a>
<% } else { %>
<a class="pagination-previous"
title="This is the first page"
disabled>« </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"> »</a>
<% } else { %>
<a class="pagination-next"
title="This is the last page"
disabled> »</a>
<% } %>
</li>
<!-- Last Page. -->
<li class="last">
<% if (page.next != 0) { %>
<a class="pagination-next"
href="<%= pagination_url(page.total) %>"
rel="last"> »»</a>
<% } else { %>
<a class="pagination-next"
title="This is the last page"
disabled> »»</a>
<% } %>
</li>
</ul>
<% } %>
</nav>
- .
Browser: Pagination Preview
What is Next ?
Do not get confused yet. Keep calm, just like this cute kitten. Our pagination tutorial still have some materials to go.
Consider continue reading [ Hexo - Pagination - Adjacent ]. There are, some interesting topic about Pagination in Hexo.
Thank you for reading.