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

相關文章:

翻譯: