为文章设置过期提示

180

虽然目前没有产出什么比较深奥的原创技术文章，但是我一直期待这个博客能在我成为技术大牛之后成为我对外输出的乐土，所以为未来的技术文章准备一个过期提醒是必要的。毕竟在这个技术更迭日新月异而互联网又流行无底线的复制粘贴的时代，及时告诉文章的读者，技术存在的过期风险，避免读者浪费宝贵的时间也是一件大功德。

手动为所有文章设置过期提醒无疑是愚蠢的，一个人的精力是有限的，就算浪费也要浪费在能够让自己愉快的事情上。所以参照了其他技术博客的设计，我为自己的博客的技术文章的过期提醒应按以下要求实现。

统一管理：所有文章应有一个基础的管理体系，比如技术博文需要设置过期提醒，其他的则不需要。在设置提醒时统一管理过期时间设置，部分活跃（或者我本人就是在考古）的技术单独设置过期提醒。
醒目无碍：既然给读者提示了，就不应该藏着掖着，大大方法的放在文章的头部我觉得就很不错。但是提示又不能影响阅读体验，我个人很讨厌那种狗皮膏药似的网站，目前这个博客的主题还是深得吾心的，所以增加的提示要保证不影响读者阅读体验。
自动添加：自动自不必说，设置时间未到的时候不提醒，时间一到立马添加。不过关于比较日期是最后更新日期还是文章创建日期确实见仁见智了，我最终选择的是根据最后更新日期设置过期提示。

既然设计理念已经介绍完毕，接下来简要介绍一下实现过程。

1
2
3
4
<!-- 文件位置：~/layouts/partials/pages.html -->
{{ if and .Site.Params.enableExpiredTip (.Params.displayExpiredTip | default
.Site.Params.displayPostExpiredTip) }} {{ partial "components/expired-tip.html"
. }} {{ end }}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<!-- 文件位置：~/layouts/partials/components/expired-tip.html -->
<time id="LastmodTime" datetime="{{ $.Lastmod.Format " 2006-1-2" }}"></time>
<p id="Default_ExpiredDays">{{ $.Site.Params.expiredDays }}</p>
<p id="ExpiredDays">{{ $.Params.expiredDays }}</p>
<div id="expiredTip"></div>

<script>
  function GetNumberOfDays(date1, date2) {
    var a1 = Date.parse(new Date(date1))
    var a2 = Date.parse(new Date(date2))
    var day = parseInt((a2 - a1) / (1000 * 60 * 60 * 24))
    return day
  }

  var date = new Date()
  var ny = date.getFullYear()
  var nm = date.getMonth() + 1
  var nd = date.getDate()

  var a1 = document.getElementById("LastmodTime").dateTime
  var a2 = ny + "-" + nm + "-" + nd
  var num = GetNumberOfDays(a1, a2)

  var str1 = '本文最近更新于'
  var str2 = '天前，部分信息可能已经过时，请谨慎参考本文内容。'

  var days = document.getElementById("ExpiredDays").innerText ? document.getElementById("ExpiredDays").innerText : document.getElementById("Default_ExpiredDays").innerText

  document.getElementById("Default_ExpiredDays").style.display = 'none'
  document.getElementById("ExpiredDays").style.display = 'none'

  if (num >= days) {
    document.getElementById("expiredTip").innerHTML = str1 + "&nbsp;" + num + "&nbsp;" + str2
  } else {
    document.getElementById("expiredTip").style.display = 'none'
  }
</script>

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
# 自定义文章时效性提醒

# 是否开启
enableExpiredTip = true
# 是否显示（全局设置）
displayPostExpiredTip = false
# 说明：文章的 Front Matter 中的
# `displayExpiredTip` 的优先级高于此处
# 默认时长（全局设置）
expiredDays = 180
# 说明：文章的 Front Matter 中的
# `expiredDays` 的优先级高于此处

最后，在更新文章时设置对应参数即可。

为文章设置过期提示

相关文章：