博客更新日志:标签云、代码高亮优化与体验提升
今天对博客进行了一次比较大的功能迭代,主要集中在内容组织(标签系统)、阅读体验(代码高亮)以及交互细节上。以下是本次更新的详细内容。
1. 全新的标签系统 (Tags System)
为了更好地组织和检索内容,我上线了完整的标签系统。
标签云 (Tag Cloud)
现在的 Tags 页面不再是一个枯燥的列表。我引入了 Framer Motion 来制作了一个带有交错入场动画的标签云。
- 动态字号:根据标签下的文章数量,标签会自动调整大小,热门话题一目了然。
- 交互动画:鼠标悬停时会有舒适的放大和阴影效果。
标签详情页
点击任意标签(无论是在标签云还是文章头部),都会跳转到该标签的专属页面,列出所有相关文章。
2. 代码高亮重构 (Shiki Dual Themes)
之前的代码高亮方案在深色模式下表现不够完美。本次我重构了 rehype-pretty-code 的配置,全面拥抱 Shiki。
- 双主题支持:
- ☀️ 浅色模式:GitHub Light
- 🌙 深色模式:One Dark Pro
- 完美切换:利用 CSS 变量 (
--shiki-light,--shiki-dark) 实现了无闪烁的主题切换。无论你什么时候切换系统主题,代码块的背景和语法高亮都会瞬间响应,无需刷新。
3. 体验微调 (UX Improvements)
一键复制链接
在每篇文章的日期旁边,新增了一个 "Copy Link" 按钮。点击即可将当前文章链接复制到剪贴板,方便分享。
语言自动标识
考虑到博客中包含中英文内容,现在系统会自动检测文章标题。如果是全英文标题的文章,标题旁会自动显示一个精致的 "English" 标签,帮助读者快速识别内容语言。
性能与细节
- 移除了冗余的 CSS 和脚本,优化了构建体积。
- 统一了文章列表和详情页的视觉风格。

