给文章添加摘要和过期提示功能
早期在Hugo NexT
主题的开发路线中就有考虑到要给文章的摘要和过期提示功能,但是由于个人的时间和精力有限,迟迟没有将这些功能上线。其实这两个功能的作用也算是比较实用,方便读者能够快速预览一些长文章的内容,同时对于“年限”较长的文章也是给到读者内容可能失效提醒。整体功能的实现并不算复杂,只不过要结合扩展性等方面的考虑,经过一番思索后便有初步的想法,同时在此记录下开发的过程。
这里最考验的是如何设计“总结摘要”与“过期提醒”的样式,在经过不断的尝试后,最终确定选用圆矩形方框围绕的方式来展现,配色上面分别采用了“珊瑚色”和“浅蓝色”为搭配,实现的效果如下图所示:
😂 实在是想不出更好的啦,欢迎大家在评论区分享更多的想法建议。
上面的文章总结摘要功能实现过程并不复杂,这里并没有直接使用Hugo
的内置summary
函数,而是在文章的front matter
中添加了description
参数,用户需要在写文章时手动添加一段对于当前文章的总结摘要内容。同时在配置文件中的postMeta
增加个配置项summary
参数,用来全局控制是否要显示文章的总结摘要内容。
但对于文章的过期提醒功能,实现起来就稍微要复杂一些,首先也是在配置文件中的postMeta
增加个配置项expired
参数,可全局控制是否要显示文章内容的过期提醒。然后是考虑到不同用户的语言环境,需要在i18n
的配置文件中添加对应的语言过期提醒模板内容,在此暂时只考虑到两种情况:大于半年和一年以上两个时间点。最后便是要通过JavaScript
来实现对文章发表或更新的时间来进行判断,并以此给出不同的过期提醒内容显示。
如不想对上述2个功能进行全局设置,均可以在文章的front matter
中添加summary: false/true
或是expired: false/true
参数即可。
用户使用时也没过多复杂的操作,在全局配置项目的参数中找到postMeta
参数,将其中两个子项summary
和expired
参数设置为true
,参考如下所示:
然后在写文章时,在front matter
的参数中添加description
参数对文章进行总结提炼,会在文章渲染时将其显示在文章的顶部。至于文章内容过期的提醒会在当文章时间超过半年或一年后自动显示。