為 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 行程式碼。

如果你對外掛的實現原理感興趣，請接著往下看