ブログに目次をつけた

Gatsbyでの目次のつけかたは各所で紹介されており、特に目新しい内容はありませんがメモ。 かなりお手軽です。

前提

  • gatsby-transformer-remarkを利用していること
yarn add gatsby-remark-autolink-headers

これは公式で提供されているプラグインで、「Markdown記事内の各hタグにidを付与してくれる」というものです。

注意点として、このブログも該当しますがシンタックスハイライトのgatsby-remark-prismjsを導入している場合は「gatsby-config.js上で先にgatsby-remark-autolink-headersのほうを読み込む」ことが必要です。

{
  resolve: `gatsby-transformer-remark`,
  options: {
    plugins: [
      // ...
      `gatsby-remark-autolink-headers`,
      `gatsby-remark-prismjs`,
      // ...
    ],
  },
},

記事の見出しリストをGraphQLで取得する

gatsby-transformer-remarkは標準で記事内にhタグをulタグのリストとして取得する機能を持っています。便利!

見出しを取得したいページのクエリにtableOfContentsという項目を追加します。

  • blog-post.tsx
export const pageQuery = graphql`
  query BlogPost($id: String!) {
    site {
      siteMetadata {
        url
      }
    }
    markdownRemark(id: { eq: $id }) {
      id
      excerpt(pruneLength: 160)
      html
      tableOfContents // ←ココを追加
      frontmatter {
        title
        date
        tags
        thumbnail {
          childImageSharp {
            gatsbyImageData
          }
        }
      }
    }
  }
`;

あとは、このtableOfContentsの内容をそのままHTMLとして出力してあげるだけです。

<div
  dangerouslySetInnerHTML={{
    __html: post.tableOfContents || '',
  }}
  className={styles.tocInner}
/>

お好みでスタイルを付与すれば完成です。 参考までに、この記事の目次は以下のように出力されています。

目次のスクリーンショット

Copyright © 2021-2022 tama All Rights Reserved.