はじめに

おはようございます。こんにちは。こんばんは。Watatakuです。
今回のお話はこのサイトに「目次をつけた」ってお話です。

目次をつけたいけどどうやってつけるかわからなかったのですが
調べると意外と簡単につけれたのでご紹介したいと思います。

必要パッケージのインストール

以下のパッケージをインストールしてください。

$ npm install cheerio

これは、データクロール用の非常に強力なJavaScriptライブラリです。

また、今回はTypescriptを扱うのでこちらの方もインストールします。

$ npm install --save @types/cheerio

目次を作る

インストールしたパッケージを読み込む。

import cheerio from "cheerio";

getstaticProps()内に以下のコードを追加してください。

export const getStaticProps = async (
  context: GetStaticPropsContext<{ id: string }>
) => {
  const data = await fetch( ・・・ ); // ブログデータ取得
  
// ---------------------------追加----------------------------------
  const $ = cheerio.load(data.body);　// data.bodyにはブログの記事情報が入っている。

  const headings = $("h1, h2, h3, h4, h5").toArray();

  const toc = headings.map((data: any) => ({
    text: data.children[0].data,
    id: data.attribs.id,
    name: data.name,
  }));
// ---------------------------追加----------------------------------


  return {
    props: {
      toc,
    },
  };
};

目次を表示する。

<ul id="lists">
  {toc.map((toc, index) => (
    <li id={"list" + toc.name} key={index}>
        <a href={"#" + toc.id}>{toc.text}</a>
    </li>
  ))}
</ul>

まとめ

以上。
意外と簡単にできましたね。
もし目次の付け方がわからない人はご参考に。