Preface
Goal: Knowing the limit of this pagination feature.
Remember our previous handling URL article ? For these sections to works, we need make a slight adjustment, to our summary layout.
With this we will find caveat that we need to know.
Source Code
You can download the source code of this article here.
Extract and run on CLI using $ npm install.
1: Summary Adjustment
Consider this summary layout.
Layout: EJS Post List: By Month
The javascript between the tag below <% … _%>, will be discussed separately.
-
- themes/tutor-03/layout/summary/post-list-by-month.ejs
- gitlab.com/…/layout/summary/post-list-by-month.ejs
<%
...
_%>
<%
const postsSorted = Object.keys(postsByYear).sort(date, -1);
postsSorted.forEach(function (year){
%>
<div class ="anchor-target archive-year" id="<%= year %>">
<% if (year == yearToday) {%>
This year's posts (<%= year %>)
<% } else { %>
<%= year %>
<% } %>
</div>
<div class="columns is-multiline ">
<%
const postsByMonth = groupBy(postsByYear[year], 'month');
Object.keys(postsByMonth).forEach(function (month){
%>
<div class="column is-full-mobile
is-half-tablet is-one-third-widescreen">
<section class="panel is-light">
<div class="panel-header" id="<%= year %>-<%= month %>">
<p><%= month %> <%= year %></p>
<span class="fa fa-archive"></span>
</div>
<div class="panel-body has-background-white">
<div class="archive-list archive-p3">
<% postsByMonth[month].forEach(function(post){ %>
<div class="archive-item">
<div class="is-pulled-left"><a href="<%- url_for(post.path) %>">
<%= post.title %>
</a></div>
<div class="is-pulled-right has-text-right"><time>
<%= date(post.date, "DD MMM") %>
<span class="fas fa-calendar"></span>
</time></div>
<div class="is-clearfix"></div>
</div>
<% }) %>
</div>
</div>
</section>
</div>
<% }) %>
</div>
<% }) %>
Javascript: EJS Post List: By Month
Here is the javascript:
// Data Model
// https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/reduce
function groupBy(objectArray, property) {
return objectArray.reduce(function (acc, obj) {
var key = obj[property];
if (!acc[key]) {
acc[key] = [];
}
acc[key].push(obj);
return acc;
}, {});
}
// Posts Array
const postsLayout = page.posts
// Grouped by date
const postsMapped = postsLayout.map(post => ({
...post,
year: date(post.date, "YYYY"),
month: date(post.date, "MMMM")
}));
const postsByYear = groupBy(postsMapped, 'year');
// additional
const yearToday = date(new Date(), 'YYYY');
This page use no filtering, and will without any known issue.
2: Issue on Filtering
Without Filtering
Consider have a look at this line:
const postsLayout = page.posts
We can ask the page to show only page with specific layout. But there is no way to filter this in pagination.
It means: one given pagination URL,
could show empty list without article at all,
because there is no article in that page pagination,
is using post
layout.
Content with Custom Layout
Consider make content with custom layout.
---
layout : page
title : Moody Blues - Nights in White Satin
date : 2014/03/15 07:35:05
tags : [pop, 60s]
category : [lyric]
---
Letters I've written, never meaning to send
<!-- more -->
Nights in white satin, never reaching the end,
Letters I've written, never meaning to send
Beauty I've always missed, with these eyes before
Just what the truth is, I can't say anymore
'Cause I love you
Yes, I love you
Oh, I love you
All we need to know is this custom line.
---
layout : page
---
The post does not use post
kind layout.
Filtering Issue
Consider changing the respected line:
// Filtered by layout
// Note: pagination will not be filtered.
const postsLayout = page.posts
We can ask the page to show only page with specific layout. But there is no way to filter this in pagination.
It means: one given pagination URL,
could show empty list without article at all,
because there is no article in that page pagination,
is using post
layout.
Conclusions
We need to carefully consider that, there is no way to filter post in pagination, but we can still choose to filter it inside the page.
What is Next ?
Now we are done with pagination.
Consider continue reading [ Hexo - Content - Blog Post ]. There are, some interesting topic for using Bulma in Hexo Content, such as Header, Footer, and Navigation.
Thank you for reading.