はじめに

Astro v5 から導入された Content Layer により、外部コンテンツが Astro 上でより簡単に扱えるようになりました。

astro-qiita-loader は、Qiita の API から取得した記事を Astro の Content Layer で扱えるようにするローダーです。これにより、Qiita の記事を他のコンテンツと同じように統一的に管理・表示することが可能になります。

インストール方法

npm やその他のパッケージ管理ツールを利用して簡単にインストールできます。

npm install astro-qiita-loader

使用方法

1. 設定ファイルの作成

まず、src/content/config.ts に以下のような設定を記述します。

import { qiitaLoader } from "astro-qiita-loader";

export const collections = {
  qiitas: qiitaLoader({
    url: "https://qiita.com/api/v2/items",
    authToken: "your_qiita_api_token", // オプション
  }),
};

authToken の設定について

authToken の設定はオプションです。
Qiita の API には以下の制限があるため、用途に応じて authToken オプションを設定してください。

アクセストークンあり：1000回/時
アクセストークンなし：60回/時

アクセストークンは以下の url から発行可能です。
https://qiita.com/settings/tokens/new

2. コンポーネントでの使用

Astroコンポーネントで次のように使用できます。

---
import { getCollection } from "astro:content";

const qiitas = await getCollection("qiitas");
---

<ul>
  {qiitas.map((qiita) => (
    <li>
      <a href={qiita.data.url} target="_blank" rel="noopener">
        {qiita.title}
      </a>
    </li>
  ))}
</ul>

以上の実装で、Qiita の記事を Astro の Content Layer で扱えるようになります。

実装サンプル

astro-qiita-loader の実装サンプルと Demo ページを公開しています。
実際に利用する際は是非ご参考にください。

実装サンプル
Demo ページ

おまけ

Qiita の記事を Content Layer で扱うもう一つの方法として、Qiita の RSS フィードを @ascorbic/feed-loader を用いて利用するやり方があります。

このやり方は他の RSS フィードと同様のライブラリを用いることができるという利点がある一方、Qiita の RSS フィードの制約により新着 4 件しか記事を取得できないというデメリットがあります。

feed-loader を利用するやり方については、Astro の Content Layer を使って Zenn や Qiita に投稿した記事をブログ一覧に表示するという記事で紹介しておりますので気になる方はそちらもご覧ください。

まとめ

astro-qiita-loader を使用することで、以下のメリットが得られます。

Qiita と Astro のコンテンツを統一的に管理
Content Layer の強力な機能を活用可能
簡単な設定で導入可能

Astro でブログを構築している方で、Qiita の記事も合わせて表示したい場合は、ぜひ astro-qiita-loader を試してみてください。

参考リンク