gatsby-starter-blogのブログ投稿記事に目次を追加

const BlogPostTemplate = ({ data, location }) => {
  const post = data.markdownRemark
  const siteTitle = data.site.siteMetadata?.title || `Title`
  const { previous, next } = data

  return (
    <Layout location={location} title={siteTitle}>
      <Seo
        title={post.frontmatter.title}
        description={post.frontmatter.description || post.excerpt}
      />
      <article
        className="blog-post"
        itemScope
        itemType="http://schema.org/Article"
      >
        <header>
          <h1 itemProp="headline">{post.frontmatter.title}</h1>
          <p>{post.frontmatter.date}</p>
          {
            post.frontmatter.tags ? post.frontmatter.tags.map((tag, i) => <span key={i} style={{margin: 8, padding: 10, fontSize: '0.8em', backgroundColor: "#E6E6E6", borderRadius: "30px"}} ><a style={{textDecoration: `none`}} href={`/tags/${_.kebabCase(tag)}/`}>{tag}</a></span>) : ''
          }
        </header>
        <hr style={{marginTop: 12, marginBottom: 24}}/>
        {/* ↓↓↓↓目次↓↓↓↓ */}
        {/* ↓↓↓↓目次↓↓↓↓ */}
        {/* ↓↓↓↓目次↓↓↓↓ */}
        {/* ↓↓↓↓目次↓↓↓↓ */}
        {
          post.tableOfContents ?
              <div style={{ backgroundColor: "#FEFEFE", border: "solid #EFEFEF", borderRadius: 4 }}>
                <h1 style={{ margin: 16 }}>目次</h1>
                <div style={{ margin: 24 }} dangerouslySetInnerHTML={{ __html: post.tableOfContents }} />
              </div>
          : ''
        }
        {/* ↑↑↑↑目次↑↑↑↑ */}
        {/* ↑↑↑↑目次↑↑↑↑ */}
        {/* ↑↑↑↑目次↑↑↑↑ */}
        {/* ↑↑↑↑目次↑↑↑↑ */}
        <section
          dangerouslySetInnerHTML={{ __html: post.html }}
          itemProp="articleBody"
        />

        ...
  )
}

export const pageQuery = graphql`
  query BlogPostBySlug(
    $id: String!
    $previousPostId: String
    $nextPostId: String
  ) {
    site {
      siteMetadata {
        title
      }
    }
    markdownRemark(id: { eq: $id }) {
      id
      excerpt(pruneLength: 160)
      html
      frontmatter {
        title
        date(formatString: "MMMM DD, YYYY")
        description
        tags
      }
      ↓↓ 追加 ↓↓
      ↓↓ 追加 ↓↓
      ↓↓ 追加 ↓↓
      ↓↓ 追加 ↓↓
      tableOfContents(
        absolute: false
        pathToSlugField: "frontmatter.path"
        maxDepth: 3
      )
      ↑↑ 追加 ↑↑
      ↑↑ 追加 ↑↑
      ↑↑ 追加 ↑↑
      ↑↑ 追加 ↑↑
    }
    previous: markdownRemark(id: { eq: $previousPostId }) {
      fields {
        slug
      }
      frontmatter {
        title
      }
    }
    next: markdownRemark(id: { eq: $nextPostId }) {
      fields {
        slug
      }
      frontmatter {
        title
      }
    }
  }
`

gatsby-config.js

module.exports = {
...
  plugins: [
    `gatsby-plugin-image`,
    `gatsby-plugin-sitemap`,
...
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        name: `images`,
        path: `${__dirname}/src/images`,
      },
    },
    {
      resolve: `gatsby-transformer-remark`,
      options: {
        plugins: [
          {
            resolve: `gatsby-remark-autolink-headers`,
            options: {
              icon: false,
              maintainCase: false,
            },
          },
          {
            resolve: `gatsby-remark-images`,
            options: {
              maxWidth: 630,
            },
          },
...

gatsby-transformer-remarkのプラグインに

{
  resolve: `gatsby-remark-autolink-headers`,
  options: {
    icon: false,
    maintainCase: false,
  },
},

を追加することによって、目次欄をクリックしてその欄までスクロールされるようになる。

＊上の項目はgatsby-remark-prismjsより前に記述しないといけない

目次に表示させるmarkdownの書き方

タイトルは## タイトルとして
サブタイトルは### サブタイトルとする

これだけ

参考 : GatsbyJSで目次を作成する

gatsby-starter-blogのブログ投稿記事に目次を追加

目次

必要なパッケージ

修正するソースコード

目次に表示させるmarkdownの書き方

Tags