nuxt-module-feed

Feed 模組讓所有人都能擁有 RSS、Atom 和 JSON。

✨ 發行說明

功能

Nuxt 3 準備就緒
三種不同的 Feed 類型（RSS 2.0、ATOM 1.0 和 JSON 1.0）
完全可自訂
多個 Feed
適用於所有模式 (SSR, SSG)

快速設定

將 nuxt-module-feed 依賴項添加到您的專案

# Using pnpm
pnpm add -D nuxt-module-feed

# Using yarn
yarn add --dev nuxt-module-feed

# Using npm
npm install --save-dev nuxt-module-feed

將 nuxt-module-feed 添加到 nuxt.config.ts 的 modules 部分

export default defineNuxtConfig({
  modules: ["nuxt-module-feed"],
});

就是這樣！您現在可以在您的 Nuxt 應用程式中使用 nuxt-module-feed 了✨

配置

您可以在 nuxt.config.ts 中將配置傳遞給模組，如下所示

export default {
  feed: {
    sources: [
      {
        path: "/feed.xml", // The route to your feed.
        type: "rss2", // Can be: rss2, atom1, json1
        cacheTime: 60 * 15, // How long should the feed be cached
      },
      {
        path: "/feed2.xml", // The route to your feed.
        type: "rss2", // Can be: rss2, atom1, json1
        cacheTime: 60 * 15, // How long should the feed be cached
      }
      ...
    ]
  },
};

Nitro Hooks

`feed:generate`

類型： async (ctx: { feed: Feed, options: SourceOptions }) => void | Promise<void>

此 hook 允許您在將 feed 發送到客戶端之前在運行時修改 feed。

Feed 的建立基於 feed 套件。請使用它作為參考，並進一步查閱修改傳遞給 create 函數的 feed 物件的文件。

注意：它適用於 SSG 和預渲染頁面。

import type { NitroCtx, Feed } from "nuxt-module-feed";

export default defineNitroPlugin((nitroApp) => {
  nitroApp.hooks.hook("feed:generate", async ({ feed, options }: NitroCtx) => {
    switch (options.path) {
      case "/feed.xml": {
        createTestFeed(feed);
        break;
      }
      case "/feed2.xml": {
        createTestFeed(feed);
        break;
      }
      ...
    }
  });

  function createTestFeed(feed: Feed) {
    feed.options = {
      id: "Test Feed",
      title: "Test Feed",
      copyright: "Test company",
    };

    type Post = {
      title: string;
      url: string;
      description: string;
      content: string;
      date: Date;
      image: string;
    };

    const posts: Post[] = [
      {
        title: "Post 1",
        url: "https://example.com/post-1",
        description: "This is the first post",
        content: "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
        date: new Date("2022-01-01"),
        image: "https://example.com/images/post1.jpg",
      },
      {
        title: "Post 2",
        url: "https://example.com/post-2",
        description: "This is the second post",
        content:
          "Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
        date: new Date("2022-01-05"),
        image: "https://example.com/images/post2.jpg",
      },
      {
        title: "Post 3",
        url: "https://example.com/post-3",
        description: "This is the third post",
        content:
          "Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.",
        date: new Date("2022-01-10"),
        image: "https://example.com/images/post3.jpg",
      },
      {
        title: "Post 4",
        url: "https://example.com/post-4",
        description: "This is the fourth post",
        content:
          "Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.",
        date: new Date("2022-01-15"),
        image: "https://example.com/images/post4.jpg",
      },
      {
        title: "Post 5",
        url: "https://example.com/post-5",
        description: "This is the fifth post",
        content:
          "Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.",
        date: new Date("2022-01-20"),
        image: "https://example.com/images/post5.jpg",
      },
    ];

    posts.forEach((post) => {
      feed.addItem({
        title: post.title,
        id: post.url,
        link: post.url,
        description: post.description,
        content: post.content,
        date: post.date,
      });
    });

    feed.addCategory("Nuxt.js");

    feed.addContributor({
      name: "Miha Sedej",
      email: "sedej.miha@gmail.com",
      link: "https://tresko.dev/",
    });
  }
});

這是一個範例。

開發

# Install dependencies
pnpm install

# Generate type stubs
pnpm run dev:prepare

# Develop with the playground
pnpm run dev

# Build the playground
pnpm run dev:build

# Run ESLint
pnpm run lint

# Run Vitest
pnpm run test
pnpm run test:watch

# Release new version
pnpm run release