什么是 RSS 提要？
RSS feed 是一个 XML 文档，允许用户订阅网站更新。它是一种 XML 文档，可以轻松解析，以检索最新发布的文章、网站作者以及更多信息（如果您想了解更多信息，请参阅此处的维基百科条目）。
有很多应用程序允许您订阅 RSS 源，甚至在更新时收到通知。
尽管 XML 格式的 RSS 是使用 Web 提要的最知名的方式，但其他格式也受到广泛支持：
-
JSON 提要 -
原子提要
在本文中，我将仅讨论 RSS - 并简要提及 atom - 但我所谈论的所有内容都适用于它们所有。
RSS Feed 的结构
让我们看一下 RSS 提要是什么样子的（你可以在这里找到我的）——特别是我的网站的 RSS 提要
<rss version="2.0">
<channel>
<title>Matteo's Log</title>
<link>https://www.matteogassend.com</link>
<generator>Nuxt & Feed</generator>
<language>en</language>
<atom:link href="https://www.matteogassend.com/rss.xml" rel="self" type="application/rss+xml"/>
<item>
<title>T3Chat Cloneathon Postmortem</title>
<link>
https://www.matteogassend.com/articles/t3-cloneathon-postmortem
</link>
<guid isPermaLink="false">t3-cloneathon-postmortem</guid>
<pubDate>Mon, 14 Jul 2025 00:00:00 GMT</pubDate>
<description>
I participated in the T3Chat cloneathon; here's how it went
</description>
<content:encoded>
...
</content:encoded>
</item>
</channel>
</rss>首先，我们用 main 标签指定此 XML 文档是一个 RSS 源，并指明其实现版本（在本例中为 2.0 版本）。
然后，我们进入channel定义；这是实际要使用的 RSS 源，我们可以在其中找到其名称、描述、语言等信息。
接下来，对于我们想要添加到channel中的每个元素，我们都有一个item标签。每个 item 包含名称、描述、发布日期、唯一 ID 以及可选的原始内容（在本例中为博客文章）。
如何在 Nuxt 中构建
幸运的是，Nuxt 路由可以是 Vue 组件，也可以是服务器端点——你也可以使用 tsx，但我们暂时先不讨论这个。服务器（或 API）端点由 Nitro 处理，并使用经典的浏览器请求与响应机制，这意味着我们只需返回一个带有正确 header 的 xml 文档即可！让我们看看具体操作方法。
声明 API 路由
让我们首先声明 Nitro 路线；在本例中，我将使其与路径匹配/rss.xml，这意味着我将在此处创建一个文件：/server/routes/rss.xml.ts并用基本的 Nitro 处理程序填充它：
export default defineEventHandler(async (event) => {
//generate the feed
...
//return the actual feed data here
return {}
})RSS Feed 进入游戏
我们可以手动编写 XML 文档，但何必呢？有一个完美的包可以实现这一点：feed。它允许我们以编程方式构建 feed 并以不同的格式返回。让我们看看如何将它与 Nitro 集成。
首先，让我们安装依赖项：
npm install feed让我们开始创建 feed 本身；我们将首先设置 feed 所需的所有基本信息，然后将其他项目留待以后再设置：
const feed = new Feed({
title: "Matteo's Log",
description: "All the articles from matteogassend.com",
id: <a unique id>,
link: <url of your website>,
language: "en",
copyright: `All rights reserved ${new Date().getFullYear()}, Matteo Gassend`,
updated: new Date(),
generator: "Nuxt & Feed",
feedLinks: {
rss: `<url of your website>/rss.xml`,
},
author: {
name: <name of the author>,
},
});只需这样，我们就可以生成一个 XML 文档，并将其与上面创建的端点一起返回。我们来做吧
export default defineEventHandler(async (event) => {
... // the feed is here
return feed.rss2()
})在拥有功能齐全的 RSS 源之前，我们只需要另外两件事：
-
告知浏览器我们发送的数据类型 -
在 feed 中插入实际项目
第一步很简单，所以我们先把它搞定；在返回生成的 feed 之前，我们先设置一下content-typeheader。这个 header 告诉浏览器如何理解我们返回的内容；你可以看到它主要在返回 JSON 数据时使用——比如在创建 API 时。以下是我们在 Nitro 中如何设置：
setResponseHeader(event, "content-type", "text/xml");这告诉浏览器我们正在发回一个 xml 文档。
将项目添加到 feed
现在我们已经了解了基础知识，接下来让我们开始向 feed 添加实际项目。在我的用例中，我需要从 Nuxt Content 集合中获取项目并将其添加到 feed 中。那么，我们就这样做吧：
const articles = await queryCollection(event, "articles")
.order("publishDate", "DESC")
.all();如果您没有集合，就假装这是一个对象数组。
之后，它就像循环遍历数据数组并addItem在 feed 实例上调用方法一样简单：
articles.forEach((article) => {
feed.addItem({
title: article.title,
id: article.slug,
description: article.summary,
date: new Date(article.publishDate),
link: `${BASE_URL}/articles/${article.slug}`,
content: article.rawbody,
});
});这就是你在 Nuxt 应用中生成 RSS feed 所需要做的全部工作！我还添加了一个逻辑完全相同的 atom feed —— 只需将rss2call 替换为atom1即可！
将 Feed 添加到网站
一旦你有了服务器路由，你只需要将它添加到你的页面，大多数 RSS 阅读器都应该能够获取它。假设我们的 RSS 订阅位于/rss.xml：如果是这样，我们需要link在页面的 中添加以下标签head：
<link rel="alternate" type="application/rss+xml" title="Your feed's title" href=`${BASE_URL}/rss.xml`如果您正在使用unhead，那么也可以在 useHead 可组合钩子中使用类似如下的方式完成此操作：
useHead({
link: [
{
rel: "alternate",
type: "application/rss+xml",
title: "Matteo's Log",
href: "/rss.xml",
},
{
rel: "alternate",
type: "application/atom+xml",
title: "Matteo's Log",
href: "/atom",
},
],
});