Serum

A simple static website generator


Added Pagination Support

Monday, 4 Sep 2017 Tags: devnote serum

Support for pagination of post lists was added a few days ago! Pull the latest commit from GitHub and you will be able to use this feature. Pagination affects the list of all posts and list of each tag.

Setting Up serum.json

Pagination is controlled by serum.json file. You need to specify two new properties.

{
  ...
  "pagination": true,
  "posts_per_page": 5,
  ...
}
PropertyTypeDescription
paginationbooleanDetermines if pagination is enabled for this project. Defaults to false.
posts_per_pageintegerSpecifies the maximum number of items displayed in each page. This property is valid only if pagination is set to true. Defaults to 5.

If pagination is enabled, Serum will emit a few more HTML files like below:

site/posts/index.html      ← Identical to site/posts/page-1.html
site/posts/page-1.html
site/posts/page-2.html
...
site/posts/page-n.html

site/tags/foo/index.html   ← Identical to site/tags/foo/page-1.html
site/tags/foo/page-1.html
site/tags/foo/page-2.html
...
site/tags/foo/page-n.html
...

Preparing the Template

Once you have done configuring pagination in serum.json, you finally need to add some codes in templates/list.html.eex template so that the users can navigate between pages back and forth. Here’s a minimum example:

...
<ul>
  <%= for post <- posts do %>
    <li> ... </li>
  <% end %>
</ul>

Showing page <%= current_page %> of <%= max_page %>.<br>
<%= if prev_page do %>
  <a href="<%= prev_page %>">Newer Posts</a><br>
<% end %>
<%= if next_page do %>
  <a href="<%= next_page %>">Older Posts</a><br>
<% end %>
...

As you can see, four new variables have been introduced to support pagination.

NameTypeDescription
current_pageintegerThe number of the current page.
max_pageintegerThe number of the last page.
prev_pagestring or nilA URL pointing at the previous page. This is set to nil if the current page is the first page.
next_pagestring or nilA URL pointing at the next page. This is set to nil if the current page is the last page.

Make sure you check both prev_page and next_page for nil when displaying links to the previous/next page, or broken links will be produced in certain circumstances.