Nuxt 3 및 Nuxt Content v2로 RSS 피드 만들기

My portfolio website 은 Nuxt 3 및 Nuxt Content v2 으로 구성됩니다. 최근 5개의 블로그 게시물이 포함된 RSS 피드를 사용할 수 있습니다here. 이 기사에서는 Nuxt 웹 사이트에 RSS 피드를 추가하는 방법을 배웁니다.

설정

먼저 create a new Nuxt 3 project . 다음 단계로 애플리케이션에 add the Nuxt Content v2 module 해야 합니다.

마지막으로 RSS 피드에 포함될 일부 콘텐츠를 추가해 보겠습니다.

├── content
|  └── blog
|  └── blog
|  |   ├── article-1.md
|  |   ├── article-2.md
|  |   ├── article-3.md
|  |   ├── article-4.md
|  |   ├── article-5.md

각.md 파일의 구조는 다음과 같습니다.

---
title: 'Article 1'
description: 'Article 1 description'
date: '2022-01-01'
---

Article 5 Content

이 데모의 소스 코드는 GitHub 및 이 StackBlitz 플레이그라운드에서 사용할 수 있습니다.

서버 경로 추가

Nuxt에서 사용할 수 있는 server routes을 활용할 것이며 그렇게 하려면 앱 루트 내에 직접 server/ 디렉토리를 만들어야 합니다.

이 작업이 완료되면 이 안에 routes/ 디렉토리를 만들고 rss.xml.ts 파일을 추가합니다. /rss.xml로 번역됩니다.

export default defineEventHandler(async (event) => {
  const feedString = ''
  event.res.setHeader('content-type', 'text/xml')
  event.res.end(feedString)
})

다음 단계는 블로그 게시물을 쿼리하는 것입니다.

import { serverQueryContent } from '#content/server'

export default defineEventHandler(async (event) => {
  const docs = await serverQueryContent(event).sort({ date: -1 }).where({ _partial: false }).find()
  const blogPosts = docs.filter((doc) => doc?._path?.includes('/blog'))

  const feedString = ''
  event.res.setHeader('content-type', 'text/xml')
  event.res.end(feedString)
})

이제 rss 라이브러리를 추가하여 콘텐츠를 기반으로 RSS XML 문자열을 생성해 보겠습니다.

import { serverQueryContent } from '#content/server'
import RSS from 'rss'

const feed = new RSS({
  title: 'Michael Hoffmann',
  site_url: 'https://mokkapps.de',
  feed_url: `https://mokkapps.de/rss.xml`,
})

const docs = await serverQueryContent(event).sort({ date: -1 }).where({ _partial: false }).find()
const blogPosts = docs.filter((doc) => doc?._path?.includes('/blog'))

for (const doc of blogPosts) {
  feed.item({
    title: doc.title ?? '-',
    url: `https://mokkapps.de${doc._path}`,
    date: doc.date,
    description: doc.description,
  })
}

const feedString = feed.xml({ indent: true })
event.res.setHeader('content-type', 'text/xml')
event.res.end(feedString)

nuxt generate 를 사용하는 경우 서버 경로가 정적 호스팅에서 실행될 수 없으므로 피드를 사전 렌더링할 수 있습니다.
nitro.prerender에서 nuxt.config 옵션을 사용하여 이를 수행할 수 있습니다.

import { defineNuxtConfig } from 'nuxt'

// https://v3.nuxtjs.org/api/configuration/nuxt.config
export default defineNuxtConfig({
  modules: ['@nuxt/content'],
  nitro: {
    prerender: {
      routes: ['/rss.xml'],
    },
  },
  content: {
    // https://content.nuxtjs.org/api/configuration
  },
})

이제 /rss.xml 로 이동하면 생성된 RSS 피드를 얻습니다.

<rss xmlns:dc="http://purl.org/dc/elements/1.1/"
  xmlns:content="http://purl.org/rss/1.0/modules/content/"
  xmlns:atom="http://www.w3.org/2005/Atom" version="2.0">
  <channel>
    <title>
      <![CDATA[ Michael Hoffmann ]]>
    </title>
    <description>
      <![CDATA[ Michael Hoffmann ]]>
    </description>
    <link>https://mokkapps.de</link>
    <generator>RSS for Node</generator>
    <lastBuildDate>Sun, 14 Aug 2022 18:14:16 GMT</lastBuildDate>
    <atom:link href="https://mokkapps.de/rss.xml" rel="self" type="application/rss+xml"/>
    <item>
      <title>
        <![CDATA[ Article 5 ]]>
      </title>
      <description>
        <![CDATA[ Article 5 description ]]>
      </description>
      <link>https://mokkapps.de/blog/article-5</link>
      <guid isPermaLink="true">https://mokkapps.de/blog/article-5</guid>
      <pubDate>Thu, 05 May 2022 00:00:00 GMT</pubDate>
    </item>
    <item>
      <title>
        <![CDATA[ Article 4 ]]>
      </title>
      <description>
        <![CDATA[ Article 4 description ]]>
      </description>
      <link>https://mokkapps.de/blog/article-4</link>
      <guid isPermaLink="true">https://mokkapps.de/blog/article-4</guid>
      <pubDate>Mon, 04 Apr 2022 00:00:00 GMT</pubDate>
    </item>
    <item>
      <title>
        <![CDATA[ Article 3 ]]>
      </title>
      <description>
        <![CDATA[ Article 3 description ]]>
      </description>
      <link>https://mokkapps.de/blog/article-3</link>
      <guid isPermaLink="true">https://mokkapps.de/blog/article-3</guid>
      <pubDate>Thu, 03 Mar 2022 00:00:00 GMT</pubDate>
    </item>
    <item>
      <title>
        <![CDATA[ Article 2 ]]>
      </title>
      <description>
        <![CDATA[ Article 2 description ]]>
      </description>
      <link>https://mokkapps.de/blog/article-2</link>
      <guid isPermaLink="true">https://mokkapps.de/blog/article-2</guid>
      <pubDate>Wed, 02 Feb 2022 00:00:00 GMT</pubDate>
    </item>
    <item>
      <title>
        <![CDATA[ Article 1 ]]>
      </title>
      <description>
        <![CDATA[ Article 1 description ]]>
      </description>
      <link>https://mokkapps.de/blog/article-1</link>
      <guid isPermaLink="true">https://mokkapps.de/blog/article-1</guid>
      <pubDate>Sat, 01 Jan 2022 00:00:00 GMT</pubDate>
    </item>
  </channel>
</rss>

이 기사가 마음에 드셨다면 저를 팔로우하여 새 블로그 게시물과 더 많은 콘텐츠에 대한 알림을 받으세요.

또는 (또는 추가로) subscribe to my newsletter .