Nuxt Nation カンファレンスが開催されます。11月12日～13日に参加しましょう。
54.8K

nuxt-feedme

ATOM、JSON、RSSをサポートするNuxt Webフレームワーク向けのRSSフィードモジュール
160 ダウンロード
17 スター
v1.0.0
helltraitorhelltraitor

nuxt-feedme

npm version npm downloads License Nuxt

このモジュールは、RSSフィードを実装するための追加機能を提供します。module-feedと非常によく似ていますが、nuxt-contentをサポートしています。

完全にカスタマイズされたフィードが必要な場合は、任意のフィードモジュール（これまたは上記のモジュール）を自由に選択できます。しかし、このモジュールはより柔軟性があります。

機能

  • nuxt-content向けにすぐに使えるように設定済み
  • 両方のフィードの種類に対して、一般的なフックと特殊なフックをサポート
  • 柔軟性：カスタマイズのために設定のデフォルト（フィード、アイテム）、マッピング（アイテム）、またはフックを使用
  • SSRおよびSSGをサポート

nuxt-content向けにすぐに使えるように設定済み

デフォルト設定は次のとおりです。

{
  feeds: {
    '/feed.atom': { revisit: '6h', type: 'atom1', content: true },
    '/feed.xml': { revisit: '6h', type: 'rss2', content: true },
    '/feed.json': { revisit: '6h', type: 'json1', content: true },
  },
  content: {
    item: {
      templateRoots: [true, 'feedme'],
    },
  },
}

一般的なフックと特殊なフック

// project-name/server/plugins/feedme.ts
import type { NitroApp } from 'nitropack'

// Nitro hooks can be set only in nitro plugin
export default (nitroApp: NitroApp) => {
  // General hook: feedme:handle:content:item
  // Specialized hook: feedme:handle:content:item[*]
  //
  // When specialized hook set, general also will be called
  nitroApp.hooks.hook('feedme:handle:content:item[/contentDefaults.xml]', async ({ feed: { insert, invoke, parsed } }) => {
    if (parsed.title === 'First item') {
      // Invoke in case if item was created by another callback
      const maybeItemOptions = invoke()

      // Insert replaces current item configuration
      insert({
        ...maybeItemOptions,
        category: [
          ...maybeItemOptions?.category ?? [],
          { name: 'content hook processed' },
        ],
      })
    }
  })

  // Specialized hook for default feed
  nitroApp.hooks.hook('feedme:handle[/feed.xml]', async ({ context: { event }, feed: { create } }) => {
    // Create also replaces current feed
    create({ id: '', title: `Special feed for '${event.path}' route`, copyright: '' })
  })

  // General hook for default feed
  nitroApp.hooks.hook('feedme:handle', async ({ context: { event }, feed: { create, invoke } }) => {
    invoke() ?? create({ id: '', title: `Default feed for '${event.path}' route`, copyright: '' })
  })
}

マッピング設定

マッピングは、feed アイテムオブジェクトキーを解析されたコンテンツのパスにリンクするために使用されます

{
  item: {
    mapping: [
      // Third item is optional mapping function
      ['date', 'modified', value => value ? new Date(value) : value],
      // When mapping function result is undefined - next variant applied
      ['date', 'created', value => value ? new Date(value) : value],
      // Until the real one value will be set
      ['date', '', () => new Date()],
      // By default mapping is x => x
      ['link', '_path'],
    ],
    // Create default mappings with indicated roots:
    //   [keyof Item /* such as image, id, link */, root + keyof Item]
    //
    // The true value means use empty root:
    //   ['link', 'link']
    //
    // Where any other key means use this as path to value:
    //  ['link', `{root}.link`]
    //
    // Root can be separate by `.` which allows to deep invoking
    templateRoots: [true, 'feedme'],
  }
}

注：日付値はfeedモジュールの特殊なケースであるため、デフォルトではマッピングは日付フィールドに次のマップを提供します：value => value ? new Date(value) : new Date() したがって、日付に独自のエイリアスを提供する場合、マップ関数を提供する必要があります

注：マッピング関数はシリアル化されるため、外部スコープに参照を含めないことが必須です

タグ

タグを使用すると、一致に応じてノード値を置き換えることができます

{
  // Allows to pass optional map function
  tags: [
    // This tags replace first empty symbol if value starts with /
    // Example: /link -> urlBase/link
    [/^(?=\/)/, urlBase],
  ],
}

注：タグは再帰的に適用され、item.field.inner（値）が影響を受けます

クイックセットアップ

  1. nuxt-feedme 依存関係をプロジェクトに追加します

お気に入りのパッケージマネージャーを使用します（yarnを推奨します）

yarn add -D nuxt-feedme

pnpm add -D nuxt-feedme

npm install --save-dev nuxt-feedme
  1. nuxt.config.tsのmodulesセクションにnuxt-feedmeを追加します
export default defineNuxtConfig({
  modules: [
    // After nuxt content
    '@nuxt/content',
    'nuxt-feedme'
  ]
})

これで完了です！ Nuxtアプリでnuxt-feedmeを使用できるようになりました ✨