RSS

Astroはブログやその他のコンテンツウェブサイト向けに、RSSフィードの高速な自動生成をサポートしています。一般的なRSSフィードに関する情報はaboutfeeds.comをご覧ください。

@astrojs/rssの準備

Section titled @astrojs/rssの準備

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

はじめに、お好きなパッケージマネージャーで@astrojs/rssをインストールします。

Terminal window 
npm install @astrojs/rss

次に、プロジェクトのastro.configにsiteを設定していることを確認します。これを利用して、SITE環境変数経由でRSSフィード内のリンクを生成することになります。

それでは、はじめてのRSSフィードを生成しましょう。src/pagesディレクトリにrss.xml.jsを作ります。rss.xmlは出力されるURLになりますので、必要であれば名前を変更しても構いません。

次に、@astrojs/rssパッケージからrssヘルパーをインポートし、次のパラメーターで呼び出します。

src/pages/rss.xml.js 
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フィールドはこのどちらかを受け付けます。

  1. import.meta.glob(...)の結果 （src/pagesディレクトリに含まれる.mdファイルのみ利用します）
  2. 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フィードを生成できます。

src/pages/rss.xml.js 
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フィードを生成できます。

src/pages/rss.xml.js 
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