Hugo - i18n Multilingual - customize lastmod date for specific country

If the creation date (date) or modification date (lastmod - last modification) is displayed on the web page, the display should be adapted country-specifically depending on the language. In the following Hugo Partial I show how it is used on my web pages.

Post reviewed on June 7, 2023

I have revised the content of this post somewhat.

date and lastmod on my website

On my blog pages, the creation date (date) or, if the page was changed later, the modification date (lastmod) is displayed. In the blog list and on the blog post page, the same Hugo Partial createDate-lastMod.html is used. Each page is available in German and English.

When creating a blog post, the date field in the Front Matter is automatically filled with the current date. Through a slightly adjusted setting in the hugo.toml for the system variable lastmod, the date is automatically transferred to the system variable lastmod when it is created. In addition, I have a Front Matter field lastmod. This lastmod field is only manually populated when I make content changes to a blog post. I also use this field when blog posts are reviewed and updated by me.

By sorting the blog list with .ByLastmod.Reverse, the blog posts are sorted in descending order by lastmod. This will bring updated, older blog posts back to the front pagination pages.

In the Front Matter for my blog post - Use free Bootstrap SVG Icons in Hugo - there is a date and a lastmod that I manually changed. In that case, I display the lastmod in a country-specific format with the note Update. If there is no manual Front Matter entry for lastmod, date is output without a hint.

By clicking on the country flag in the upper right corner, the language is switched. The display of the date is country specific.

Front Matter variables date and lastmod

The Front Matter entry for the German index.md and the English index.en.md is identical for date and lastmod in my blog posts. When I create them, I first write the German Markdown file, then copy it and translate it afterwards. Hence the identical date and lastmod.

Front Matter entry in the Markdown file of this blog post:

---
..
date: 2023-01-18T18:15:47+01:00
lastmod: 2023-06-07T18:15:47+01:00
..
---

Under themes/tekki/archetypes/ I have created the content template file blog.md. For information on archetypes, see the Hugo documentation - What are Archetypes? . This will automatically insert the creation date date.

My Front Matter from themes/tekki/archetypes/blog.md:

---
..
date: {{ .Date }}
lastmod:
..
---

I write the modification date of a blog article - lastmod - in the form of 2023-06-07T18:15:47+01:00 in the Front Matter variable when a subsequent change is made. I only put a date there when content changes / additions are made to the blog post. Spelling corrections are not content changes for me. No change equals no date.

Entry in hugo.toml

To make the customization of lastmod work for me, I overwrote the default settings in hugo.toml, in the main directory of the Hugo project, as follows:

..
[frontmatter]
  lastmod = ['lastmod', 'date']
..

The date creation date is automatically copied to the lastmod system variable when a new blog post is created. The lastmod front matter variable is still empty at that time. The default values can be found in the Hugo documentation at - Configure Dates .

For some hugo.toml changes, you have to exit Hugo with ctrl+c and restart it for the changes to take effect. I always do this for security reasons.

Hugo Partial for country-specific adjustment of date and lastmod

The Hugo Partial is stored at themes/tekki/layouts/partials/createDate-lastMod.html. tekki is my theme name.

{{ $datetime := substr .Date 0 10 }}
{{ $date := .Date | time.Format ":date_medium" }}
{{ $lastmod := "" }}

{{ if eq .Site.Language.Lang "de" }}
	{{ $lastmod = .Lastmod.Format "02.01.2006" }}
	{{ $date = substr $date 0 10 }}
{{ else }}
	{{ $lastmod = .Lastmod.Format "Jan 2, 2006" }}
	{{ $date = substr $date 0 12 }}
{{ end }}

{{ if eq $lastmod $date }}
	<time datetime="{{- $datetime -}}">{{- $date -}}</time>
{{ else }}
	{{ $datetime = substr .Params.lastmod 0 10 }}
	<strong>Update:</strong>&nbsp;<time datetime="{{- $datetime -}}">{{- $lastmod -}}</time>
{{ end }}

In the first part of the partial

… the used variables are initialized:

$datetime is required for the time HTML tag. The formatting of the time HTML tag differs from the country-specific representation. Hence the contortions with this variable. Search engines like HTML tags marked with date. The W3C prescribes the formatting of the datetime attribute as follows: Date and Time Formats

$date the creation date is initialized with .Date | time.Format “:date_medium”. This automatically creates a country-specific format and truncates everything after the date - time, etc. The Hugo documentation - time.Format - describes the format options.

The variable $lastmod is declared. Otherwise there are problems with the following if.

In the second part of the partial

… is first determined whether the web page text was written in German. If yes - then with .Lastmod.Format “02.01.2006” the system variable lastmod or the Front Matter variable lastmod is read and written in the German date format into the variable $lastmod. This was a point I didn’t understand at the beginning. Apparently, if the system variable has a content and the Front Matter field lastmod also has a content, then the content of the Front Matter field is processed. Magic!

Further above $date was filtered with time.Format country specific. In the German language the date is displayed with 10 characters. Everything else is truncated with substr.

If not German, then the American date format is used. And $date is displayed with 12 characters.

In the third part of the partial

… the control is made whether $lastmod or $date should be output.

First, if eq $lastmod $date is used to determine whether $lastmod and $date are the same. If so, this means that no manual entry has been made in the Front Matter field lastmod. This means that the creation date must be output. This is done wrapped in the HTML tag time. The variable $datetime prepared earlier can be used. $date was prepared above country specific and can also be output.

If $lastmod and $date are not equal $lastmod must be output. But there is still the HTML tag time with $datetime. The variable was initialized at the beginning with .Date. But in this branch, $lastmod needs to be written into the HTML tag. I do that with substr .Params.lastmod 0 10 directly from the Front Matter field. After that everything is output.

The descending lastmod sorting / pagination

I would like to display the teasers of my blog posts in descending lastmod sort order. This will lift revised posts from the bottom of the blog list to the top, hopefully sparking appropriate interest.

I use two pagination on my website. One for the blog post teasers and one for the tag list teasers. You can find an explanation of this in my post - Hugo - Pagination for blog posts and tags .

{{ $paginator := slice }}
{{ if .IsHome }}
  {{ $paginator = .Paginate (where .Site.RegularPages.ByLastmod.Reverse "Section" "blog") }}
{{ else }}
  {{ $paginator = .Paginate .Pages.ByLastmod.Reverse }}
{{ end }}

Due to the extension .ByLastmod.Reverse and the automatic system date/lastmod copy action described above, the change of the sorting was not further complicated.

control sitemap.xml

If date and lastmod are displayed cleanly - you should check the country specific sitemap.xml.

The source code statically generated by Hugo is stored in the publishDir directory. There, in the de and en directories, you will find the country-specific sitemap.xml. If a lastmod slipped cleanly through the system, you’ll find the lastmod XML tag there by the corresponding post or tag.

Conclusion

This was quite an effort for me. At the beginning I didn’t understand how Hugo uses lastmod internally. The search engine examples I found on the subject of lastmod all failed to produce the desired result in my case. Hugo’s documentation was not very helpful in this case either. But all’s well that ends well, it works. If you find an error on this page or if I have misrepresented something, please use the comment to let me know.

Link list for this article

This might also interest you