需求描述
博客文章发布后，作者通常会持续修订和补充内容。但对于读者来说，如果文章列表只显示「发布日期」，他们无从知晓这篇文章在发布后是否有过重要更新。
在文章卡片上增加一个「已更新」徽章，可以让读者一眼识别哪些文章经过了二次修订，从而更有动力点击阅读。
Hugo 模板实现
在文章列表的卡片模板中，通过比对 .Lastmod 和 .Date 字段来判断是否需要展示徽章：
1<div class="post-card">
2 {{ $isUpdated := false }}
3 {{ if and .Lastmod .Date }}
4 {{ if ne .Lastmod .Date }}
5 {{ $isUpdated = true }}
6 {{ end }}
7 {{ end }}
8
9 {{ if $isUpdated }}
10 <span class="post-badge badge-updated">
11 <i class="fas fa-sync-alt"></i> 已更新
12 </span>
13 {{ end }}
14
15 {{ if .Params.sticky }}
16 <span class="post-badge badge-sticky">
17 <i class="fas fa-thumbtack"></i> 置顶
18 </span>
19 {{ end }}
20
21 {{ if .Params.featured }}
22 <span class="post-badge badge-featured">
23 <i class="fas fa-star"></i> 精选
24 </span>
25 {{ end }}
26</div>
优先级设计
徽章的显示遵循明确的优先级规则：置顶 > 精选 > 已更新。当文章同时满足多个条件时，只展示优先级最高的那个徽章，避免卡片上标签过多造成视觉混乱。
实现方式是在模板中按优先级倒序判断：
1{{ if .Params.sticky }}
2 <span class="post-badge badge-sticky">置顶</span>
3{{ else if .Params.featured }}
4 <span class="post-badge badge-featured">精选</span>
5{{ else if $isUpdated }}
6 <span class="post-badge badge-updated">已更新</span>
7{{ end }}
CSS 样式
已更新徽章使用柔和的绿色，与置顶（橙色）和精选（蓝色）形成视觉区分：
1.post-badge {
2 position: absolute;
3 top: 12px;
4 right: 12px;
5 padding: 4px 10px;
6 border-radius: 4px;
7 font-size: 0.75rem;
8 font-weight: 600;
9 z-index: 2;
10 pointer-events: none;
11}
12
13.badge-updated {
14 background: rgba(34, 197, 94, 0.12);
15 color: #16a34a;
16 border: 1px solid rgba(34, 197, 94, 0.3);
17}
18
19.badge-featured {
20 background: rgba(59, 130, 246, 0.12);
21 color: #2563eb;
22 border: 1px solid rgba(59, 130, 246, 0.3);
23}
24
25.badge-sticky {
26 background: rgba(249, 115, 22, 0.12);
27 color: #ea580c;
28 border: 1px solid rgba(249, 115, 22, 0.3);
29}
采用低饱和度的半透明背景搭配同色系边框，既不喧宾夺主，又足够清晰可辨。
Hugo 日期字段说明
.Date— 文章发布日期，对应 front matter 中的date字段.Lastmod— 文章最后修改日期。Hugo 可通过 Git 提交历史自动推断，也可在 front matter 中手动指定lastmod字段- 两者使用
ne（not equal）运算符比较，精确到秒级别
效果说明
启用已更新徽章后，读者在首页浏览文章列表时，绿色「已更新」标记会自然吸引注意力。与完全不显示更新状态的列表相比，更新文章的点击率有明显提升。
这个功能的实现代码量很小（模板中约 10 行，CSS 约 30 行），但对用户浏览决策的引导效果却十分显著。
留言评论
期待你的想法评论加载中