[gridsome] add rss feed

August 23, 2019 — 2 min

[gridsome] add rss feed

gridsomeにrss feedを追加する。

plugins

公式サイトには、以下の2つが紹介されている。利用実績はrssの方が多いが、実際にはfeedの方がいろいろ機能がたかそう。

  • 複数のGraphQL Collectionに対応
  • rssのほかatom / json出力にも対応

gridsome-plugin-feedを中心に紹介する。

gridsome-plugin-rss gridsome-plugin-feed

install

yarn add gridsome-plugin-feed or npm install gridsome-plugin-feed

設定

gridsome.config.jsに設定する。

module.exports = {
  plugins: [
    {
      use: 'gridsome-plugin-feed',
      options: {
        // Required: array of `GraphQL` type names you wish to include
        contentTypes: ['BlogPost', 'NewsPost'],
        // Optional: any properties you wish to set for `Feed()` constructor
        // See https://www.npmjs.com/package/feed#example for available properties
        feedOptions: {
          title: 'My Awesome Blog Feed',
          description: 'Best blog feed evah.'
        },
        // === All options after this point show their default values ===
        // Optional; opt into which feeds you wish to generate, and set their output path
        rss: {
          enabled: true,
          output: '/feed.xml'
        },
        atom: {
          enabled: false,
          output: '/feed.atom'
        },
        json: {
          enabled: false,
          output: '/feed.json'
        },
        // Optional: the maximum number of items to include in your feed
        maxItems: 25,
        // Optional: an array of properties passed to `Feed.addItem()` that will be parsed for
        // URLs in HTML (ensures that URLs are full `http` URLs rather than site-relative).
        // To disable this functionality, set to `null`.
        htmlFields: ['description', 'content'],
        // Optional: if you wish to enforce trailing slashes for site URLs
        enforceTrailingSlashes: false,
        // Optional: a method that accepts a node and returns true (include) or false (exclude)
        // Example: only past-dated nodes: `filterNodes: (node) => node.date <= new Date()`
        filterNodes: (node) => true,
        // Optional: a method that accepts a node and returns an object for `Feed.addItem()`
        // See https://www.npmjs.com/package/feed#example for available properties
        // NOTE: `date` field MUST be a Javascript `Date` object
        nodeToFeedItem: (node) => ({
          title: node.title,
          date: node.date || node.fields.date,
          content: node.content
        })
      }
    }
  ]
}

参考情報