添加rss功能到nextjs部落格

下載 npm feed

pnpm add feed

新增 generateRSS()

新增 lib/generateRSS.js

import { Feed } from "feed";
import { writeFileSync } from "fs";
import { getSortedPostsData } from "./posts";

export default function generateRSS() {
  const feed = new Feed({
    title: "Alan Tseng",
    description: "This is my personal feed!",
    id: process.env.baseUrl,
    link: process.env.baseUrl,
    //language: "en", // optional, used only in RSS 2.0, possible values: http://www.w3.org/TR/REC-html40/struct/dirlang.html#langcodes
    image: `${process.env.baseUrl}/image/me.jpeg`,
    favicon: `${process.env.baseUrl}/favicon.ico`,
    copyright: "All rights reserved 2013, John Doe",
    //updated: new Date(2013, 6, 14), // optional, default = today
    generator: "awesome", // optional, default = 'Feed for Node.js'
    feedLinks: {
      json: `${process.env.baseUrl}/json`,
      atom: `${process.env.baseUrl}/atom`,
    },

    author: {
      name: "alanhc",
      email: "alanhc.tseng1999@gmail.com",
      link: `${process.env.baseUrl}`,
    },
  });

  const Blog_URL = `${process.env.baseUrl}/next-blog/posts`;
  getSortedPostsData().forEach((post) => {
    console.log(post);
    feed.addItem({
      title: post.title,
      id: post.id,
      link: `${Blog_URL}/${post.id}`,
      description: post.content.slice(0, 100),
      content: post.content,
      author: "alanhc",
      date: new Date(post.date),
      //image: ""
    });
    writeFileSync("./public/feed.xml", feed.rss2());
    writeFileSync("./public/atom.xml", feed.atom1());
    writeFileSync("./public/feed.json", feed.json1());
  });
}

load 時產生

在 pages/index.tsx 的 getStaticProps 裡,新增 generateRSS(); 打開 localhost/feed.xml 使用 chrome extension - RSS Feed Reader 可以看到東西就成功了 🎉

ref

0%