Note | 為這個博客添加RSS Feed

安裝依賴

用下面command安裝feed庫（type-safe）。

shellCopied!
yarn add feed

編寫RSS生成方法

在utils/feed.ts裡編寫一個generateRssFeed方法，其核心在於利用生成一個feed對象，為獲取的每一篇貼文生成feed信息。

typescriptCopied!
import { Feed } from 'feed';

export const generateRssFeed = () => {
  // get posts
  const posts = getAllPosts(['slug', 'title', 'date', 'tags']);
  // constants to provide static info
  const siteUrl = process.env.NEXT_PUBLIC_SITE_URL || '';
  const date = new Date();
  const author = {
    // ...
  };

  // generate a feed object with basic info
  const feed = new Feed({
    title: 'The Colorado Lounge',
    id: siteUrl,
    link: `${siteUrl}/the-Colorado-lounge`,
    description: "YUANCONG.L's blog",
    copyright: `All rights reserved ${date.getFullYear()}, YUANCONG.L`,
    updated: date,
    generator: 'Next.js using Feed for Node.js',
    feedLinks: {
      rss2: `${siteUrl}/the-colorado-lounge/rss.xml`,
      json: `${siteUrl}/the-colorado-lounge/feed.json`,
      atom: `${siteUrl}/the-colorado-lounge/atom.xml`,
    },
    author,
  });
};

feed庫已經幫我們簡化了操作流程，只需要在生成對象的時候註冊基本信息，利用對象方法生成feed時會自動用這些信息來生成。

typescriptCopied!
// right after the feed object generation
posts.forEach((post) => {
  feed.addItem({
    title: post.title,
    id: `${siteUrl}/${getLocale(post.tags[0])}/the-colorado-lounge/${
      post.slug
    }`,
    link: `${siteUrl}/${getLocale(post.tags[0])}/the-colorado-lounge/${
      post.slug
    }`,
    description: post.title,
    content: post.title,
    date: new Date(post.date),
  });
});

寫入public目錄

用fs庫來幫我們把生成的feed文件寫入public目錄，以便讀取。

typescriptCopied!
import fs from 'fs';

// right after the `post.forEach`
fs.mkdirSync('./public/rss', { recursive: true });
fs.writeFileSync('./public/rss/feed.xml', feed.rss2());
fs.writeFileSync('./public/rss/atom.xml', feed.atom1());
fs.writeFileSync('./public/rss/feed.json', feed.json1());

最後，我們需要保證在build的時候這個generateRssFeed方法會被運行，具體做法是將這個方法放在任意一個getStaticProps裡，例如index.tsx或是博客首頁。

typescriptCopied!
export const getStaticProps = async () => {
  generateRssFeed();

  // ...
};

检查最后生成的feed文件（以feed.xml为例）

xmlCopied!
<!-- ... -->
<item>
  <title><![CDATA[Note | 為這個博客的每個頁面設置動態連結]]></title>
  <link>https://www.yuan-cong.com/zh-Hant/the-colorado-lounge/dynamic-post-path</link>
  <guid>https://www.yuan-cong.com/zh-Hant/the-colorado-lounge/dynamic-post-path</guid>
  <pubDate>Wed, 12 Oct 2022 18:24:50 GMT</pubDate>
  <description><![CDATA[Note | 為這個博客的每個頁面設置動態連結]]></description>
  <content:encoded><![CDATA[Note | 為這個博客的每個頁面設置動態連結]]></content:encoded>
</item>
<!-- ... -->

成功！！！