惯性聚合 高效追踪和阅读你感兴趣的博客、新闻、科技资讯
阅读原文 在惯性聚合中打开

推荐订阅源

U
Unit 42
T
The Blog of Author Tim Ferriss
H
Help Net Security
博客园 - 叶小钗
云风的 BLOG
云风的 BLOG
OSCHINA 社区最新新闻
OSCHINA 社区最新新闻
D
DataBreaches.Net
博客园 - 聂微东
A
About on SuperTechFans
大猫的无限游戏
大猫的无限游戏
P
Proofpoint News Feed
Martin Fowler
Martin Fowler
博客园 - 【当耐特】
S
SegmentFault 最新的问题
Blog — PlanetScale
Blog — PlanetScale
酷 壳 – CoolShell
酷 壳 – CoolShell
G
Google Developers Blog
I
InfoQ
freeCodeCamp Programming Tutorials: Python, JavaScript, Git & More
GbyAI
GbyAI
B
Blog
Engineering at Meta
Engineering at Meta
V
V2EX
Hugging Face - Blog
Hugging Face - Blog

热爱生活与梦想

迁移LeanCloud的Waline评论数据到TiDB/Neon 25年江浙地区暑假自驾游之感慨 使用阿里云灵码继续完成构建 SSL 证书管理器 亲手给儿子做的棒棒糖摩天轮六一礼物 使用腾讯云 CodeBuddy 构建 SSL 证书管理器 修复代码块默认高度相关缺陷 HugoNexT4.7.2 新功能和升级提示 改善代码块折叠和选中功能 支持Github风格的警告样式 新增音乐短代码功能支持 回顾24年的过去总结 修复Mathjax行内显示公式的问题 给Hugo文章增加阅读更多跳转的锚点定位功能 Win10隐匿的VPN设置和L2TP连接常见错误 Go语言中“糟糕”的日期时间格式化设计 DaoCloud道客提供的免费Docker镜像代理服务 感谢万能淘宝让自己吃到喜欢的美食 WSL运行时遇到未知异常错误无法使用 隐藏的换行符导致Base64加密解密失败 MySQL自带客户端直接免密登录操作 Linux系统中删除目录软链接的注意项 Java程序调用外网API时CA问题 如何不关机重启WSL2恢复虚拟服务 在Windows上安装Podman容器平台做虚拟化 记一次无法弹出移动硬盘的记录 为友情链接添加自动检测脚本 重新激活Github的2FA认证 Linux中使用tar压缩命令排除文件 继续小米手环的健康生活之旅 一次意外的“坠机”引发了我对手机保护壳的深思
给文章添加摘要和过期提示功能
凡梦星尘 · 2025-01-03 · via 热爱生活与梦想

早期在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参数对文章进行总结提炼,会在文章渲染时将其显示在文章的顶部。至于文章内容过期的提醒会在当文章时间超过半年或一年后自动显示。