Hugo文末添加最后修改时间

本站的内容一直在更新,比如修复拼写错误、追加内容等。很多文章随着时间流逝,需要进行变更,展示修改时间可以给读者一些心理安慰,最起码表明作者还在用心维护。

Hugo 添加修改时间非常方便, 先展示结果图(也可看文末右下角)。

hugo lastmod

  • 标号 1: 多语言提示语
  • 标号 2: 最后修改时间

1. 模板文件添加最后修改时间信息

我用的这个模板,需要修改的文件路径为: layouts/_default/single.html,在模板的合适位置(我选文末右下角)添加下面内容:

1<div class="last_mod">
2  {{ T "lastmod_msg" | markdownify }} {{ .Lastmod.Format "Monday, January 2,
3  2006" }}
4</div>
  • {{ T "lastmod_msg" | markdownify }} 为提示语,支持多语言;
  • {{ .Lastmod.Format "Monday, January 2, 2006" }} 对 lastmod 进行格式化,加了星期信息。

2. 设置多语言提示语

本站目前只提供简体/繁体中文/英语,三种语言。分别在对应地方修改,如下所示:

  • 简体中文: i18n/zh-CN.toml
1[lastmod_msg]
2other = "最后修改于:"
  • 英语: i18n/en.toml
1[lastmod_msg]
2other = "Lastmod:"
  • 繁体中文: i18n/zh-TW.toml
1[lastmod_msg]
2other = "最後修改於:"

不同语言的读者,显示不同提示语,主打一个细致用心。

3. 修改样式

三分天注定,七分靠美化。有新闻报道主播关了美颜吓跑观众,最终退出了直播事业,可见颜值时代好看至关重要!

每个 hugo theme 的样式文件位置不一,我用的这个在: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 语法解释,css 高手略过。

  • text-align: right 文字居右对齐
  • color: gray 文字颜色灰色
  • text-shadow: 2px 2px 8px #FF0000 设置文字阴影效果,4 个值分别是:水平阴影的位置、垂直阴影的位置、模糊的距离、阴影的颜色
  • font-size: smaller 字体大小

读者可以根据自己喜好,查阅 css 文档后,设置成自己的模样。

4. 设定 frontmatter 中的 lastmod

在 config.toml 中添加:

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

相关解释可以查阅文档 简单理解获取顺序为:git 相关时间 > 文件修改时间 > 自己设定的 lastmod 时间 > 默认时间

这样就大功告了!

5. 特别说明

最后,可能有读者会有疑问,这个 lastmod 时间怎么得到的呢?

参考官方文档:

.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 for a description of fallback values and precedence. See also .Date,ExpiryDate, .PublishDate, and .GitInfo.

如果你配置 enableGitInfo 为 true,那就是来自 git 相关信息,否则就是来自 frontmatter 中定义的规则顺序,依次获取。

最后修改于: Tuesday, September 26, 2023
欢迎关注微信公众号,留言交流。

相关文章:

翻译: