コンテンツにスキップ

RSSフィードの追加

Astroはブログやその他のコンテンツウェブサイト向けに、RSSフィードの高速な自動生成をサポートしています。RSSフィードにより、ユーザーはコンテンツを簡単に購読できます。

@astrojs/rssパッケージは、APIエンドポイントを利用したRSS生成のヘルパーを提供します。静的ビルドとSSRアダプターを利用したオンデマンド生成の両方に対応しています。

  1. お好きなパッケージマネージャーで@astrojs/rssをインストールします。
Terminal window
npm install @astrojs/rss
  1. 任意の名前でsrc/pages/.xml.js拡張子のファイルを作成します。これはフィードの出力URLとして利用されます。一般的なRSSフィードのURL名はfeed.xmlrss.xmlです。

以下のsrc/pages/rss.xml.jsファイルの例では、site/rss.xmlにRSSフィードを生成します。

  1. @astrojs/rssパッケージからrss()ヘルパーを.xml.jsファイルにインポートし、以下のパラメーターでrss()を呼び出した結果を返す関数をエクスポートします。
src/pages/rss.xml.js
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フィールドは、RSSフィードのオブジェクトのリストを受け入れます。各オブジェクトには、linktitlepubDateの3つの必須フィールドがあります。description(短い抜粋)、content(記事の全文)、ブログ記事の他のフロントマタープロパティなど追加のデータのためのcustomDataフィールド、という3つの値も任意で含められます。

コンテンツコレクションのスキーマからや、src/pages/内のブログ記事に対してglobインポートを利用することで、この配列を生成できます。

コンテンツコレクションで管理されているページのRSSフィードを作成するには、getCollection()関数を利用してアイテムのリストを取得します。

src/pages/rss.xml.js
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をインポートして適用できます。

src/content/config.ts
import { defineCollection } from 'astro:content';
import { rssSchema } from '@astrojs/rss';
const blog = defineCollection({
schema: rssSchema,
});
export const collections = { blog };
追加: @astrojs/rss@2.1.0

src/pages/内のドキュメントからRSSフィードを作成するには、pagesGlobToRssItems()ヘルパーを利用します。これはimport.meta.globの結果を入力とし、有効なRSSフィードアイテムの配列を出力します(含めるページを指定するためには、globパターンの書き方についてを確認してください)。

src/pages/rss.xml.js
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}'),
),
});
}
追加: astro@1.6.14

contentキーには、記事の全文をHTMLとして含めます。これにより、RSSフィードリーダーは記事全文を利用できるようになります。

コンテンツコレクションを利用する場合は、markdown-itなどの標準的なMarkdownパーサーを利用して記事のbodyをレンダリングし、その結果をサニタイズします。

src/pages/rss.xml.js
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ファイルではサポートされていないことに注意してください。

src/pages/rss.xml.js
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',
});

ブラウザによりyour-domain.com/rss.xmlのフィードにアクセスし、各記事のデータが表示されることを確認できたら、サイトでフィードを宣伝してみましょう。サイトに標準のRSSアイコンを追加すると、読者は自分のフィードリーダーであなたの記事を購読できることに気付けます。