はじめに
おわび?
お久しぶりです。あまりにも開発に徹しすぎて最近ライター的なことが一切できていませんでした、、、これから頑張っていこうと思います。
動機
このブログの右側サイドバーに、記事の目次をつけたいなと思い方法を模索していたところ、見つけたのがtocbotです。その機能をお見せするという目的でも、この記事は見出しを多めに使っています。
tocbotとは?
概要
tocbotは、主に以下の機能を持っています。
- HTMLの見出しタグ(h1,h2,...)を認識する
- ページ内リンクの機能が自動実装
- 細かなプロパティの設定にも柔軟
- スタイルのカスタム性に優れる
このライブラリはこのブログのみならず、zennでも使用されているそうです。詳しい内容は公式リファレンスも参照ください。
使い方
- npm installする
- "post"(例)というクラス名の、記事のHTMLを囲うdivをつくる
- "toc"(例)というクラス名の、目次を囲うdivをつくる
これだけです。あとは見出しのスタイルを自分で決めます。
実例
導入
ある意味これだけです。次に、目次となるhタグの認識です。
記事を囲うdiv
Next.jsを使っているなりに、getStaticProps経由で静的にページを生成して表示しています。その中で、articles/[slug].jsという記事表示ページにdivを作って囲います。
tocbotは、以下で指定するクラス名(今回は.post
)のdivを探して回ってくれるようです。かなり賢い。
目次コンポーネントをつくる
ついで、目次を表示するコンポーネントを作ります。
本質は、<div className="toc" />
の部分です。この部分がそのまま見出しとしてレンダリングされます。この中身には様々にクラス名が振られたページ内リンクが生成されます。CSSは公式のものを当てる方法もあるようですが、今回は自前で当てています。
まとめ
今回は、tocbotという便利ライブラリの紹介でした。短いですが今回はこれで。ありがとうございました!
Discussion
コメントはまだありません。
ログインするとコメントできます!