【Astro × microCMS】目次を表示させる方法

こんにちは、ヨシナオです！

本記事ではmicroCMSで作った記事の目次をAstroで表示させる方法を解説します。

当サイトの目次を実装する際につまづいた点があったので、他の方の参考になれば嬉しいです。

何につまづいた？

microCMS公式ブログに記載されている方法でローカル環境での動作確認は成功したのですが、本番環境にデプロイすると目次が表示されないという現象が発生しました。

具体的には4行目のtext: data.children[0].data,の内容が表示されませんでした。

const $ = cheerio.load(body);
const headings = $('h1, h2, h3').toArray();
const toc = headings.map(data => ({
  text: data.children[0].data, //←ここがエラーになる
  id: data.attribs.id,
  name: data.name
}));

解決方法はこちら

エラーを解消するために修正したコードはこちらです。

const $ = cheerio.load(body);
const headings = $('h1, h2, h3').toArray();
const toc = headings.map(data => ({
  text: $(item).text(), //←エラー解消
  id: data.attribs.id,
  name: data.name
}));

こちらのコードで無事エラーは解決でき、本番環境でも表示することができました。

（この記載にたどり着くまで数時間掛かりました…）

まとめ