Hugo adds the last modified time at the end of the article

The content of this site is constantly being updated, such as fixing spelling errors, adding content, etc. Many articles need to be changed as time goes by. Showing the modification time can give readers some psychological comfort. At the very least, it shows that the author is still maintaining it carefully.

Hugo is very convenient to add modification time. The result picture is shown first (you can also see the lower right corner at the end of the article).

• Number 1: Multi-language prompts
• Number 2: Last modified time

1. Add last modification time information to the template file

For the template I use, the file path that needs to be modified is: layouts/_default/single.html. Add the following content in the appropriate location of the template (I selected the lower right corner at the end of the article):

1<div class="last_mod">
2   {{ T "lastmod_msg" | markdownify }} {{ .Lastmod.Format "Monday, January 2,
3   2006" }}
4</div>

• {{ T "lastmod_msg" | markdownify }} is the prompt and supports multiple languages;
• {{ .Lastmod.Format "Monday, January 2, 2006" }} formats lastmod and adds weekday information.

2. Set multi-language prompts

This site currently only provides three languages: Simplified/Traditional Chinese/English. Modify them in the corresponding places respectively, as shown below:

• Simplified Chinese: i18n/zh-CN.toml

1[lastmod_msg]
2other = "Last modified on:"

• English: i18n/en.toml

1[lastmod_msg]
2other = "Lastmod："

• Traditional Chinese: i18n/zh-TW.toml

1[lastmod_msg]
2other = "Last modified on:"

Readers in different languages will display different prompts, focusing on one meticulous intention.

3. Modify style

Three points are destined, seven points depend on beautification. There are news reports that anchors turned off beauty to scare away viewers, and eventually quit the live broadcast business. This shows that good looks are very important in this era!

The style file location of each hugo theme is different. The one I use is: assets/sass/_custom.sass

1.last_mod
2   text-align: right
3   color: gray
4   text-shadow: 2px 2px 8px #FF0000
5   font-size: smaller

CSS syntax explanation, skip it for CSS experts.

• text-align: right text is aligned to the right
• color: gray text color gray
• text-shadow: 2px 2px 8px #FF0000 Set the text shadow effect. The four values are: horizontal shadow position, vertical shadow position, blur distance, and shadow color.
• font-size: smaller font size

Readers can set it up according to their own preferences after consulting the css document.

4. Set lastmod in frontmatter

Add in config.toml:

1enableGitInfo = true
2[frontmatter]
3   lastmod = [":git", ":fileModTime", "lastmod", ":defalut"]

Related explanations can be found in Document A simple understanding of the acquisition order is: git related time > file modification time > self-set lastmod time > default time

That’s it!

5. Special instructions

Finally, some readers may have questions, how do you get this lastmod time?

Refer to the official documentation:

.Lastmod

The date on which the content was last modified. By default, if enableGitInfo is true in your site configuration, this is the Git author date, otherwise the front matter lastmod value. See [configuring dates](https:/ /gohugo.io/getting-started/configuration/#configure-dates) for a description of fallback values and precedence. See also .Date,ExpiryDate, .PublishDate, and [.GitInfo](https://gohugo.io/variables /git/).

If you configure enableGitInfo as true, it comes from git related information, otherwise it comes from the order of rules defined in frontmatter, and is obtained in sequence.