in Hugo, Web Development

Enabling reverse order display of posts in Hugo for Book theme

In an earlier post, I mentioned an issue with rendering a website built with Hugo. In the build command, I had to specify the theme. Jack Baty pointed out the theme could also be added to a configuration file (config.toml) so as not to have to enter it each time at the command line.

My next problem was that I wanted the blog post part of the Book theme to display the posts in reverse chronological order. However, it was displaying my post in the middle of the example posts, and I could not figure out what was driving the order. Jack Baty suggested looking at the template file inĀ /layouts/posts/list.html. I looked at that file in the Book theme directory, and started looking at the lists page on the Hugo documentation site. After some reading, I found an example that showed how to display content in reverse order based on the date specified within the file. I changed the third line in the file from:

{{ range sort .Paginator.Pages }}

to

{{ range .Pages.ByDate.Reverse }}

I also edited the Date field in the posts to all have the same format:

date: “2019-06-03”

Once I did that, I got the results i was looking for – hurray! It would have been nice if the theme had done this “out of the box”, but at least I figured it out.

 

Write a Comment

Comment

  1. … and based on that, I just made a copy of a theme’s list.html into my own “mod,” called it reverselist.html, and the only change is adding “.Reverse”. That sir, is fantastic.