这篇主要算一个阶段性归档。
本来只是想把博客的几个细节修顺眼一点,结果一路从文章头部改到 SEO、Feed、专题系统、双向链接,最后甚至顺手补了个发文命令。既然改了这么多,干脆记一下这轮到底做了什么。
这次翻新是怎么开始的
最开始的目标其实很朴素:把文章页做得更干净一点。
之前的很多信息虽然都“有用”,但堆在一起会让首屏显得有点吵;另一方面,站点层面还有一些一直没补的基础设施,比如 feed、canonical、专题、专题文章组织方式等等。
然后事情就逐渐失控了。
我先改了文章头部,又顺手把文末信息块、分页卡片、订阅入口、SEO 元信息一起收了一遍;接着 Topics 页面从“有入口”变成了“真的能用”;再后来,干脆把我一直想要的双向链接也补上了。
最后的结果就是:这已经不算“修一下样式”,而更像一次小型重构。
先把文章页整理干净
这轮里我最先动的是文章页本身,核心思路其实就一句话:把该靠前的东西放回前面,把不该打扰阅读的东西往后收。
主要做了这些事:
- 重画了文章标题区,压掉了多余的装饰性元素;
- 把发布时间、字数、阅读时长、分类、标签重新排了一遍;
- 重做了文末信息块和上一篇 / 下一篇导航;
- 顺手把一些后来越看越不顺眼的视觉细节继续删掉,比如标题后面那块过重的背景渐变。
现在的文章页虽然还是极简,但信息层次比以前清楚很多,读起来也更安静一些。
再把“站点该有的东西”补齐
除了页面观感,这次还补了一堆以前一直欠着的基础设施。
比如:
- canonical、Open Graph、Twitter Card、keywords、robots
sitemap.xmlfeed.xml/atom.xml/feed.json- 顶部的订阅入口
- root Markdown 排除规则
- Vercel 路由和无
.html链接的兼容修正
像 修复 VitePress 在 Vercel 上的内容加载延迟问题 这种排障记录,现在也能比较自然地挂在整个站点演进过程中,而不是孤零零躺在文章列表里。
这些东西平时不一定显眼,但真缺的时候,体验会很差。
补齐之后,这个博客才终于更像一个“站点”,而不只是“一堆能打开的页面”。
专题系统终于不是摆设了
这次另一个比较大的部分,是把专题系统真的做出来了。
现在可以直接在 topics/ 目录下按层级组织内容,并且用 _meta.md 写专题本身的标题、描述和顺序。这样像 年度总结 这种内容,就不必再散落在普通页面目录里,而是能真正成为一个有自己结构的专题。
我比较在意的几个点,这次也都一起补上了:
- 支持多级专题;
- Topics 页面直接展示专题树;
- 专题默认折叠,展开 / 收起有动画;
- 专题本身也能成为可引用的对象;
- 专题节点也有自己的 backlinks。
也就是说,专题现在不只是“分类页换个名字”,而更像是一个可以承载长期内容的容器。
双向链接是这次最值回票价的部分
如果要从这轮改动里只留下一个,我大概会选双向链接。
我并不是想把博客做成某种笔记软件的翻版。
我真正想要的,是让旧文章之间开始彼此说话:一篇文章提到另一篇时,不再只是一个单向跳转;被提到的那一篇,也应该知道“是谁在后面回头看了它”。
现在这套双向链接已经支持:
- 文章引用
- 专题引用
- 标题引用
- 段落 / 文段引用
- 反向链接展示
- 段落级与标题级的小型引用提示
- 摘引式嵌入块
比如这篇里出现的 修复 VitePress 在 Vercel 上的内容加载延迟问题 和 年度总结,都是真实的内部引用,不是普通 Markdown 链接。
而段落级嵌入现在长这样:
这个功能本身不算特别复杂,但我很喜欢它给博客带来的感觉:文章不再是一篇写完就封存的孤立文档,而是会慢慢长出上下文和来路。
顺手补了一个发文命令
写到后面的时候我突然发现:既然最近都在折腾博客内部结构,那干脆把“新建文章”这一步也顺手做掉。
于是现在可以直接:
pnpm post:new "文章标题" -c 开发 -t VitePress,博客 -d "一句摘要"它会自动:
- 在
posts/下创建 Markdown 文件; - 填好当前日期时间;
- 带上
category、tags、description; - 顺手列出当前已有的分类和高频标签,方便我保持命名一致。
这个命令不是什么大功能,但很实用。
尤其是当博客里的文章越来越多之后,统一 front matter 的手感比我想象中重要得多。
这篇本身,其实也是一次展示
某种意义上,这篇文章本身就在展示这轮新增的功能:
- 上面的
[[...]]是真实可点的内部引用; [[topic:...]]展示的是专题引用;![[#...]]展示的是段落级嵌入;- 如果以后别的文章再提到这篇,这里也会反过来出现 backlinks。
这一点让我挺满意的。
因为一个功能最好的展示方式,往往不是单独开一页说明书,而是它已经自然地开始参与正文写作了。
结语
回头看,这轮翻新其实做了不少事:
- 文章页信息结构重排
- SEO / sitemap / feed 补齐
- 专题系统落地
- 双向链接 Phase 1 + 2
- 发文 CLI
- 一堆零零碎碎但必要的视觉和交互微调
后面大概还会继续改。
比如双向链接还可以继续做 alias、歧义消解、孤立文章视图之类的东西;专题系统也还可以继续长。
不过至少到现在为止,这个博客终于更接近我想要的样子了:
简单、安静、能长期写,而且文章之间不是彼此失联的。