前言#
在部分的文章评论中有读者告诉我部分内容按照文章的进行操作有问题，所以我发现可能需要一个提醒读者文章很久没有更新过了的提示。
经过搜索发现 hugo 本身有一个方法LastMod，可以获取到文章上次更新的时间，于是就使用这个方法做了Partial。
Config 部分#
在hugo.toml或者config.toml需要添加两个新的项：
enableGitInfo= true
[frontmatter]
lastmod = [':git', 'lastmod', ':fileModTime', 'date']
enableGitInfo可以启用对 git 代码库的访问；lastmod用来指定获取最后文章更新时间的方法，这里我将:git放在最前，优先级最高。
文章过期的 Partial#
这里需要你按照自己的博客主题进行自由发挥。新建一个partial为layouts/partials/articleexpired.html。
我是使用的 Blowfish 的alert简码进行修改而来的：
注意，这一段代码只适用于 Blowfish 主题，其他主题需要自行编写。
<div id="update-info" style="display: none;"
{{ if not ($.Scratch.Get "cardColor") }}
class="flex max-w-prose py-1 mt-2 px-4 rounded-lg bg-primary-100 dark:bg-primary-900"
{{ else }}
class="flex max-w-prose py-1 mt-2 px-4 rounded-lg"
style="background-color: {{ $.Scratch.Get "cardColor" }}"
{{ end }}>
<span
{{ if not ($.Scratch.Get "iconColor") }}
class="text-primary-400 ltr:pr-3 rtl:pl-3 flex items-center"
{{ else }}
class="ltr:pr-3 rtl:pl-3 flex items-center"
style="color: {{ $.Scratch.Get "iconColor" }}"
{{ end }}>
{{ partial "icon.html" ("circle-info") }}
</span>
<span
{{ if not ($.Scratch.Get "textColor") }}
class="dark:text-neutral-300"
{{ else }}
style="color: {{ $.Scratch.Get "textColor" }}"
{{ end }}>
<p style="margin-top: 0px; margin-bottom: 0px;" id="update-text">上次更新于 loading... 前，部分内容可能已经过期。</p>
</span>
</div>
<script>
document.addEventListener('DOMContentLoaded', function() {
// 获取 Hugo 渲染的时间，并转换为标准的 ISO 8601 格式
const lastModifiedStr = "{{ .Lastmod }}";
// 使用正则将时间转换为 ISO 格式
const lastModified = new Date(lastModifiedStr.replace(/(\d{4})-(\d{2})-(\d{2}) (\d{2}):(\d{2}):(\d{2}) ([\+\-]\d{4}) (CST)/, '$1-$2-$3T$4:$5:$6$7'));
const now = new Date();
const duration = now - lastModified;
const days = Math.floor(duration / (1000 * 60 * 60 * 24));
const years = Math.floor(days / 365);
const remainingDays = days % 365;
let updateText = "";
let updateInfoDiv = document.getElementById("update-info");
// 当天数大于等于 30 时显示 div
if (days >= 30) {
updateInfoDiv.style.display = "flex"; // 显示 div
if (years >= 1) {
updateText = `上次更新于 ${years} 年 ${remainingDays} 天前，部分内容可能已经过期。`;
} else {
updateText = `上次更新于 ${remainingDays} 天前，部分内容可能已经过期。`;
}
}
// 更新提示文本
document.getElementById("update-text").textContent = updateText;
});
</script>
添加进入文章#
你需要知道自己使用的主题的single存放位置，然后将其复制一份到你自己 hugo 站点目录下，例如 Blowfish 的参照下面的：
./
├── layouts/
│ ├── _default/
│ │ └──single.html # 复制到这儿
│ ├── partials/ ↑
│ ├── robots.txt │
│ └── shortcodes/ │
... │
└── themes/ │
└── blowfish/ │
├── layouts/ │
│ ├── _default/ │
│ │ ├── single.html # 这个文件
│ │ ...
│ ...
...
然后在section的{{ partial "series/series.html" . }}前面添加下面这一段：
{{ if .Params.articleexpired | default true}}
{{ partial "articleexpired.html" . }}
{{ end }}
像下面一样：
修改 workflow#
因为如果在这个时候直接提交你可能会发现文章并不会显示文章过期提示，其实是因为 Github Action 中的actions/checkout@v2默认每次在工作流里克隆的仓库不包括文件修改日期，所以我们需要修改使用actions/checkout@v2的这一步添加一个fetch-depth: 0，像下面一样：
steps:
- name: Checkout repository
uses: actions/checkout@v2
with:
submodules: true
fetch-depth: 0
参考#
- 小球飞鱼 的博客 - Hugo | 以正确姿势自动添加文章最后更新时间
- zhixuan 的博客 - Stack主题 + GitHub Action