给文章添加摘要和过期提示功能

温馨提醒
总结摘要
文章的总结摘要和过期提醒功能,是一早就在主题设计时有考虑的点,但由于时间关系直到今天才得以支持, 为此也做个记录分享和功能使用说明。

早期在Hugo NexT主题的开发路线中就有考虑到要给文章的摘要和过期提示功能,但是由于个人的时间和精力有限,迟迟没有将这些功能上线。其实这两个功能的作用也算是比较实用,方便读者能够快速预览一些长文章的内容,同时对于“年限”较长的文章也是给到读者内容可能失效提醒。整体功能的实现并不算复杂,只不过要结合扩展性等方面的考虑,经过一番思索后便有初步的想法,同时在此记录下开发的过程。

这里最考验的是如何设计“总结摘要”与“过期提醒”的样式,在经过不断的尝试后,最终确定选用圆矩形方框围绕的方式来展现,配色上面分别采用了“珊瑚色”和“浅蓝色”为搭配,实现的效果如下图所示:

总结摘要和过期提醒效果

信息

😂 实在是想不出更好的啦,欢迎大家在评论区分享更多的想法建议。

上面的文章总结摘要功能实现过程并不复杂,这里并没有直接使用Hugo的内置summary函数,而是在文章的front matter中添加了description参数,用户需要在写文章时手动添加一段对于当前文章的总结摘要内容。同时在配置文件中的postMeta增加个配置项summary参数,用来全局控制是否要显示文章的总结摘要内容。

但对于文章的过期提醒功能,实现起来就稍微要复杂一些,首先也是在配置文件中的postMeta增加个配置项expired参数,可全局控制是否要显示文章内容的过期提醒。然后是考虑到不同用户的语言环境,需要在i18n的配置文件中添加对应的语言过期提醒模板内容,在此暂时只考虑到两种情况:大于半年和一年以上两个时间点。最后便是要通过JavaScript来实现对文章发表或更新的时间来进行判断,并以此给出不同的过期提醒内容显示。

1
2
3
4
5
6
# 文章过期提醒模板
PostMeta:
  expired:
    title: "温馨提醒"
    info: "🕰️ 嗨,这篇文章已是#前的陈年佳酿,信息可能需要更新,阅读前请检查最佳赏味期限。"
    warn: "🚀 注意啦!这篇文章来自#以前,可能已跟不上时代的步伐。阅读时请自备时光机,小心穿越哦!"
小提示

如不想对上述2个功能进行全局设置,均可以在文章的front matter中添加summary: false/true或是expired: false/true参数即可。

用户使用时也没过多复杂的操作,在全局配置项目的参数中找到postMeta参数,将其中两个子项summaryexpired参数设置为true,参考如下所示:

1
2
3
4
5
6
postMeta:
  # 是否开启过期提示
  # 如有需要可在i18n配置中调整默认的提示模板内容
  expired: true
  # 是否开启摘要显示
  summary: true

然后在写文章时,在front matter的参数中添加description参数对文章进行总结提炼,会在文章渲染时将其显示在文章的顶部。至于文章内容过期的提醒会在当文章时间超过半年或一年后自动显示。