2020.10.18

【Next.js】microCMSで繰り返しフィールドから目次を作成する

Next.js + microCMS の繰り返しフィールドから目次を作成する方法です。基本的には公式のmicroCMSで目次を作成するを参考にしていますが、こちらはリッチエディタ単体での方法なので繰り返しフィールド使用時（リッチエディタとHTMLエディタを複数使用時など）の一例になればと思いメモします。

繰り返しフィールド使用時の目次作成方法

cheerioというHTMLパーサーで処理させるために繰り返しフィールドのコンテンツデータを結合する必要があったため、

データを結合した配列を作成
配列の中身を文字列として結合する

という処理にしました。

cheerioをインストールしておきましょう。

npm install cheerio

import cheerio from "cheerio";

// 目次用データを統合した配列作成
const newBody = post.body.map((obj) => {
  const newObj = obj.editar || obj.contents;
  return newObj;
});
// 文字列結合
const joinBody = newBody.join();
const $ = cheerio.load(joinBody);
const headings = $("h1, h2, h3").toArray();
const toc = headings.map((data) => ({
  text: data.children[0].data,
  id: data.attribs.id,
  name: data.name,
}));

これで目次用のデータ作成ができました。データが以下のようになればOKです。

[
  { text: "目次1", id: "hkY7o3DlYB2", name: "h1" },
  { text: "目次2", id: "h4AL9B4qAV6", name: "h2" },
  { text: "目次3", id: "hBwwL6rm8B7", name: "h3" },
];

💡 ポイント

HTMLエディタにhタグを挿入した場合、手動でidを付与する必要があります。が、そもそもHTMLエディタにはhタグを使用せずにリッチエディタのみに追加した方が楽だと思いました。

テンプレート側での表示方法

目次データがあれば表示という風にしています。

<div>
  {toc.length ? (
    <div id="create-table-of-contents">
      <h4>目次</h4>
      <ul id="lists">
        {toc.map((toc, index) => (
          <li id={"list " + toc.name} key={toc.id}>
            <a href={"#" + toc.id}>{toc.text}</a>
          </li>
        ))}
      </ul>
    </div>
  ) : (
    ""
  )}
</div>

ひとつの参考になれば幸いです。

Follow @ru88s