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.

date and lastmod on my website

On my blog pages, the creation date (date) or if the page has been subsequently modified, that modification date (lastmod) is displayed. In the bloglist and on the blog post page the same Hugo Partial createDate-lastMod.html is used. Each web page is available in English and German.

When creating a blog post, the date front matter field is automatically filled with the current date. By slightly adjusting the setting for the lastmod system variable in config.toml, the date is automatically copied to the lastmod system variable when it is created. Additionally, I have a front matter field lastmod. This lastmod field is only manually populated when I create content changes in a blog post. I also use the field when blog posts are checked and updated by me after 1 to 2 years.

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 the above blog post:

---
..
date: 2021-05-12T13:43:42+01:00
lastmod: "2023-01-28"
..
---

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 - as text in the Front Matter variable when I make a subsequent change in the form of “YYYY-MM-DD”. 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 text and no quotes.

Entry in config.toml

To make the customization of lastmod work for me, I overwrote the default settings in config.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 config.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 needed for the HTML tag time. The formatting 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 English 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