RSS
Astroはブログやその他のコンテンツウェブサイト向けに、RSSフィードの高速な自動生成をサポートしています。一般的なRSSフィードに関する情報はaboutfeeds.comをご覧ください。
@astrojs/rss
の準備
Section titled @astrojs/rssの準備@astrojs/rss
パッケージは、APIエンドポイントを利用したRSS生成のヘルパーを提供します。静的ビルドとSSRアダプターを利用したオンデマンド生成の両方に対応しています。
はじめに、お好きなパッケージマネージャーで@astrojs/rss
をインストールします。
npm install @astrojs/rss
pnpm install @astrojs/rss
yarn add @astrojs/rss
次に、プロジェクトのastro.config
にsite
を設定していることを確認します。これを利用して、SITE
環境変数経由でRSSフィード内のリンクを生成することになります。
それでは、はじめてのRSSフィードを生成しましょう。src/pages
ディレクトリにrss.xml.js
を作ります。rss.xml
は出力されるURLになりますので、必要であれば名前を変更しても構いません。
次に、@astrojs/rss
パッケージからrss
ヘルパーをインポートし、次のパラメーターで呼び出します。
import rss from '@astrojs/rss';
export const get = () => rss({
// 出力されるXMLの`<title>`フィールド
title: 'Buzz’s Blog',
// 出力されるXMLの`<description>`フィールド
description: 'A humble Astronaut’s guide to the stars',
// RSS内<item>リンクのベースURL
// SITEはプロジェクトのastro.configにあるsiteの値が使用されます。
site: import.meta.env.SITE,
// 出力されるXMLの<item>のリスト
// 簡単な例: src/pagesにあるマークダウンファイルからそれぞれitemsを生成する
// 必要なfrontmatterや複雑なユースケースに関しては「`items`の生成」セクションをご覧ください。
items: import.meta.glob('./**/*.md'),
// (任意) カスタムxmlを利用する
customData: `<language>en-us</language>`,
});
items
の生成
Section titled itemsの生成items
フィールドはこのどちらかを受け付けます。
import.meta.glob(...)
の結果 (src/pages
ディレクトリに含まれる.md
ファイルのみ利用します)- RSSフィードオブジェクトのリスト。各オブジェクトは
link
,title
,pubDate
、オプションでdescription
,customData
フィールドを持ちます。
1. import.meta.glob
の結果
Section titled 1. import.meta.globの結果src/pages
にある.md
ファイルの便利な簡易記法としておすすめの選択肢です。各投稿のfrontmatterにtitle
とpubDate
、任意でdescription
とcustomData
フィールドを持たせてください。これが不可能な場合やコードでfrontmatterを生成したい場合は2の選択肢をご覧ください。
ブログ投稿をsrc/pages/blog
ディレクトリに保存しているとしましょう。次のようにRSSフィードを生成できます。
import rss from '@astrojs/rss';
export const get = () => rss({
title: 'Buzz’s Blog',
description: 'A humble Astronaut’s guide to the stars',
site: import.meta.env.SITE,
items: import.meta.glob('./blog/**/*.md'),
});
このインポートの構文はViteのglob importのドキュメントを参照してください。
2. RSSフィードオブジェクトのリスト
Section titled 2. RSSフィードオブジェクトのリストpages
ディレクトリの外にある.md
ファイルにおすすめな選択肢です。getStaticPaths
で (EN)ルーティングを生成する場合によく使います。
たとえばsrc/posts
ディレクトリに.md
投稿を保存しているとします。各投稿はtitle
, pubDate
とslug
をfrontmatterに持ち、slug
はサイト上の出力されるURLに対応しています。Viteのimport.meta.glob
ヘルパーを使って、次のようにRSSフィードを生成できます。
import rss from '@astrojs/rss';
const postImportResult = import.meta.glob('../posts/**/*.md', { eager: true });
const posts = Object.values(postImportResult);
export const get = () => rss({
title: 'Buzz’s Blog',
description: 'A humble Astronaut’s guide to the stars',
site: import.meta.env.SITE,
items: posts.map((post) => ({
link: post.url,
title: post.frontmatter.title,
pubDate: post.frontmatter.pubDate,
}))
});
スタイルシートの追加
Section titled スタイルシートの追加ブラウザでファイルを見たときのユーザー体験をよくするために、RSSフィードにスタイルを加えられます。
rss
関数のstylesheet
オプションにスタイルシートの絶対パスを指定してください。
rss({
// 例. "public/rss/styles.xsl"からスタイルシートを利用します
stylesheet: '/rss/styles.xsl',
// ...
});
RSSのスタイルシートを特に気にしない場合、Pretty Feed v3 default stylesheetがおすすめです。これはGitHubからダウンロードでき、プロジェクトのpublic
ディレクトリに保存します。
More recipes
-
Share State Between Islands
Learn how to share state across components — and frameworks! — with Nano Stores.
-
RSS
AstroのRSS入門
-
Installing a Vite or Rollup plugin
Learn how you can import YAML data by adding a Rollup plugin to your project.
-
Build Forms With API Routes
Learn how to use JavaScript to send form submissions to an API Route
-
Build HTML Forms in Astro Pages
Learn how to build HTML forms and handle submissions in your frontmatter
-
Verify a Captcha
Learn how to verify a user is human using a “recaptcha” API route.
-
Build your Astro Site with Docker
Learn how to build your Astro site using Docker.
-
Add i18n features
Use dynamic routing and content collections to add internationalization support to your Astro site.