【Tocbot】Next.js+MicroCMSのブログ記事に目次を作る方法が簡単すぎた話

Yoshi_Zen

プログラミング

2023/10/12

2023/10/07

はじめに

おわび？

お久しぶりです。あまりにも開発に徹しすぎて最近ライター的なことが一切できていませんでした、、、これから頑張っていこうと思います。

動機

このブログの右側サイドバーに、記事の目次をつけたいなと思い方法を模索していたところ、見つけたのがtocbotです。その機能をお見せするという目的でも、この記事は見出しを多めに使っています。

tocbotとは？

概要

tocbotは、主に以下の機能を持っています。

HTMLの見出しタグ(h1,h2,...)を認識する
ページ内リンクの機能が自動実装
細かなプロパティの設定にも柔軟
スタイルのカスタム性に優れる

このライブラリはこのブログのみならず、zennでも使用されているそうです。詳しい内容は公式リファレンスも参照ください。

使い方

npm installする
"post"(例)というクラス名の、記事のHTMLを囲うdivをつくる
"toc"(例)というクラス名の、目次を囲うdivをつくる

これだけです。あとは見出しのスタイルを自分で決めます。

実例

導入

$ npm install tocbot

ある意味これだけです。次に、目次となるhタグの認識です。

記事を囲うdiv

Next.jsを使っているなりに、getStaticProps経由で静的にページを生成して表示しています。その中で、articles/[slug].jsという記事表示ページにdivを作って囲います。

const Post = ({ /* ... */ }) {
  // ...
  return (
    <div className="post">
      <PostBody />
    </div>
    // ...
  )
}

tocbotは、以下で指定するクラス名(今回は.post)のdivを探して回ってくれるようです。かなり賢い。

目次コンポーネントをつくる

ついで、目次を表示するコンポーネントを作ります。

import PostStickyContainer from './post-sticky-container'
// stickyコンテナ
import styles from '@/styles/sidebar-author.module.css'
import { useEffect } from 'react'
import tocbot from 'tocbot'

export default function SidebarAuthor({ author, slug }) {
  // console.log(author)
  useEffect(() => {
    tocbot.init({
      tocSelector: '.toc',  // ここで目次のクラス名を指定
      contentSelector: '.post',  // ここで記事部分のクラス名を指定
      headingSelector: 'h2, h3',  // 認識する見出しの深さを設定
      headingsOffset: 120,
      scrollSmoothOffset: -120,
      // このふたつは、固定ヘッダによるスクロール位置ずれの回避
      // 120pxぶん、移動位置を下にずらしている
      hasInnerContainers: true,
      // 配置位置のずれを回避
    })
    return () => tocbot.destroy()
  }, [slug])

  return (
    <PostStickyContainer>
      <div className={styles.container}>
        {/* hogehoge */}
        <div className={styles.toc_wrapper}>
          <div className="toc" />
          {/* この部分が目次になる */}
          {/* この下から、CSS-in-JSの形式でスタイルを埋める */}
          <style jsx global>{`
            // hogehoge
          `}</style>
        </div>
      </div>
    </PostStickyContainer>
  )
}

本質は、<div className="toc" />の部分です。この部分がそのまま見出しとしてレンダリングされます。この中身には様々にクラス名が振られたページ内リンクが生成されます。CSSは公式のものを当てる方法もあるようですが、今回は自前で当てています。