技术性文章没有内容提醒怎么行的，技术快速迭代，今天可以的方法明天可能就不行了

网上搜了一圈，对应主题的没找到现成的，只能魔改了

只针对PaperMod主题的，其他自己魔改，大同小异

1、添加自定义模版

Hugo根目录创建layouts\partials\outdated_warning.html

复制下面代码到 outdated_warning.html内

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

{{- if or .Params.enableOutdatedInfoWarning (and .Site.Params.outdatedInfoWarning.enable (ne .Params.enableOutdatedInfoWarning false)) }}
{{- $daysAgo := div (sub now.Unix $.Page.Params.Lastmod.Unix) 86400 }}
{{- $hintThreshold := .Site.Params.outdatedInfoWarning.hint | default 30 }}
{{- $warnThreshold := .Site.Params.outdatedInfoWarning.warn | default 180 }}

{{- $updateTime := $.Page.Params.Lastmod }}

{{- if gt $daysAgo $hintThreshold }}
<div class="post-outdated">
  {{- if gt $daysAgo $warnThreshold }}
  <div class="warn">
  {{- else }}
  <div class="hint">
  {{- end }}
    <p>{{ i18n "outdatedInfoWarningBefore" .}}
      <span class="timeago" datetime="{{ dateFormat "2006-01-02T15:04:05" $updateTime }}" title="{{ dateFormat "January 2, 2006" $updateTime }}">
      {{- dateFormat "January 2, 2006" $updateTime -}}
      </span>{{ i18n "outdatedInfoWarningAfter" .}}
    </p>
  </div>
</div>
{{- end -}}
{{- end -}}

2、添加到文章模版内

Hugo根目录创建layouts/_default/single.html

在目录下方或者文章上方添加

1
2
3
4
5
6
7
8

{{ partial "outdated_warning.html" . }}
{{- if .Content }}
  <div class="post-content">
    {{- if not (.Param "disableAnchoredHeadings") }}
    {{- partial "anchored_headings.html" .Content -}}
    {{- else }}{{ .Content }}{{ end }}
  </div>
  {{- end }}

3、添加内容提醒css

Hugo根目录创建assets/css/extended/blank.css

添加下列代码

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21

.post-outdated .hint {
    padding: 1rem 1.5rem;
    background-color:rgb(239, 245, 255);
    border-left: 0.5rem solid rgb(66, 172, 243);
    color: #6b5900;
    align-self: stretch;
    margin-bottom: 1em;
}

.post-outdated p {
    margin: initial;
}

.post-outdated .warn {
    padding: 1rem 1.5rem;
    background-color: #fff7d0;
    border-left: 0.5rem solid #e7c000;
    color: #6b5900;
    align-self: stretch;
    margin-bottom: 1em;
}

4、添加配置参数

config.yml内添加下列参数

1
2
3
4
5
6


params:
    outdatedInfoWarning:
            enable: true
            hint: 30                # 如果文章最后更新于这天数之前，显示提醒
            warn: 180    # 如果文章最后更新于这天数之前，显示警告

5、文章单独配置开关

文章开头增加enableOutdatedInfoWarning: true #内容过时提醒

也可把上述代码添加到archetypes/default.md

6、添加提示文字

Hugo根目录创建i18n 内复制主题下复制zh.yaml进来，添加下列代码

1
2
3
4
5

- id: outdatedInfoWarningBefore
  translation: "【注意】最后更新于 "

- id: outdatedInfoWarningAfter
  translation: "，文中内容可能已过时，请谨慎使用。"

ps:借助ChatGPT的强大功能做了代码的编辑操作，未来已来🎉

参考：

在 MemE 主题文章开头添加过时提醒 | 荷戟独彷徨

hugo-theme

ChatGPT