RSS订阅界面美化历程

TLDR：

在三月份逐渐开发这个网站，做到 RSS 订阅的时候，我给 XML 文件加了一套美化方案，个人很是满意，没想到仅仅两天过后，原来能正常显示的页面突然又只剩下 XML 文档树。后来我去纸鹿大佬的博客交流群里问了一下，纸鹿大佬推荐了 Mayx 的《在 Google 杀死 XSLT 之后的 XML 美化方案》，我看完之后重新梳理了 RSS、Atom 和浏览器渲染之间的关系，于是有了现在这套版本。

为什么做 RSS 美化

所有博客都应该有一个订阅入口。

博客文章往往放在了个人网站上，网页当然可以慢慢看，但如果有人想要长期关注你发布的内容，就需要时不时打开你的个人网站；但如果读者使用 RSS 阅读器，那么新文章发布后就可以自动出现在订阅列表里，不需要每天专门打开网站看看有没有更新。

这听起来很棒不是吗？

但对于一个不熟悉订阅源的人来说，一打开是一个裸xml文件，估计也会一脸懵。所以我当时就想，既然订阅源要给人看，那就顺便把它也做得像一个页面吧。

况且下面两个图，哪一个直观也不用多说吧。

初始版本

这件事发生在三月初，网站刚刚上线的那段时间，也就是那个时候我刚刚开始添加订阅功能，现在回头看 Git 记录还记录的蛮清楚的：

• 2 月 28日，添加 feed 依赖包，并创建脚本 generate-rss.js 以根据 content/posts 目录下的文章自动生成 RSS、Atom 和 JSON Feed 文件
• 3 月 1 日，先把 RSS、Atom 都接上，让文章可以自动生成订阅文件。
• 3 月 1 日晚上，第一次给 RSS 添加 XSLT。
• 3 月 2 日，尝试用 markdown-it 把文章内容转成 HTML，同时补了封面图、摘要和订阅链接。
• 3 月 2 日下午，把订阅源统一成 Atom（感觉实现最方便且适配性广，后续可以考虑加一下JSON Feed（2026.10.4已添加），并把文件移到 /feeds/ 目录。
• 3 月 4 日，增加订阅页面，加入卡片、背景图和弹窗预览，浏览器里打开 /feeds/ 时不再是干巴巴的 XML。

当时的思路和大部分有订阅源美化的博客一样：

脚本读取 content/posts 下的文章，生成 Atom 文件；Atom 文件开头引用 atom.xsl；浏览器拿到 XML 后，通过 XSLT 把它转换成一个有封面、摘要和日期的 HTML 页面。

效果简单高效，于是我很快就把它合进了网站。

我以为这事儿终于完成了。

第一次看到效果的时候还是挺开心的。点击下面的rss按钮，打开订阅链接，不再是密密麻麻的 XML 文件树，而是和我的博客风格差不多的页面。

就在此时，该来的转折还是来了。

美化方案突然失效

没过几天，我再次打开订阅链接，准备欣赏我的美化方案，也看看还有什么可以继续完善的方法，却发现之前做好的页面不见了。

浏览器里只剩下 XML 裸文件。我一开始以为是自己的问题，可能是后来不断更新网站内容的时候，不小心碰到了脚本的内容，加上睡的晚，可能不小心改了脚本，导致美化页面失效了。之后又怀疑是不是在vibe某一些页面的时候导致 Vercel 的 Atom MIME 类型搞错了？

我按照自己的经验和AI给的可能性，检查了样式表路径、响应头和构建产物，也重新确认了 XML 文件里有没有 xml-stylesheet 指令。每一项单独看都像是对的，但组合起来就是不工作。本地开发环境能看到效果，线上在chrome中却看不到效果。

随后调整了很多次（做了次消融实验），提交了好几次commit，都没有效果😭。这时候我想着，去问问群里的大佬吧。

大佬们的帮助

于是我去纸鹿大佬的博客交流群里问了一下。当时描述的很简单：我的rss订阅源美化好像不管用了，大佬们知道可能问题出在哪里嘛？

才不到5分钟，纸鹿大佬甩来 Mayx 佬的文章：《在 Google 杀死 XSLT 之后的 XML 美化方案》。并说Mayx最近刚刚写了一篇有关这个的，你看看。

这篇文章直接解决了我的疑惑：Chrome 计划弃用 XSLT。所以我的美化方案会突然失效，原因不在我，而是浏览器更新后不支持了。

具体原因Mayx佬的博客讲的更好，我也没必要过多赘述。在这里贴一下：

从上面Chrome的弃用XSLT文档中，可以发现，这件事的始作俑者是Mason Freed，他在WHATWG中发起了一个Issue，因为XSLT用的人很少，以及实现XSLT的库很老而且容易出漏洞，所以建议把XSLT从Web标准中删除。在这个Issue中可以发现，有很多人表示不满，毕竟这个功能对想要给自己订阅做美化的博主来说还是很有用的。为了对抗谷歌，还有人做了个网站： https://xslt.rip 。

而且XSLT虽然用的人占比也许不高，但从总量上应该还是挺多的，除了用XSLT美化博客订阅的，甚至还有用XSLT作为博客框架的，另外还有一些人提出一部分政府网站也有使用XSLT。

不过Freed看起来对这件事早有准备，他做了一个Polyfill库，通过WASM的方式让XSLT可以正常工作，为了方便大家使用这个库，我顺手给CDNJS发了个PR，以后可以用CDN引用它了。不过使用这个库的前提是需要在订阅中加一段引用JS的代码，像我博客中的Atom订阅，用的是jekyll-feed插件，里面的格式都是写死的，就用不了了……

只不过现在已经没办法阻止谷歌了……而且其他浏览器也表示会跟进，看来我们唯一能做的就是去适应了。

而且这篇博客不止说明了原因，还想了两条替代路线：纯 CSS，以及在 XML 里混入 XHTML。

纯 CSS 可以把标签排列得好看一些，但没办法真正操作文档内容，也不容易给文章加上正常的超链接；混合 XHTML 能补上这些能力，但 XML 依旧是 XML，和 HTML 的 DOM 行为并不完全一样，还会在验证器里出现 Misplaced XHTML content 之类的警告。

看完之后，我想，如果 XSLT 终究要不支持，大势所趋，我也没有办法。那我不如自己写一个生成脚本，自己生成独立的HTML界面。

现在这版是怎么做的

现在网站使用的是 Atom 作为主要订阅格式，订阅地址放在 /feeds/ 目录下。生成脚本generate-rss.js负责几件事：

1. 递归读取文章。
2. 解析语言、slug、日期、摘要和封面。
3. 为不同语言生成 Atom。
4. 同时生成独立静态 HTML 页面，并把 Atom、HTML、XSL 一起复制到 dist。

这个方案虽然看起来有些不太优雅，但至少把浏览器预览和 RSS 订阅拆开了。即使未来所有浏览器都不再支持 XSLT，/feeds/zh/ 和 /feeds/en/ 这样的静态 HTML 页面仍然可以正常访问，RSS 阅读器也仍然可以订阅对应的 Atom XML。当然，我也没有完全删掉.xsl文件，想着留一下，毕竟也曾是互联网上极为高效的一种转换方式。

后续也可以在这里看我们的xsl美化效果.

一点感想

这次找bug的经历让我印象深刻，很感谢大佬们的热心分享，这次经历同时也说明，如果一个新的功能发生改变后，AI在训练的时候没有相关的经历，是没办法快速定位到bug的原因的，或许这也是在AI时代，博客还有一点价值的证明。只有不断的有人在互联网上分享，ai才可以获得足够多的信息，才可以更好的帮助更多的人。

同时我也为xslt这个技术的消失感到惋惜，在我关注的大佬做的这个网站https://xslt.rip 中，也可以看到还有很多人仍在坚持，想要维护他们习惯的技术栈，但是历史的车轮究竟会怎么样转，我们只能拭目以待。