|<!-- -->flabaka.com

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

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

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

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

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

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 すると、下記の様に表示されてしまいました…

目次

  1. 目次
  2. GatsbyJS とは別の方法は?
  3. Tocbot を使ってみる
  4. 注意点

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

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

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

目次

  1. GatsbyJS とは別の方法は?
  2. Tocbot を使ってみる
  3. 注意点
©2022 flabaka.com