Skip to content
开发VitePress博客前端双向链接

给博客做了一次不小的翻新

从文章头部、SEO、Feed、专题系统到双向链接,再到发文 CLI,这次顺手把博客里很多一直想补的东西都补上了。

2026-03-17 22:03:161,603 字6 分钟阅读

这篇主要算一个阶段性归档。
本来只是想把博客的几个细节修顺眼一点,结果一路从文章头部改到 SEO、Feed、专题系统、双向链接,最后甚至顺手补了个发文命令。既然改了这么多,干脆记一下这轮到底做了什么。

这次翻新是怎么开始的

最开始的目标其实很朴素:把文章页做得更干净一点
之前的很多信息虽然都“有用”,但堆在一起会让首屏显得有点吵;另一方面,站点层面还有一些一直没补的基础设施,比如 feed、canonical、专题、专题文章组织方式等等。

然后事情就逐渐失控了。

我先改了文章头部,又顺手把文末信息块、分页卡片、订阅入口、SEO 元信息一起收了一遍;接着 Topics 页面从“有入口”变成了“真的能用”;再后来,干脆把我一直想要的双向链接也补上了。

最后的结果就是:这已经不算“修一下样式”,而更像一次小型重构。

先把文章页整理干净

这轮里我最先动的是文章页本身,核心思路其实就一句话:把该靠前的东西放回前面,把不该打扰阅读的东西往后收。

主要做了这些事:

  • 重画了文章标题区,压掉了多余的装饰性元素;
  • 把发布时间、字数、阅读时长、分类、标签重新排了一遍;
  • 重做了文末信息块和上一篇 / 下一篇导航;
  • 顺手把一些后来越看越不顺眼的视觉细节继续删掉,比如标题后面那块过重的背景渐变。

现在的文章页虽然还是极简,但信息层次比以前清楚很多,读起来也更安静一些。

再把“站点该有的东西”补齐

除了页面观感,这次还补了一堆以前一直欠着的基础设施。

比如:

  • canonical、Open Graph、Twitter Card、keywords、robots
  • sitemap.xml
  • feed.xml / atom.xml / feed.json
  • 顶部的订阅入口
  • root Markdown 排除规则
  • Vercel 路由和无 .html 链接的兼容修正

修复 VitePress 在 Vercel 上的内容加载延迟问题 这种排障记录,现在也能比较自然地挂在整个站点演进过程中,而不是孤零零躺在文章列表里。

这些东西平时不一定显眼,但真缺的时候,体验会很差。
补齐之后,这个博客才终于更像一个“站点”,而不只是“一堆能打开的页面”。

专题系统终于不是摆设了

这次另一个比较大的部分,是把专题系统真的做出来了。

现在可以直接在 topics/ 目录下按层级组织内容,并且用 _meta.md 写专题本身的标题、描述和顺序。这样像 年度总结 这种内容,就不必再散落在普通页面目录里,而是能真正成为一个有自己结构的专题。

我比较在意的几个点,这次也都一起补上了:

  • 支持多级专题;
  • Topics 页面直接展示专题树;
  • 专题默认折叠,展开 / 收起有动画;
  • 专题本身也能成为可引用的对象;
  • 专题节点也有自己的 backlinks。

也就是说,专题现在不只是“分类页换个名字”,而更像是一个可以承载长期内容的容器。

双向链接是这次最值回票价的部分

如果要从这轮改动里只留下一个,我大概会选双向链接。

我并不是想把博客做成某种笔记软件的翻版。
我真正想要的,是让旧文章之间开始彼此说话:一篇文章提到另一篇时,不再只是一个单向跳转;被提到的那一篇,也应该知道“是谁在后面回头看了它”。

现在这套双向链接已经支持:

  • 文章引用
  • 专题引用
  • 标题引用
  • 段落 / 文段引用
  • 反向链接展示
  • 段落级与标题级的小型引用提示
  • 摘引式嵌入块

比如这篇里出现的 修复 VitePress 在 Vercel 上的内容加载延迟问题年度总结,都是真实的内部引用,不是普通 Markdown 链接。

而段落级嵌入现在长这样:

我并不是想把博客做成某种笔记软件的翻版。 我真正想要的,是让旧文章之间开始彼此说话:一篇文章提到另一篇时,不再只是一个单向跳转;被提到的那一篇,也应该知道“是谁在后面回头看了它”。出自《给博客做了一次不小的翻新》

这个功能本身不算特别复杂,但我很喜欢它给博客带来的感觉:文章不再是一篇写完就封存的孤立文档,而是会慢慢长出上下文和来路。

顺手补了一个发文命令

写到后面的时候我突然发现:既然最近都在折腾博客内部结构,那干脆把“新建文章”这一步也顺手做掉。

于是现在可以直接:

bash
pnpm post:new "文章标题" -c 开发 -t VitePress,博客 -d "一句摘要"

它会自动:

  • posts/ 下创建 Markdown 文件;
  • 填好当前日期时间;
  • 带上 categorytagsdescription
  • 顺手列出当前已有的分类和高频标签,方便我保持命名一致。

这个命令不是什么大功能,但很实用。
尤其是当博客里的文章越来越多之后,统一 front matter 的手感比我想象中重要得多。

这篇本身,其实也是一次展示

某种意义上,这篇文章本身就在展示这轮新增的功能:

  • 上面的 [[...]] 是真实可点的内部引用;
  • [[topic:...]] 展示的是专题引用;
  • ![[#...]] 展示的是段落级嵌入;
  • 如果以后别的文章再提到这篇,这里也会反过来出现 backlinks。

这一点让我挺满意的。
因为一个功能最好的展示方式,往往不是单独开一页说明书,而是它已经自然地开始参与正文写作了。

结语

回头看,这轮翻新其实做了不少事:

  • 文章页信息结构重排
  • SEO / sitemap / feed 补齐
  • 专题系统落地
  • 双向链接 Phase 1 + 2
  • 发文 CLI
  • 一堆零零碎碎但必要的视觉和交互微调

后面大概还会继续改。
比如双向链接还可以继续做 alias、歧义消解、孤立文章视图之类的东西;专题系统也还可以继续长。

不过至少到现在为止,这个博客终于更接近我想要的样子了:
简单、安静、能长期写,而且文章之间不是彼此失联的。

Last updated: