GatsbyにTableOfContents(目次)をつける

GatsbyにTableOfContents(目次)をつける

Category
Description
今回は「エンジニア初心者でもできる」を前提に以下の構成で記事を作成していこうと思います。
Author
Published
Published May 26, 2020
Last Updated
Last Updated May 26, 2020
Writings
この記事は約3分で読めます

はじめに

今回は「エンジニア初心者でもできる」を前提に以下の構成で記事を作成していこうと思います。

内容

前回はタグ一覧と記事一覧のコンポーネントを同時に出すGraphQLクエリーの応用まで行いました。
今回はブログで欠かせないTableOfContents(目次)の実装方法のご紹介です。全く難しくないのでササッと行きましょう!
notion image

クエリー

超簡単です。記事を取得しているクエリーにtableOfContentsを付け足すだけです。エディタで結果を確認してみましょう。
query PostBySlug($slug: String!) { markdownRemark(fields: { slug: { eq: $slug } }) { id html fields { slug tagSlugs } frontmatter { date description tags title socialImage } tableOfContents } }
notion image
このようにHTML形式のデータを取得することができました。あとは表示するだけです。

コンポーネント作成

TOCを表示するコンポーネントつくりです。
ちなみになぜコンポーネントにするのか?理由は単純で
  • 使い回しがしやすい
  • CSSの設定を限定的にできる
  • パーツを好きなところに配置しやすくなる
からです。パーツ1つ1つの依存度を下げていきましょう。
下のように**dangerouslySetInnerHTML={{ __html: tableOfContents }}**に先程取得したHTMLデータを流し込みましょう。(CSSの設定はお好みで設定してください)
const Toc = ({ tableOfContents, gridArea }: Props) => ( <div className={styles.toc} dangerouslySetInnerHTML={{ __html: tableOfContents }} /> ); export default Toc;

まとめ

いかがだったでしょうか?
他にもgatsby-remark-tocなどのライブラリがあるみたいですが、私個人としてはこちらの方がシンプルで簡潔だと考えています。それでは次回の記事で。