Fixing the Date Comparison Logic for Hugo Posts

Published: 2022 July 11

software development web development static site generator Hugo Hugo theme

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.

Copying Directory Structure With a Bash Script - With Help From ChatGPT AI

Published: 2024 January 22

Backing Up Git Config Values With a Bash Script

Published: 2023 August 25

Backing Up Visual Studio Code (VS Code) Settings and Extensions With a Bash Script

Published: 2022 November 09