RSSフィードの導入

本サイトにRSSフィード - https://kumano-te.com/feed.xmlを導入しました。

nuxt-community/feed-moduleモジュールを導入することで簡単に実装できました。

こちらの記事で導入したsitemapの実装とかなり似ていたので、素早く実装できました。

moduleのインストール

yarn add @nuxtjs/feed

実装

• nuxt.config.js に以下を追加しました。

  modules: [
    // ...省略
    '@nuxtjs/feed' // この行を追加
  ],

  // 以下のプロパティをごっそり追加
  feed: [
    {
      path: '/feed.xml',
      async create(feed) {
        feed.options = {
          title: process.env.APP_NAME,
          link: `${process.env.BASE_URL}/feed.xml`,
          description: process.env.npm_package_description,
          favicon: `${process.env.BASE_URL}/favicon.ico`,
          image: `${process.env.BASE_URL}/icon.png`
        }
        const apiBaseUrl = process.env.API_URL
        const parseDateTime = (str) => {
          // str in ISO 8601 format, like: 2008-09-15T15:53:16.619579.
          const year = Number(str.substring(0, 4))
          const month = Number(str.substring(5, 7)) - 1
          const date = Number(str.substring(8, 10))
          const hours = Number(str.substring(11, 13))
          const minutes = Number(str.substring(14, 16))
          const seconds = Number(str.substring(17, 19))
          const ms = Number(str.substring(20))
          return new Date(year, month, date, hours, minutes, seconds, ms)
        }
        const activities = await axios.get(`${apiBaseUrl}/activities/search`, {
          params: {
            type: 'latest',
            skip: 0,
            limit: -1
          }
        })
        if (activities && activities.data && activities.data.list) {
          activities.data.list.forEach((activity) => {
            feed.addItem({
              title: activity.title,
              id: activity.slug,
              link: `${process.env.BASE_URL}/activities/${activity.slug}`,
              description: activity.subtitle,
              content: activity.content,
              date: parseDateTime(activity.published_at),
              image: activity.avatar_image_url
            })
          })
        }
        const chapters = await axios.get(`${apiBaseUrl}/chapters/`, {
          params: {
            type: 'latest',
            skip: 0,
            limit: -1
          }
        })
        if (chapters && chapters.data) {
          chapters.data.forEach((chapter) => {
            feed.addItem({
              title: chapter.title,
              id: chapter.slug,
              link: `${process.env.BASE_URL}/series/${chapter.series_slug}/${chapter.slug}`,
              description: chapter.subtitle,
              content: chapter.content,
              date: parseDateTime(chapter.published_at),
              image: chapter.avatar_image_url
            })
          })
        }
        feed.addCategory('blog')
        feed.addContributor({
          name: 'Hiroki Tanaka',
          email: '[email protected]',
          link: process.env.BASE_URL
        })
      },
      cacheTime: 1000 * 60 * 15,
      type: 'atom1'
    }
  ],

• feed.options.faviconやfeed.options.imageを設定しておくとRSSリーダでの見た目がよくてよかったです。
• typeをatom1に指定しました rss2やjson1なども指定できるようでした。

RSSフィードの確認

個人的にRSSアプリとしてfeedlyを使っています。かなりオススメです。
githubのリリース情報などの収集に主に使っています。

今回は、追加したフィードのURLhttps://kumano-te.com/feed.xmlをfeedlyに読み込ませて確認しました。

↓feedlyでの確認キャプチャ↓

問題なく読むことができました。

もしよろしければ、RSSの登録を宜しくお願いします。🙇‍♂️

以上です。