2022-07-15

NextJSブログにTocbotを使って、目次（TableOfContents）を作成してみる

GatsbyJS とは別の方法を探ってみる

NextJS のブログに目次（TableOfContents）をつけてみようかなということで…

GatsbyJS のブログでは、以下の様に目次を作成しました。

Gatsby の記事に目次を作成してみる

remark プラグインを使った方法は GatsbyJS で試したので、別の方法はないかと探ってみると、以下の記事が出てきました。

Tocbot を使ってみる

tocbot をインストール

yarn add tocbot

（記事を参考にしながら）components フォルダ以下にファイルを作成

import { useEffect } from "react";
import tocbot from "tocbot";

export default function Toc() {
  useEffect(() => {
    tocbot.init({
      tocSelector: ".toc",
      contentSelector: ".blogContents",
      headingSelector: "h2, h3",
    });

    return () => tocbot.destroy();
  }, []);

  return (
    <>
      <h4>目次</h4>
      <div className="toc"></div>
    </>
  );
}

目次を表示させたい箇所で、先に作成したコンポーネントを読み込んであげます。

import Toc from "../../components/toc";
（略）
<article className="blogContents">
  <DateFormatter dateString={post.date} />
  <h1>{post.title}</h1>
  <Toc />
</article>

その際、コンポーネント側で設定した contentSelector: ".blogContents"というクラスを設定してあげる必要があります。

注意点

コンポーネント側で headingSelector に h2〜h4 までを設定

tocbot.init({
  tocSelector: ".toc",
  contentSelector: ".blogContents",
  headingSelector: "h2, h3, h4",
});

return の箇所には、h4 で目次という見出しを設定し、その下の div で囲まれた中に目次のリストを表示させようとしていました。

return (
    <>
      <h4>目次</h4>
      <div className="toc"></div>
    </>

ちなみに読み込む markdown のファイルは、下記の様になっています。

## GatsbyJS とは別の方法は？

## Tocbot を使ってみる

## 注意点

yarn dev すると、下記の様に表示されてしまいました…

目次

目次

GatsbyJS とは別の方法は？

Tocbot を使ってみる

注意点

markdown 側には目次という項目は設定していないんですが、headingSelector に h4 を設定している事で、（h4 タグで囲った）見出しとして表示させたいものが、自動的に目次の項目として認識されてしまっている様です…

tocbot.init({
  tocSelector: ".toc",
  contentSelector: ".blogContents",
  headingSelector: "h2, h3",
});

目次は TOC の項目に含みたくないので、headingSelector から h4 を削除すると、意図した表示になりました。

目次

GatsbyJS とは別の方法は？

Tocbot を使ってみる

注意点