如何为 Fumadocs 博客生成 RSS Feed【免费下载链接】fumadocsThe beautiful flexible React.js docs framework.项目地址: https://gitcode.com/GitHub_Trending/fu/fumadocs如果你在用 Fumadocs 建站并且有博客模块想把这些文章聚合成一个可订阅的 Feed可以使用feed库生成 RSS 2.0 Feed再通过服务端路由对外暴露。这篇文章基于 Fumadocs 官方 RSS 文档与官方文档站自身的博客 Feed 实现走一遍完整路径添加依赖、编写 Feed 生成逻辑、创建服务端路由、在页面 Metadata 中声明 Feed 地址最后验证结果。主路径是 Next.jsApp Router项目文末附 React Router、Tanstack Start 和 Waku 的路由写法。准备条件站点已用 Fumadocs 搭好并且博客内容以内容集合content collection管理。Fumadocs 官方文档站用defineCollections定义博客集合dir: content/blog并在 schema 中把authorz.string()和datez.iso.date().or(z.date())设为必填字段定义见 lib/source/index.tsx。博客 Feed 正是要读取这两个字段所以每篇博客的 frontmatter 都必须包含author和date。安装feed依赖。Fumadocs 官方文档站的项目中声明为feed: ^6.0.0见 apps/docs/package.json。编写 Feed 生成逻辑官方文档/guides/rss.mdx)建议把生成 Feed 的逻辑写成函数例如放在lib/rss.tsimport { Feed } from feed; import { source } from /lib/source; const baseUrl https://fumadocs.dev; export function getRSS() { const feed new Feed({ title: Fumadocs Blog, id: ${baseUrl}/blog, link: ${baseUrl}/blog, language: en, image: ${baseUrl}/banner.png, favicon: ${baseUrl}/icon.png, copyright: All rights reserved 2025, Fuma Nama, }); for (const page of source.getPages()) { feed.addItem({ id: page.url, title: page.data.title, description: page.data.description, link: ${baseUrl}${page.url}, date: new Date(page.data.lastModified), author: [ { name: Fuma, }, ], }); } return feed.rss2(); }套用时需要替换两处内容baseUrl在文档示例中是 Fumadocs 官方域名必须换成你自己站点的对外访问域名它决定 Feed 的id、link、每个条目的link以及image、favicon的完整地址。文档示例遍历的是文档源source条目的时间取自page.data.lastModified如果为博客生成 Feed应改用博客 loader并参考下一节的官方文档站写法。Fumadocs 官方文档站的博客 loader 定义在 lib/source/index.tsxexport const blogLoader loader(blog.toFumadocsSource(), { baseUrl: /blog, });创建服务端路由Next.js 下官方文档/guides/rss.mdx)给出的路由文件是app/rss.xml/route.tsimport { getRSS } from /lib/rss; export const revalidate false; export function GET() { return new Response(getRSS()); }路由的GET返回new Response(getRSS())即feed.rss2()生成的 RSS 2.0 XML 字符串。如果你的 Feed 对应博客目录路由为/blog/rss.xml可以直接参考官方文档站自身的实现 app/(home)/blog/rss.xml/route.ts/blog/rss.xml/route.ts)。该实现把 Feed 逻辑直接写在路由里官方站点把文件放在(home)路由组中路由组名称不影响 URLimport { Feed } from feed; import { blogLoader } from /lib/source; import { NextResponse } from next/server; export const revalidate false; const baseUrl https://fumadocs.dev; export function GET() { const feed new Feed({ title: Fumadocs Blog, id: ${baseUrl}/blog, link: ${baseUrl}/blog, language: en, image: ${baseUrl}/banner.png, favicon: ${baseUrl}/icon.png, copyright: All rights reserved 2025, Fuma Nama, }); for (const page of blogLoader.getPages().sort((a, b) { return new Date(b.data.date).getTime() - new Date(a.data.date).getTime(); })) { feed.addItem({ id: page.url, title: page.data.title, description: page.data.description, link: ${baseUrl}${page.url}, date: new Date(page.data.date), author: [ { name: page.data.author, }, ], }); } return new NextResponse(feed.rss2()); }与上一节文档示例的差异条目按page.data.date从新到旧排序条目时间使用文章的date作者取自每篇文章的page.data.author。baseUrl同样要替换成你自己的域名。其他框架的路由写法可选站点如果不是 Next.js官方文档/guides/rss.mdx)给出了等价写法假设getRSS已按上文实现React Routerapp/routes/rss.tsimport { getRSS } from /lib/rss; export async function loader() { return new Response(getRSS()); }并在app/routes.ts中注册路由import { route, type RouteConfig } from react-router/dev/routes; export default [ route(rss.xml, routes/rss.ts), ] satisfies RouteConfig;Tanstack Startsrc/routes/rss[.]xml.tsimport { createFileRoute } from tanstack/react-router; import { getRSS } from /lib/rss; export const Route createFileRoute(/rss.xml)({ server: { handlers: { GET: async () new Response(getRSS()), }, }, });Wakupages/_api/rss.xml.tsimport { getRSS } from /lib/rss; export function GET() { return new Response(getRSS()); } export async function getConfig() { return { render: static as const, } as const; }在 Metadata 中声明 Feed 地址Next.js 项目可以往 metadata 对象里加alternates把 Feed 的标题和 URL 暴露给浏览器或 RSS 阅读器。官方文档/guides/rss.mdx)的示例import type { Metadata } from next; export const metadata: Metadata { alternates: { types: { application/rssxml: [ { title: Fumadocs Blog, url: https://fumadocs.dev/blog/index.xml, }, ], }, }, };url要指向你自己站点实际的 Feed 路由。Fumadocs 官方文档站在 lib/metadata.ts 中使用的是https://fumadocs.dev/blog/rss.xml与路由app/(home)/blog/rss.xml/route.ts对应文档示例里的/blog/index.xml只是示例地址两者指向各自的真实路由。验证结果请求 Feed 路由对应的 URL官方文档站为/blog/rss.xml按上文路由组文件则为/rss.xml返回的是feed.rss2()生成的 RSS 2.0 XML 字符串。检查 Feed 头部id与link指向博客首页${baseUrl}/blog每个条目的link为${baseUrl}${page.url}拼出的文章完整地址。加上alternates后页面 metadata 中以application/rssxml类型声明了该 Feed 地址。限制与注意博客集合 schema 中date和author为必填字段frontmatter 缺少这两项的文章无法通过集合校验也就进不了 Feed。Feed 条目读取的是页面数据中的title、description、date文档源示例中为lastModified内容随博客文章更新而变化。路由示例中的export const revalidate false;是文档示例自带的配置项在自己的项目中保持一致即可。【免费下载链接】fumadocsThe beautiful flexible React.js docs framework.项目地址: https://gitcode.com/GitHub_Trending/fu/fumadocs创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
如何为 Fumadocs 博客生成 RSS Feed？
如何为 Fumadocs 博客生成 RSS Feed【免费下载链接】fumadocsThe beautiful flexible React.js docs framework.项目地址: https://gitcode.com/GitHub_Trending/fu/fumadocs如果你在用 Fumadocs 建站并且有博客模块想把这些文章聚合成一个可订阅的 Feed可以使用feed库生成 RSS 2.0 Feed再通过服务端路由对外暴露。这篇文章基于 Fumadocs 官方 RSS 文档与官方文档站自身的博客 Feed 实现走一遍完整路径添加依赖、编写 Feed 生成逻辑、创建服务端路由、在页面 Metadata 中声明 Feed 地址最后验证结果。主路径是 Next.jsApp Router项目文末附 React Router、Tanstack Start 和 Waku 的路由写法。准备条件站点已用 Fumadocs 搭好并且博客内容以内容集合content collection管理。Fumadocs 官方文档站用defineCollections定义博客集合dir: content/blog并在 schema 中把authorz.string()和datez.iso.date().or(z.date())设为必填字段定义见 lib/source/index.tsx。博客 Feed 正是要读取这两个字段所以每篇博客的 frontmatter 都必须包含author和date。安装feed依赖。Fumadocs 官方文档站的项目中声明为feed: ^6.0.0见 apps/docs/package.json。编写 Feed 生成逻辑官方文档/guides/rss.mdx)建议把生成 Feed 的逻辑写成函数例如放在lib/rss.tsimport { Feed } from feed; import { source } from /lib/source; const baseUrl https://fumadocs.dev; export function getRSS() { const feed new Feed({ title: Fumadocs Blog, id: ${baseUrl}/blog, link: ${baseUrl}/blog, language: en, image: ${baseUrl}/banner.png, favicon: ${baseUrl}/icon.png, copyright: All rights reserved 2025, Fuma Nama, }); for (const page of source.getPages()) { feed.addItem({ id: page.url, title: page.data.title, description: page.data.description, link: ${baseUrl}${page.url}, date: new Date(page.data.lastModified), author: [ { name: Fuma, }, ], }); } return feed.rss2(); }套用时需要替换两处内容baseUrl在文档示例中是 Fumadocs 官方域名必须换成你自己站点的对外访问域名它决定 Feed 的id、link、每个条目的link以及image、favicon的完整地址。文档示例遍历的是文档源source条目的时间取自page.data.lastModified如果为博客生成 Feed应改用博客 loader并参考下一节的官方文档站写法。Fumadocs 官方文档站的博客 loader 定义在 lib/source/index.tsxexport const blogLoader loader(blog.toFumadocsSource(), { baseUrl: /blog, });创建服务端路由Next.js 下官方文档/guides/rss.mdx)给出的路由文件是app/rss.xml/route.tsimport { getRSS } from /lib/rss; export const revalidate false; export function GET() { return new Response(getRSS()); }路由的GET返回new Response(getRSS())即feed.rss2()生成的 RSS 2.0 XML 字符串。如果你的 Feed 对应博客目录路由为/blog/rss.xml可以直接参考官方文档站自身的实现 app/(home)/blog/rss.xml/route.ts/blog/rss.xml/route.ts)。该实现把 Feed 逻辑直接写在路由里官方站点把文件放在(home)路由组中路由组名称不影响 URLimport { Feed } from feed; import { blogLoader } from /lib/source; import { NextResponse } from next/server; export const revalidate false; const baseUrl https://fumadocs.dev; export function GET() { const feed new Feed({ title: Fumadocs Blog, id: ${baseUrl}/blog, link: ${baseUrl}/blog, language: en, image: ${baseUrl}/banner.png, favicon: ${baseUrl}/icon.png, copyright: All rights reserved 2025, Fuma Nama, }); for (const page of blogLoader.getPages().sort((a, b) { return new Date(b.data.date).getTime() - new Date(a.data.date).getTime(); })) { feed.addItem({ id: page.url, title: page.data.title, description: page.data.description, link: ${baseUrl}${page.url}, date: new Date(page.data.date), author: [ { name: page.data.author, }, ], }); } return new NextResponse(feed.rss2()); }与上一节文档示例的差异条目按page.data.date从新到旧排序条目时间使用文章的date作者取自每篇文章的page.data.author。baseUrl同样要替换成你自己的域名。其他框架的路由写法可选站点如果不是 Next.js官方文档/guides/rss.mdx)给出了等价写法假设getRSS已按上文实现React Routerapp/routes/rss.tsimport { getRSS } from /lib/rss; export async function loader() { return new Response(getRSS()); }并在app/routes.ts中注册路由import { route, type RouteConfig } from react-router/dev/routes; export default [ route(rss.xml, routes/rss.ts), ] satisfies RouteConfig;Tanstack Startsrc/routes/rss[.]xml.tsimport { createFileRoute } from tanstack/react-router; import { getRSS } from /lib/rss; export const Route createFileRoute(/rss.xml)({ server: { handlers: { GET: async () new Response(getRSS()), }, }, });Wakupages/_api/rss.xml.tsimport { getRSS } from /lib/rss; export function GET() { return new Response(getRSS()); } export async function getConfig() { return { render: static as const, } as const; }在 Metadata 中声明 Feed 地址Next.js 项目可以往 metadata 对象里加alternates把 Feed 的标题和 URL 暴露给浏览器或 RSS 阅读器。官方文档/guides/rss.mdx)的示例import type { Metadata } from next; export const metadata: Metadata { alternates: { types: { application/rssxml: [ { title: Fumadocs Blog, url: https://fumadocs.dev/blog/index.xml, }, ], }, }, };url要指向你自己站点实际的 Feed 路由。Fumadocs 官方文档站在 lib/metadata.ts 中使用的是https://fumadocs.dev/blog/rss.xml与路由app/(home)/blog/rss.xml/route.ts对应文档示例里的/blog/index.xml只是示例地址两者指向各自的真实路由。验证结果请求 Feed 路由对应的 URL官方文档站为/blog/rss.xml按上文路由组文件则为/rss.xml返回的是feed.rss2()生成的 RSS 2.0 XML 字符串。检查 Feed 头部id与link指向博客首页${baseUrl}/blog每个条目的link为${baseUrl}${page.url}拼出的文章完整地址。加上alternates后页面 metadata 中以application/rssxml类型声明了该 Feed 地址。限制与注意博客集合 schema 中date和author为必填字段frontmatter 缺少这两项的文章无法通过集合校验也就进不了 Feed。Feed 条目读取的是页面数据中的title、description、date文档源示例中为lastModified内容随博客文章更新而变化。路由示例中的export const revalidate false;是文档示例自带的配置项在自己的项目中保持一致即可。【免费下载链接】fumadocsThe beautiful flexible React.js docs framework.项目地址: https://gitcode.com/GitHub_Trending/fu/fumadocs创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
