AstroとmicroCMSで1ページ内にカテゴリ事の見出しを表示し、さらにそのカテゴリの記事一覧を表示したい場合の実装方法。例えば以下のような表示イメージです。

なお今回は下記の環境で実装しました。

• Astro 4.16.x
• microcms-js-sdk 3.1.x

まず運用面で予めmicroCMS側にカテゴリ用のコンテンツAPIと、その配下の記事用コンテンツAPIを用意しておきます。具体的には記事APIでコンテンツ参照機能をを使用してカテゴリAPIを参照するようにしておきます。今回は例として、カテゴリをitem_categoryというエンドポイントで用意し記事をitemというエンドポイントで作成しております。詳しくは公式ドキュメントのとおり。

設定ファイルを用意する

簡単なsrcディレクトリのファイル構成です。

├─ components
│   └── List.astro
├─ layouts
│   └── Layout.astro
├─ library
│   └── microcms.ts
└─ pages
    └── index.astro

.envファイルに予めmicroCMSのサービスのID（example.microcms.ioのexampleの部分）とAPIキーをします。

MICROCMS_SERVICE_DOMAIN=【サービスのID】
MICROCMS_API_KEY=【APIキー】

library/microcms.tsにmicroCMSの設定ファイルを記述します。ここではサービスのIDとAPIキーなどを指定します。

import type { MicroCMSQueries } from 'microcms-js-sdk';
import { createClient } from 'microcms-js-sdk';
const client = createClient({
 serviceDomain: import.meta.env.MICROCMS_SERVICE_DOMAIN,
 apiKey: import.meta.env.MICROCMS_API_KEY
});

一覧ページを実装する

pages/index.astroにカテゴリの見出しと記事一覧を実装します。わかりやすいように記事部分は別のコンポーネントにして、記事IDをパラメータで渡すようにおきました。

---
import {client} from '../library/microcms';
import Layout from '../layouts/Layout.astro';
import List from '../components/List.astro';
const category = await client.get({
 endpoint: 'item_category' //カテゴリAPIのエンドポイント
});
---
<Layout>
 {category.contents.map((category:any) => (
 <article>
  <h2>{category.name}</h2>
  <List id={category.id} />
 </article>
 ))}
</Layout>

components/List.astroに記事部分を実装します。テストのため記事タイトルとアイキャッチを指定していますが、こちらはそれぞれの記事に応じて変更ください。

---
import {client} from '../library/microcms';
const {id} = Astro.props;
const items = await client.get({
 endpoint: 'item', //記事APIのエンドポイント
 queries: { filters: `category[equals]${id}`} //カテゴリ用スキーマ名を指定
});
---
<ul>
{items.contents.map((item_data:any) => (
 <li>
  <a href={`/article/${item_data.id}`}>
   <img src={item_data.eyecatch.url} alt="" loading="lazy" width="100" height="100" />
   <p>{item_data.title}</p>
  </a>
 </li>
))}
</ul>

今回は一覧のみで、記事詳細ページの実装などは省いています。これで簡単なカテゴリ記事リストを実装できます。

おしまい♥

タグ：AstroJamstackmicroCMS