惯性聚合 高效追踪和阅读你感兴趣的博客、新闻、科技资讯
阅读原文 在惯性聚合中打开

推荐订阅源

WordPress大学
WordPress大学
H
Help Net Security
Jina AI
Jina AI
V
V2EX
G
Google Developers Blog
B
Blog
GbyAI
GbyAI
U
Unit 42
爱范儿
爱范儿
腾讯CDC
Engineering at Meta
Engineering at Meta
酷 壳 – CoolShell
酷 壳 – CoolShell
博客园 - 三生石上(FineUI控件)
宝玉的分享
宝玉的分享
小众软件
小众软件
D
DataBreaches.Net
OSCHINA 社区最新新闻
OSCHINA 社区最新新闻
博客园 - Franky
博客园 - 聂微东
The Cloudflare Blog
I
InfoQ
Microsoft Azure Blog
Microsoft Azure Blog
Hugging Face - Blog
Hugging Face - Blog
大猫的无限游戏
大猫的无限游戏

mephisto.cc

修复rime-ice无法弹出候选框的问题 开机滚动字体显示优化 个人网站安全防护 树莓派上部署Vaultwarden 使用goaccess实时分析Caddy日志 个人网站监控 Hugo全站AVIF记 Linux下尝试使用Godot开发小游戏 Arch linux dae 透明代理 Airflow接管galler-dl下载任务 如何使用gallery-dl批量下载图像 Arch核显下如何愉快玩Dota2和CS2 Arch/labwc 环境网络相关设置 Rime添加dota2词库 Arch 重装记录 Supertuxkart iOS版终于发布了 打造自己的流媒体音乐服务 剪切板管理工具clipcat推荐 MangoHud性能监控 微信小程序开发记 Rofi试用 解决Arch下VSCode无法输入中文的问题 独立窗口管理器下无法录屏问题处理 上海市二手房成交数据监控 OpenLDAP监控 Arch linux如何顺畅连接蓝牙设备 使用Git和Ansible管理配置文件 Arch Linux SSL VPN 客户端配置 简单获取celery任务实时结果 Arch linux下iNode客户端的安装和使用方法
Hugo文末添加最后修改时间
2023-09-25 · via mephisto.cc

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

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 中定义的规则顺序,依次获取。