Nuxt-Content RSS 訂閱功能實現

在當前的數字內容生態中，儘管社交媒體和即時通訊平台盛行，RSS（Really Simple Syndication）訂閱功能仍然是一個不可忽視的重要工具。它能夠有效地幫助讀者及時獲取最新內容，提高用戶體驗，並增強內容的傳播效率。本文將詳細介紹如何在 Nuxt 3 項目中實現 RSS 訂閱功能，以提升您博客的可訪問性和影響力。

RSS 的重要性#

在深入技術實現之前，我們需要充分認識 RSS 的價值。
RSS 允許讀者通過訂閱工具自動獲取網站更新，無需頻繁手動訪問網站。
這種機制不僅顯著提高了用戶體驗，也大大增加了內容的傳播效率。
對於博客作者而言，RSS 是一種維持與讀者長期穩定聯繫的有效方式，有助於建立忠實的讀者群體。

實現步驟#

1. 環境準備#

首先，我們需要在 Nuxt3+Nuxt Content 項目中安裝必要的依賴。打開終端，執行以下命令：

pnpm add rss
pnpm add -D @types/rss

2. 創建 RSS Feed 生成器#

在 server/routes/ 目錄下創建一個名為 feed.xml.ts 的文件。這個文件將負責生成 RSS feed

import { serverQueryContent } from "#content/server";
import RSS from "rss";

export default defineEventHandler(async (event) => {
  // 查詢內容
  const docs = await serverQueryContent(event)
    .only(["title", "description", "date", "_path", "body"])
    .sort({ date: -1 })
    .where({ _partial: false })
    .find();

  // 過濾博客文章
  const blogPosts = docs.filter((doc) => doc?._path?.includes("/blog"));

  const config = useRuntimeConfig();
  const siteUrl = config.public.baseUrl;

  // 創建 RSS feed 實例
  const feed = new RSS({
    title: "Your Blog Title",
    site_url: siteUrl,
    feed_url: `${siteUrl}/feed.xml`,
  });

  // 添加文章到 feed
  for (const doc of blogPosts) {
    const extractedContent = extractContent(doc.body);
    feed.item({
      title: doc.title ?? "-",
      url: `${siteUrl}${doc._path}`,
      date: doc.date,
      description: doc.description,
      custom_elements: [{ "content:encoded": extractedContent }],
    });
  }

  // 生成 RSS XML
  const feedString = feed.xml();

  // 設置響應頭
  setResponseHeader(event, "content-type", "text/xml");

  return feedString;
});

3. 實現內容提取函數#

在同一文件中，添加以下 extractContent 函數，用於從文章內容中提取並保留 HTML 標籤：

export function extractContent(
  node: MarkdownRoot | MarkdownNode | MarkdownNode[] | null
): string {
  if (!node) return "";
  if (typeof node === "string") {
    return node;
  }
  if (Array.isArray(node)) {
    return node.map(extractContent).join("");
  }
  if (typeof node === "object" && node !== null) {
    if (node.type === "text" && typeof node.value === "string") {
      return node.value;
    }
    if ("tag" in node && typeof node.tag === "string") {
      // 忽略 style 標籤
      if (node.tag === "style") {
        return "";
      }

      let attributes = "";
      if (node.props && node.tag !== "pre" && node.tag !== "code") {
        attributes = Object.entries(node.props)
          .filter(([key]) => !["style"].includes(key))
          .map(([key, value]) => `${key}="${value}"`)
          .join(" ");

        if (attributes) {
          attributes = ` ${attributes}`;
        }
      }

      const content = Array.isArray(node.children)
        ? extractContent(node.children)
        : "";

      return `<${node.tag}${attributes}>${content}</${node.tag}>`;
    }
    if (Array.isArray(node.children)) {
      return extractContent(node.children);
    }
  }
  return "";
}

4. 配置 Nuxt 3#

確保在 nuxt.config.ts 文件中正確設置了 baseUrl：
並且設置預渲染路由，以便在部署時生成 RSS feed。

export default defineNuxtConfig({
  runtimeConfig: {
    public: {
      baseUrl: process.env.BASE_URL || 'http://localhost:3000'
    }
  },
  nitro: {
     prerender: {
      routes: ["/feed.xml"],
    },
  },
  // 其他配置...
})

5. 添加 RSS 連結#

可以在導航欄添加一個連結，用於訂閱 RSS

<NuxtLink to="/feed.xml" />

結論#

通過以上步驟，我們成功在 Nuxt 3 項目中實現了 RSS 訂閱功能。這不僅提高了博客的可訪問性，也為讀者提供了更便捷的內容獲取方式。在實際應用中，您可能需要根據具體需求進行進一步的優化和定制，例如添加更多的 feed 元數據、實現緩存機制以提高性能等。
實現 RSS 功能是提升博客影響力的重要一步。它不僅能夠幫助您維持與現有讀者的聯繫，還能吸引新的訂閱者，從而擴大您的受眾群體。在當前信息過載的時代，為讀者提供一種高效、可控的內容獲取方式，無疑是提升用戶體驗和忠誠度的有效策略。