[ 目次 ]

• はじめに
• @nuxtjs/feedインストール
• nuxt.config.jsに設定を追加
• generateしてatom.xmlを確認
• 最後に

はじめに

こんにちは、香港に住んでいるWEBデベロッパーのなかむ（@nakanakamu0828）です。

今回はNuxt.jsで作られている本ブログにatom.xmlを作成し、atom形式のRSS Feedを提供できるようにします。@nuxtjs/feed の機能を利用して実装していきたいと思います。

nuxt-community/feed-module

@nuxtjs/feedインストール

■ npmを利用する場合

$ npm install @nuxtjs/feed --save

■ yarnを利用する場合

$ yarn add @nuxtjs/feed

nuxt.config.jsに設定を追加

modulesに読み込みの設定を追加し、feedの内容を実装します。

modules: [
   [
     ・・・
     '@nuxtjs/feed',
     ・・・
   ]
],

feed: [
  {
    path: '/atom.xml',
    async create (feed) {
      feed.options = {
        title: 'Nakamu🇭🇰Blog',
        link: `${process.env.BASE_URL}/atom.xml`,
        description: "This is Nakamu's personal feed!"
      }

      const posts = await client.getEntries({
        'content_type': process.env.CTF_BLOG_POST_TYPE_ID
      })

      posts.items.forEach(post => {
        feed.addItem({
          title: post.fields.title,
          id: post.fields.slug,
          link: `${process.env.BASE_URL}/posts/${post.fields.slug}`,
          description: post.fields.description,
          content: post.fields.description,
          date: new Date(post.fields.publishDate),
          image: post.fields.heroImage.fields.file.url
        })
      })

      feed.addCategory('Tech')

      feed.addContributor({
        name: 'Nakamu',
        email: 'yuuki.nakamura.0828@gmail.com',
        link: process.env.BASE_URL
      })
    },
    cacheTime: 1000 * 60 * 15,
    type: 'atom1'
  }
],

generateしてatom.xmlを確認

npm run generate or yarn generate を利用して静的ファイルを生成してください。atom.xmlが生成されます。
意図した形のatom.xmlが生成しているか中身を確認してみましょう。

問題なければ本番サーバーにデプロイします。

最後に

今回は、RSS Feed の導入方法についてまとめました。
@nuxtjs/feedのインストールと設定だけで実現できとても簡単です！