UPDATE
The date comparison logic in this post has a subtle flaw. It was addressed and corrected in a later post.
Introduction
This project is built with Hugo and uses the Minimal Hugo theme.
This post is part of an ongoing effort to tailor the theme over time.
Objective
In this post we’ll add a last modified date to post list pages in Hugo.
In a previous post we added a last modified date to post pages, now we’ll reflect that information on list pages as well.
Building the solution
Since the information already exists on each post page, we just need to update the list layout to display it.
In this project the list.html layout file references the list-item.html partial layout file located in the /layouts/partials/ directory, so we’ll make our modifications in that latter file.
We’ll approach this in three steps:
- Restructing the page.
- Adding the new date logic.
- Removing the old date logic.
Restructure the list layout for readability
To make the list-item.html partial layout file easier to understand, we’ll first restructure it by grouping the logic for the Title and Date sections:
<div class="item">
<!-- TITLE SECTION -->
<!-- {{ $.Scratch.Set "link" .RelPermalink }}
{{ with .Params.repo }}
{{ $repoHost := default "github" $.Params.repoHost }}
{{ if eq "github" $repoHost }}
{{ printf "https://github.com/%s/%s/" $.Site.Params.githubUsername . | $.Scratch.Set "link" }}
{{ else if eq "gitlab" $repoHost }}
{{ printf "https://gitlab.com/%s/%s/" $.Site.Params.gitlabUsername . | $.Scratch.Set "link" }}
{{ else if eq "bitbucket" $repoHost }}
{{ printf "https://bitbucket.org/%s/%s/" $.Site.Params.bitbucketUsername . | $.Scratch.Set "link" }}
{{ end }}
{{ end }}
{{ with .Params.link }} {{ $.Scratch.Set "link" . }} {{ end }} -->
<h4><a href="{{ .Scratch.Get "link" }}">{{ .Title }}</a></h4>
<!-- DATE SECTION -->
<!-- ORIGINAL DATE LOGIC -->
{{ .Date.Format (.Site.Params.dateFormat | default "2006 January 02") | $.Scratch.Set "subheader" }}
{{ with .Description }} {{ $.Scratch.Set "subheader" . }} {{ end }}
<h5>{{ $.Scratch.Get "subheader" }}</h5>
</div>
Add updated date logic
Next, we’ll add the new date logic.
This logic was developed in the previous example for the post-date.html partial layout file and requires only minor adaptation for use here.
<div class="item">
<!-- TITLE SECTION -->
<!-- {{ $.Scratch.Set "link" .RelPermalink }}
{{ with .Params.repo }}
{{ $repoHost := default "github" $.Params.repoHost }}
{{ if eq "github" $repoHost }}
{{ printf "https://github.com/%s/%s/" $.Site.Params.githubUsername . | $.Scratch.Set "link" }}
{{ else if eq "gitlab" $repoHost }}
{{ printf "https://gitlab.com/%s/%s/" $.Site.Params.gitlabUsername . | $.Scratch.Set "link" }}
{{ else if eq "bitbucket" $repoHost }}
{{ printf "https://bitbucket.org/%s/%s/" $.Site.Params.bitbucketUsername . | $.Scratch.Set "link" }}
{{ end }}
{{ end }}
{{ with .Params.link }} {{ $.Scratch.Set "link" . }} {{ end }} -->
<h4><a href="{{ .Scratch.Get "link" }}">{{ .Title }}</a></h4>
<!-- DATE SECTION -->
<!-- ORIGINAL DATE LOGIC -->
{{ .Date.Format (.Site.Params.dateFormat | default "2006 January 02") | $.Scratch.Set "subheader" }}
{{ with .Description }} {{ $.Scratch.Set "subheader" . }} {{ end }}
<h5>{{ $.Scratch.Get "subheader" }}</h5>
<!-- UPDATED DATE LOGIC -->
{{ $date := .Date.Format (.Site.Params.dateFormat | default "2006 January 02") }}
{{ $lastmod := .Lastmod.Format (.Site.Params.dateFormat | default "2006 January 02") }}
{{ $lastmodseparatertext := " | Last edited: " }}
<h5>
Published: {{ $date }}
{{ if ne $lastmod $date }}
{{ $lastmodseparatertext }} {{ $lastmod }}
{{ end }}
</h5>
</div>
Comment out original date logic
Finally, with the new date logic working we can simply comment out the original date logic.
<div class="item">
<!-- TITLE SECTION -->
<!-- {{ $.Scratch.Set "link" .RelPermalink }} -->
<!-- {{ with .Params.repo }}
{{ $repoHost := default "github" $.Params.repoHost }}
{{ if eq "github" $repoHost }}
{{ printf "https://github.com/%s/%s/" $.Site.Params.githubUsername . | $.Scratch.Set "link" }}
{{ else if eq "gitlab" $repoHost }}
{{ printf "https://gitlab.com/%s/%s/" $.Site.Params.gitlabUsername . | $.Scratch.Set "link" }}
{{ else if eq "bitbucket" $repoHost }}
{{ printf "https://bitbucket.org/%s/%s/" $.Site.Params.bitbucketUsername . | $.Scratch.Set "link" }}
{{ end }}
{{ end }} -->
<!-- {{ with .Params.link }} {{ $.Scratch.Set "link" . }} {{ end }} -->
<h4><a href="{{ .Scratch.Get "link" }}">{{ .Title }}</a></h4>
<!-- DATE SECTION -->
<!-- ORIGINAL DATE LOGIC -->
<!-- {{ .Date.Format (.Site.Params.dateFormat | default "2006 January 02") | $.Scratch.Set "subheader" }} -->
<!-- {{ with .Description }} {{ $.Scratch.Set "subheader" . }} {{ end }} -->
<!-- <h5>{{ $.Scratch.Get "subheader" }}</h5> -->
<!-- UPDATED DATE LOGIC -->
{{ $date := .Date.Format (.Site.Params.dateFormat | default "2006 January 02") }}
{{ $lastmod := .Lastmod.Format (.Site.Params.dateFormat | default "2006 January 02") }}
{{ $lastmodseparatertext := " | Last edited: " }}
<h5>
Published: {{ $date }}
{{ if ne $lastmod $date }}
{{ $lastmodseparatertext }} {{ $lastmod }}
{{ end }}
</h5>
</div>
Conclusion
List pages now reflect both the publication date of a post and the last modification date, where applicable.
Unfortunately, something in the tech stack is reducing the desired spacing between the two dates.
The desired spacing:
Published: 2022 March 31 | Last edited: 2022 April 30
The rendered spacing:
Published: 2022 March 31 | Last edited: 2022 April 30
It’s not presently clear what is trimming the additional space. Nevertheless, list pages now reflect the desired information.