为 VitePress 网站添加 RSS 订阅支持

省流：使用 vitepress-plugin-rss 这个插件

前言

在看许多个人博客站点的时候，右上角总会有个RSS订阅的标志

恰好我的博客也是基于 VitePress 搭建的，就想看看能不能也实现这个功能呢？

动手前先搜了一下，先是看到了vitepress-blog-zaun上有这个RSS的实现支持，再搜了一下发现Vue的官方博客 vuejs/blog 也是用的这样的实现

大概就是自定义 VitePress 的 buildEnd 钩子，在里面实现逻辑获取 md 文件列表，然后通过 feed 生成 RSS 文件，整个逻辑就 50+ 行代码

由于我的博客还分离了独立的主题包 @sugarat/theme，我想把这个功能加到我的主题包里，这样使用这个主题的就可以简单的配置一下就能使用了，当然也为了方便广大 VitePress 用户更加简便的使用，我将这段逻辑单独分离封装到了 vitepress-plugin-rss 这个插件里。

接下来我将会先介绍一下如何食用这个插件，再介绍它的核心实现原理

插件使用

通过 pnpm/npm/yarn 安装插件

pnpm add vitepress-plugin-rss

在 .vitepress/config.ts 配置文件中添加配置使用

下面是最基础的使用配置

import { RssPlugin, RSSOptions } from 'vitepress-plugin-rss'
const baseUrl = 'https://sugarat.top'
const RSS: RSSOptions = {
  title: '粥里有勺糖',
  baseUrl,
  copyright: 'Copyright (c) 2018-present, 粥里有勺糖',
}

export default defineConfig({
  vite: {
    // ↓↓↓↓↓
    plugins: [RssPlugin(RSS)]
    // ↑↑↑↑↑
  }
})

然后运行 build 命令，你可以看到在rendering pages...后打印了生成 feed.rss 日志...

pnpm run build

同时会在导航栏的 socialLinks 中添加 rss 图标链接

使用是不是非常简单，只需要 10 行代码。

如果你对插件的实现原理感兴趣，请接着往下看