このページとあなたの好きなAIアシスタントを使ってドキュメントを要約します
このページのコンテンツはAIを使用して翻訳されました。
英語の元のコンテンツの最新バージョンを見るこのドキュメントを改善するアイデアがある場合は、GitHubでプルリクエストを送信することで自由に貢献してください。
ドキュメントへのGitHubリンクドキュメントのMarkdownをクリップボードにコピー
import PackageManagerTabs from '/components/tabs/PackageManagerTabs.astro'
import Since from '/components/Since.astro'
Astroはブログやその他のコンテンツウェブサイト向けに、RSSフィードの高速な自動生成をサポートしています。RSSフィードにより、ユーザーはコンテンツを簡単に購読できます。
@astrojs/rssの準備
@astrojs/rssパッケージは、APIエンドポイントを利用したRSS生成のヘルパーを提供します。静的ビルドとSSRアダプターを利用したオンデマンド生成の両方に対応しています。
- お好きなパッケージマネージャーで@astrojs/rssをインストールします。
:::tip プロジェクトのastro.configにsiteを設定していることを確認してください。これはRSSフィード内のリンクを生成するために利用されます。 :::
- 任意の名前でsrc/pages/に.xml.js拡張子のファイルを作成します。これはフィードの出力URLとして利用されます。一般的なRSSフィードのURL名はfeed.xmlやrss.xmlです。
以下のsrc/pages/rss.xml.jsファイルの例では、site/rss.xmlにRSSフィードを生成します。
- @astrojs/rssパッケージからrss()ヘルパーを.xml.jsファイルにインポートし、以下のパラメーターでrss()を呼び出した結果を返す関数をエクスポートします。
コードをクリップボードにコピー
import rss from '@astrojs/rss';export function GET(context) { return rss({ // 出力されるXMLの`<title>`フィールド title: 'Buzz’s Blog', // 出力されるXMLの`<description>`フィールド description: 'A humble Astronaut’s guide to the stars', // エンドポイントのコンテキストからプロジェクトの"site"を取得 // https://docs.astro.build/ja/reference/api-reference/#contextsite site: context.site, // 出力されるXMLの<item>の // コンテンツコレクションやglobインポートを利用した例については「`items`の生成」セクションをご覧ください items: [], // (任意) カスタムXMLを挿入 customData: `<language>en-us</language>`, });}itemsの生成
itemsフィールドは、RSSフィードのオブジェクトのリストを受け入れます。各オブジェクトには、link、title、pubDateの3つの必須フィールドがあります。description（短い抜粋）、content（記事の全文）、ブログ記事の他のフロントマタープロパティなど追加のデータのためのcustomDataフィールド、という3つの値も任意で含められます。
コンテンツコレクションのスキーマからや、src/pages/内のブログ記事に対してglobインポートを利用することで、この配列を生成できます。
コンテンツコレクションの使用
コンテンツコレクションで管理されているページのRSSフィードを作成するには、getCollection()関数を利用してアイテムのリストを取得します。
コードをクリップボードにコピー
import rss from '@astrojs/rss';import { getCollection } from 'astro:content';export async function GET(context) { const blog = await getCollection('blog'); return rss({ title: 'Buzz’s Blog', description: 'A humble Astronaut’s guide to the stars', site: context.site, items: blog.map((post) => ({ title: post.data.title, pubDate: post.data.pubDate, description: post.data.description, customData: post.data.customData, // 記事の`slug`からRSSリンクを生成 // この例では、すべての記事が`/blog/[slug]`ルートでレンダリングされていると仮定しています link: `/blog/${post.slug}/`, })), });}オプション：期待されるRSSプロパティを強制するために、既存のブログコレクションスキーマを置き換えます。
すべてのブログエントリが有効なRSSフィードアイテムを生成することを保証するために、スキーマの個別のプロパティを定義する代わりに、rssSchemaをインポートして適用できます。
コードをクリップボードにコピー
import { defineCollection } from 'astro:content';import { rssSchema } from '@astrojs/rss';const blog = defineCollection({ schema: rssSchema,});export const collections = { blog };globインポートの使用
src/pages/内のドキュメントからRSSフィードを作成するには、pagesGlobToRssItems()ヘルパーを利用します。これはimport.meta.globの結果を入力とし、有効なRSSフィードアイテムの配列を出力します（含めるページを指定するためには、globパターンの書き方についてを確認してください）。
:::caution この関数は、必要なフィードプロパティが各ドキュメントのフロントマターに存在することを前提としていますが、その検証はおこないません。エラーが発生した場合は、各ページのフロントマターを手動で確認してください。 :::
コードをクリップボードにコピー
import rss, { pagesGlobToRssItems } from '@astrojs/rss';export async function GET(context) { return rss({ title: 'Buzz’s Blog', description: 'A humble Astronaut’s guide to the stars', site: context.site, items: await pagesGlobToRssItems( import.meta.glob('./blog/*.{md,mdx}'), ), });}:::note[古いバージョンを利用していますか？] v2.1.0より前のバージョンの@astrojs/rssでは、pagesGlobToRssItems()ラッパーなしでglob結果をitemsにそのまま渡します。
コードをクリップボードにコピー
items: import.meta.glob('./blog/*.{md,mdx}'),:::
記事の全文を含める
contentキーには、記事の全文をHTMLとして含めます。これにより、RSSフィードリーダーは記事全文を利用できるようになります。
:::tip sanitize-htmlなどのパッケージを利用すると、コンテンツが適切にサニタイズ、エスケープ、エンコードされることを保証できます。 :::
コンテンツコレクションを利用する場合は、markdown-itなどの標準的なMarkdownパーサーを利用して記事のbodyをレンダリングし、その結果をサニタイズします。
コードをクリップボードにコピー
import rss from '@astrojs/rss';import { getCollection } from 'astro:content';import sanitizeHtml from 'sanitize-html';import MarkdownIt from 'markdown-it';const parser = new MarkdownIt();export async function GET(context) { const blog = await getCollection('blog'); return rss({ title: 'Buzz’s Blog', description: 'A humble Astronaut’s guide to the stars', site: context.site, items: blog.map((post) => ({ link: `/blog/${post.slug}/`, // 注: MDXファイルのコンポーネントやJSX式は処理されません。 content: sanitizeHtml(parser.render(post.body)), ...post.data, })), });}Markdownでglobインポートを利用する場合は、compiledContent()ヘルパーを利用してレンダリングされたHTMLを取得しサニタイズできます。この機能はMDXファイルではサポートされていないことに注意してください。
コードをクリップボードにコピー
import rss from '@astrojs/rss';import sanitizeHtml from 'sanitize-html';export function GET(context) { const postImportResult = import.meta.glob('../posts/**/*.md', { eager: true }); const posts = Object.values(postImportResult); return rss({ title: 'Buzz’s Blog', description: 'A humble Astronaut’s guide to the stars', site: context.site, items: posts.map((post) => ({ link: post.url, content: sanitizeHtml(post.compiledContent()), ...post.frontmatter, })), });}スタイルシートの追加
ブラウザでファイルを見たときのユーザー体験をよくするために、RSSフィードにスタイルを追加しましょう。
rss関数のstylesheetオプションにスタイルシートの絶対パスを指定してください。
コードをクリップボードにコピー
rss({ // 例. "public/rss/styles.xsl"からスタイルシートを利用します stylesheet: '/rss/styles.xsl', // ...});:::tip スタイルシートを自分で作成したくない場合は、Pretty Feed v3のデフォルトスタイルシートなどの既製のスタイルシートも利用できます。GitHubからスタイルシートをダウンロードし、プロジェクトのpublic/ディレクトリに保存してください。 :::
次のステップ
ブラウザによりyour-domain.com/rss.xmlのフィードにアクセスし、各記事のデータが表示されることを確認できたら、サイトでフィードを宣伝してみましょう。サイトに標準のRSSアイコンを追加すると、読者は自分のフィードリーダーであなたの記事を購読できることに気付けます。