feat(post): add out-of-date content warning (#68)

archetypes/default.md

@@ -26,6 +26,10 @@ mathjaxEnableAutoNumber: false
 # You unlisted posts you might want not want the header or footer to show
 hideHeaderAndFooter: false
 
+# You can enable or disable out-of-date content warning for individual post.
+# Comment this out to use the global config.
+#enableOutdatedInfoWarning: false
+
 flowchartDiagrams:
   enable: false
   options: ""

exampleSite/config.toml

@@ -98,6 +98,15 @@ copyright = ""            # default: author.name ↓        # 默认为下面配
     gitmentCSS = '<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/style/default.min.css" crossorigin="anonymous">'
     gitalkJS = '<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/gitalk.min.js" integrity="sha256-DcjhdbufsHMHflFjZtKNFnPKOAL2ybOxGcPOR4MtnJg=" crossorigin="anonymous"></script>'
     gitalkCSS = '<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/gitalk.css" integrity="sha256-rJVe5uyYRXdLM+Kkoj7JtN+9qI0bZTxkYTaNWODpg7U=" crossorigin="anonymous">'
+    timeagoJS = '<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/timeago.min.js" integrity="sha256-jwCP0NAdCBloaIWTWHmW4i3snUNMHUNO+jr9rYd2iOI=" crossorigin="anonymous"></script>'
+    timeagoLocalesJS = '<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/timeago.locales.min.js" integrity="sha256-ZwofwC1Lf/faQCzN7nZtfijVV6hSwxjQMwXL4gn9qU8=" crossorigin="anonymous"></script>'
+
+  # Display a message at the beginning of an article to warn the readers that it's content may be outdated.
+  # 在文章开头显示提示信息，提醒读者文章内容可能过时。
+  [params.outdatedInfoWarning]
+    enable = false
+    hint = 30               # Display hint if the last modified time is more than these days ago.    # 如果文章最后更新于这天数之前，显示提醒
+    warn = 180              # Display warning if the last modified time is more than these days ago.    # 如果文章最后更新于这天数之前，显示警告
 
   [params.gitment]          # Gitment is a comment system based on GitHub issues. see https://github.com/imsun/gitment
     owner = ""              # Your GitHub ID

i18n/en.yaml

@@ -33,10 +33,10 @@ nextPage:
 
 prevPost:
   other: "Prev"
-  
+
 nextPost:
   other: "Next"
-  
+
 toc:
   other: "Contents"
 
@@ -60,6 +60,12 @@ readingTime:
   one: "{{ .Count }} min read"
   other: "{{ .Count }} mins read"
 
+outdatedInfoWarningBefore:
+  other: "[NOTE] Updated "
+
+outdatedInfoWarningAfter:
+  other: ". This article may have outdated content or subject matter."
+
 # ===== content license =====
 author:
   other: "Author"

i18n/es.yaml

@@ -60,6 +60,12 @@ readingTime:
   one: "{{ .Count }} min lectura"
   other: "{{ .Count }} mins lectura"
 
+outdatedInfoWarningBefore:
+  other: "[NOTE] Updated "
+
+outdatedInfoWarningAfter:
+  other: ". This article may have outdated content or subject matter."
+
 # ===== content license =====
 author:
   other: "Autor"

i18n/fr.yaml

@@ -60,6 +60,12 @@ readingTime:
   one: "{{ .Count }} min de lecture"
   other: "{{ .Count }} mins de lecture"
 
+outdatedInfoWarningBefore:
+  other: "[NOTE] Updated "
+
+outdatedInfoWarningAfter:
+  other: ". This article may have outdated content or subject matter."
+
 # ===== content license =====
 author:
   other: "Auteur"

i18n/zh-CN.yaml

@@ -33,10 +33,10 @@ nextPage:
 
 prevPost:
   other: "上一篇"
-  
+
 nextPost:
   other: "下一篇"
-  
+
 toc:
   other: "文章目录"
 
@@ -60,6 +60,12 @@ readingTime:
   one: "预计阅读 {{ .Count }} 分钟"
   other: "预计阅读 {{ .Count }} 分钟"
 
+outdatedInfoWarningBefore:
+  other: "【注意】最后更新于 "
+
+outdatedInfoWarningAfter:
+  other: "，文中内容可能已过时，请谨慎使用。"
+
 # ===== content license =====
 author:
   other: "文章作者"

layouts/partials/post/outdated-info-warning.html

@@ -0,0 +1,28 @@
+{{- if or .Params.enableOutdatedInfoWarning (and .Site.Params.outdatedInfoWarning.enable (ne .Params.enableOutdatedInfoWarning false)) }}
+  {{- $daysAgo := div (sub now.Unix .Lastmod.Unix) 86400 }}
+  {{- $hintThreshold := .Site.Params.outdatedInfoWarning.hint | default 30 }}
+  {{- $warnThreshold := .Site.Params.outdatedInfoWarning.warn | default 180 }}
+
+  {{- $updateTime := .Lastmod }}
+  {{- if .GitInfo }}
+    {{- if lt .GitInfo.AuthorDate.Unix .Lastmod.Unix }}
+      {{- $updateTime := .GitInfo.AuthorDate }}
+    {{- end }}
+  {{- end -}}
+
+  {{- if gt $daysAgo $hintThreshold }}
+  <div class="post-outdated">
+    {{- if gt $daysAgo $warnThreshold }}
+    <div class="warn">
+    {{- else }}
+    <div class="hint">
+    {{- end }}
+      <p>{{ T "outdatedInfoWarningBefore" -}}
+        <span class="timeago" datetime="{{ dateFormat "2006-01-02T15:04:05" $updateTime }}" title="{{ dateFormat "January 2, 2006" $updateTime }}">
+        {{- dateFormat "January 2, 2006" $updateTime -}}
+        </span>{{ T "outdatedInfoWarningAfter" -}}
+      </p>
+    </div>
+  </div>
+  {{- end -}}
+{{- end -}}

layouts/partials/scripts.html

@@ -10,6 +10,22 @@
   {{ if .Site.Params.fancybox }}<script type="text/javascript" src="{{ "lib/fancybox/jquery.fancybox-3.1.20.min.js" | relURL }}"></script>{{ end }}
 {{- end -}}
 
+<!-- timeago.JS -->
+{{- if and (or .Params.enableOutdatedInfoWarning (and .Site.Params.outdatedInfoWarning.enable (ne .Params.enableOutdatedInfoWarning false))) (or .IsPage .IsHome) }}
+  {{- if .Site.Params.publicCDN.enable }}
+  {{ .Site.Params.publicCDN.timeagoJS | safeHTML }}
+  {{ .Site.Params.publicCDN.timeagoLocalesJS | safeHTML }}
+  {{- else }}
+  <script type="text/javascript" src="{{ "lib/timeago/timeago-3.0.2.min.js" | relURL }}"></script>
+  <script type="text/javascript" src="{{ "lib/timeago/timeago.locales-3.0.2.min.js" | relURL }}"></script>
+  {{- end }}
+<script>  // NOTE: timeago.js uses the language code format like "zh_CN" (underscore and case sensitive)
+  var languageCode = {{ .Site.LanguageCode }}.replace(/-/g, '_').replace(/_(.*)/, function ($0, $1) {return $0.replace($1, $1.toUpperCase());});
+  timeago().render(document.querySelectorAll('.timeago'), languageCode);
+  timeago.cancel();  // stop update
+</script>
+{{- end }}
+
 <!-- flowchart -->
 {{- if and (or .Params.flowchartDiagrams.enable (and .Site.Params.flowchartDiagrams.enable (ne .Params.flowchartDiagrams.enable false))) (or .IsPage .IsHome) -}}
 <script>

layouts/post/single.html

@@ -27,6 +27,9 @@ <h1 class="post-title">{{ .Title }}</h1>
     <!-- TOC -->
     {{ partial "post/toc.html" . }}
 
+    <!-- Outdated Info Warning -->
+    {{ partial "post/outdated-info-warning.html" . }}
+
     <!-- Content -->
     <div class="post-content">
       {{ .Content }}

src/css/_partial/_post.scss

@@ -9,7 +9,7 @@
 
 .post {
   padding: $post-padding;
-  
+
   & + .post {
     border-top: $post-border;
   }
@@ -20,4 +20,5 @@
   @import '_post/copyright';
   @import '_post/reward';
   @import '_post/footer';
-}
+  @import '_post/outdated';
+}

src/css/_partial/_post/_outdated.scss

@@ -0,0 +1,25 @@
+.post-outdated {
+  .hint {
+    position: relative;
+    margin-top: 20px;
+    margin-bottom: 20px;
+    padding: 5px 10px;
+    border-left: 4px solid rgb(66, 172, 243);
+    background-color: rgb(239, 245, 255);
+    border-color: rgb(66, 172, 243);
+  }
+
+  .warn {
+    position: relative;
+    margin-top: 20px;
+    margin-bottom: 20px;
+    padding: 5px 10px;
+    border-left: 4px solid #f9cf63;
+    background-color: #ffffc0;
+    border-color: #f9cf63;
+  }
+}
+
+
+
+