Nuxt Content で RSS フィードを配信する

環境

Node.js - 18.17.1
pnpm - 8.7.1
Nuxt - 3.7.0
Nuxt Content - 2.8.2

web/
　├ content/
　│　├ blog/
　│　│　├ article01.md
　│　│　├ article02.md
　│　│　└ index.md
　│　└ index.md
　├ server/
　│　└ tsconfig.json
　├ app.vue
　├ nuxt.config.ts
　├ package.json
　├ pnpm-lock.yaml
　└ tsconfig.json

サーバルートを追加する

Sitemap · Nuxt Content

export default defineEventHandler((event) => {
  return {
    hello: 'world'
  }
})

RSS フィードを生成する

feed - npm

import { Feed } from 'feed'

export default defineEventHandler((event) => {
  const feed = new Feed({
    title: 'ウェブサイトのタイトル',
    description: 'ウェブサイトの説明',
    id: 'https://example.com/',
    link: 'https://example.com/blog/',
    language: 'ja',
    image: 'https://example.com/image.png',
    copyright: 'コピーライト',
  })

  // RSS 2.0 形式で出力する
  return feed.rss2()
})

export default defineNuxtConfig({
  modules: ['@nuxt/content'],
  routeRules: {
    '/feed.xml': {
      headers: { 'content-type': 'application/rss+xml; charset=UTF-8' },
    }
  },
  ...
})

import type { MarkdownParsedContent } from '@nuxt/content/dist/runtime/types'
import { Feed } from 'feed'

export default defineEventHandler((event) => {
  ...
  const articles = await serverQueryContent<MarkdownParsedContent>(event, 'blog')
    .limit(10)
    .find()

  articles
    // 拡張子が「.md」かつ内容が空ではないものを絞り込み
    .filter((article) => article?._extension === 'md' && !article._empty)
    .forEach((article) => {
      const url = `https://example.com${article._path}/`
      // ブログ記事を追加
      feed.addItem({
        title: article.title,
        id: url,
        link: url,
        description: article.description,
        date: new Date(Date.parse(article.created)), // YAML Front Matter の created
      })
    })
  ...
}

記事本文の内容を含める

import type { MarkdownParsedContent } from '@nuxt/content/dist/runtime/types'

export const generateContentFromAst = (
  children: MarkdownParsedContent['body']['children']
): string => {
  let text = ''

  for (const node of children) {
    let startTag = ''
    let endTag = ''

    if (node.type === 'element' && node?.tag) {
      if (['h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'p', 'ul', 'ol', 'li', 'blockquate', 'em', 'strong', 'del', 'pre', 'code'].includes(node.tag)) {
        // <p>テキスト</p> のようにテキストの前後にタグがついてるもの
        startTag = `<${node.tag}>`
        endTag = `</${node.tag}>`
      } else if (['hr', 'br'].includes(node.tag)) {
        // <hr /> のようにタグ単体で完結するもの
        text += `<${node.tag} />`
      } else if (['a'].includes(node.tag)) {
        // リンク
        const href = (node?.props?.href as string) || ''
        startTag = `<${node.tag} href="${href}">`
        endTag = `</${node.tag}>`
      } else if (['img'].includes(node.tag)) {
        // 画像
        const src = (node?.props?.src as string) || ''
        const alt = (node?.props?.alt as string) || ''
        text += `<${node.tag} src="${src}" alt="${alt}" />`
      }
    }

    if (node.type === 'text') {
      text += `${(node?.value || '').trim()}`
    }

    if (node?.children) {
      text += `${startTag}${generateContentFromAst(node.children).trim()}${endTag}`
    }
  }

  return text
}

export default defineEventHandler((event) => {
  ...
      feed.addItem({
        title: article.title,
        id: url,
        link: url,
        description: article.description,
        content: generateContentFromAst(article.body.children), // 本文の内容
        date: new Date(Date.parse(article.created)),
      })
  ...
}

SSG の場合の設定を追加する

export default defineNuxtConfig({
  modules: ['@nuxt/content'],
  nitro: {
    prerender: {
      routes: ['/feed.xml'],
    },
  },
  routeRules: {
    '/feed.xml': {
      headers: { 'content-type': 'application/rss+xml; charset=UTF-8' },
    }
  },
  ...
})

環境

サーバルートを追加する

RSS フィードを生成する

記事本文の内容を含める

SSG の場合の設定を追加する

参考