添加rss功能到nextjs部落格
Contents
下載 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 可以看到東西就成功了 🎉