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 two previous posts we added a last modified date to post pages and to list pages in Hugo. But the logic used to determine if the last modified date should be displayed was flawed.
In this post we’ll fix that logic to correctly determine when to display the last modified date.
Problem in the original solution
For post pages, the relevant logic is found in the partial layout file post-date.html in the /layouts/partials/ directory.
The original code is below.
{{ $date := .Date.Format (.Site.Params.dateFormat | default "2006 January 02") }}
{{ $lastmod := .Lastmod.Format (.Site.Params.dateFormat | default "2006 January 02") }}
<h5>Published: {{ $date }}</h5>
{{ if ne $lastmod $date }}
<h5>Last edited: {{ $lastmod }}</h5>
{{ end }}
This had a subtle problem.
The comparison operator ne
returns true if the arguments are not equal. But that will evaluate to true for cases when the $lastmod is before the $date.
Ideally, the frontmatter won’t be in that state, but if it ever were it would be better not to display the lastmod date.
Planning the solution
The gt
(greater than) comparison operator is more appropriate for our use case.
But using the gt
operator introduces a new problem because of the way dates are currently formatted for display. Before comparison the dates are formatted as strings into the pattern 2022 July 11. But because these values are strings, “2022 July 11” is not greater than “2022 March 11” because “J” comes alphabetically before “M”.
That particular issue could be solved by comparing the frontmatter values directly instead of formatting them, but that would mean that if the $lastmod value was even one second later than date then the “Last edited” text would display the same date as in “Published”, which would be unhelpful and potentially confusing.
Alternatively, we could alter the formatting of the existing variables, but we want to preserve the current formatting for display.
Instead, to resolve this, we can create new variables with the months formatted as numbers for comparison.
Building the solution
Fixing the last modified date in Hugo post pages
The updated code for post-date.html:
<!-- Variables for Dates to be DISPLAYED -->
{{ $date := .Date.Format (.Site.Params.dateFormat | default "2006 January 02") }}
{{ $lastmod := .Lastmod.Format (.Site.Params.dateFormat | default "2006 January 02") }}
<!-- Variables for Dates to be COMPARED -->
{{ $date_for_comparison := .Date.Format (.Site.Params.dateFormat | default "2006 01 02") }}
{{ $lastmod_for_comparison := .Lastmod.Format (.Site.Params.dateFormat | default "2006 01 02") }}
<p>Published: {{ $date }}</p>
{{ if gt $lastmod_for_comparison $date_for_comparison }}
<p>Last edited: {{ $lastmod }}</p>
{{ end }}
As described, we created new date variables as strings with all elements formatted as numbers, starting with the year, then descending in order to the month, and then the day.
We then use the gt
operator to compare the new variables.
Fixing the last modified date in Hugo list pages
The same solution applies to the date logic in Hugo list pages.
The updated code for list-item.html partial file:
<!-- Variables for Dates to be DISPLAYED -->
{{ $date := .Date.Format (.Site.Params.dateFormat | default "2006 January 02") }}
{{ $lastmod := .Lastmod.Format (.Site.Params.dateFormat | default "2006 January 02") }}
<!-- Variables for Dates to be COMPARED -->
{{ $date_for_comparison := .Date.Format (.Site.Params.dateFormat | default "2006 01 02") }}
{{ $lastmod_for_comparison := .Lastmod.Format (.Site.Params.dateFormat | default "2006 01 02") }}
<!-- Variable for separation text -->
{{ $lastmodseparatertext := " | Last edited: " }}
<p>
Published: {{ $date }}
{{ if gt $lastmod_for_comparison $date_for_comparison }}
{{ $lastmodseparatertext }} {{ $lastmod }}
{{ end }}
</p>
Conclusion
That should resolve the problem and correctly display the “Last edited” field only when it is relevant.