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

プログラミング

はじめに

おわび?

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

動機

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

tocbotとは?

概要

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

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

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

使い方

  1. npm installする
  2. "post"(例)というクラス名の、記事のHTMLを囲うdivをつくる
  3. "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は公式のものを当てる方法もあるようですが、今回は自前で当てています。

まとめ

今回は、tocbotという便利ライブラリの紹介でした。短いですが今回はこれで。ありがとうございました!

Discussion

コメントはまだありません。

ログインするとコメントできます!

新着記事

eyecatch of tocbot

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

by Yoshi_Zen

eyecatch of dev_pixel_tab

大学生向け Pixel Tablet の使用感

by アンティキラのポンコツ

eyecatch of civil_test

国家公務員総合職試験受験のすすめ

by アンティキラのポンコツ

eyecatch of Civil_Engineering_Soil_mec_4

[土質力学]地盤沈下の区別とその計算

by アンティキラのポンコツ

eyecatch of cpp1

【C++】#0:はじめに

by Yoshi_Zen

eyecatch of pro_con_1

【競プロ】#1:初参戦

by Yoshi_Zen

すべての記事を見る