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 posts in Hugo.

We already have a date field that reflects when a post was first published. We want to keep that date and conditionally add a new date that reflects when the post was last updated.

Building the solution

Most of the approach for this enhancement was found in Mert Bakir’s Last Modified Date in Hugo article, though we will make some departures from his solution.

Creating a partial layout file

We’ll start by creating a new partial layout file called post-date.html in the /layouts/partials/ directory containing the following code:

{{ $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 }}

Looking more closely:

{{ $date := .Date.Format (.Site.Params.dateFormat | default "2006 January 02") }} - formats the date variable found in the post frontmatter and assigns it to a Go $date variable.

{{ $lastmod := .Lastmod.Format (.Site.Params.dateFormat | default "2006 January 02") }} - formats the lastmod variable found in the post frontmatter and assigns it to a Go $lastmod variable.

<h5>Published: {{ $date }}</h5> - Outputs the literal string “<h5>Published: “, followed by the contents of $date variable, followed by the literal string “</h5>”.

{{ if ne $lastmod $date }} ...command... {{ end }} - Uses the Golang ne (not equal) binary comparison operator to test if the $lastmod and $date variables are equal. If they are not equal it executes the …command… portion.

<h5>Last edited: {{ $lastmod }}</h5> - if the $lastmod and $date variables are not equal this outputs the literal string “<h5>Published: “, followed by the contents of $lastmod variable, followed by the literal string “</h5>”.

In summary, this outputs the publication date of the post in all cases and the last modified date of the post if it is populated and different than the publication date.

Updating the post layout file

Now that the post-date.html partial layout is created we need to modify the single.html post layout in the /layouts/post/ directory.

In the title info section we’ll remove the line <h5>{{ .Date.Format (.Site.Params.dateFormat | default "2006 January 02") }}</h5>

And we’ll replace it with a reference to our new partial: {{ partial "post-date" . }}.

The updated section looks like this:

    <!-- Title info -->
    <div>
        <h2>{{ .Title }}</h2>
        {{ partial "post-date" . }}
        {{ partial "tags" . }}
    </div>

Updating the post archetype file

To ensure new posts have a lastmod field we’ll need to add it to the post.md file in /archetypes/ directory.

The updated frontmatter looks like this:

---
title: "{{ replace .TranslationBaseName "-" " " | title }}"
date: {{ .Date }}
lastmod: {{ .Date }}
description: ""
tags: [""]
draft: true
---

Updating existing posts

Since we haven’t been using a lastmod field, none of our existing posts include it.

We’ll simply add it as needed to each post as it is updated.

All that is required is adding lastmod: to a post’s frontmatter and populating it with the relevant update date.

Conclusion

With these updates we can now show when a page was last modified.

If a page hasn’t been updated it’s date info will look much like it did before:

Published: 2022 March 31

And once it is updated it will look like this:

Published: 2022 March 31
Last edited: 2022 April 30