これは何？
Gatsby の blog starter で、目次を追加する方法です。 starterはこちら↓
確認環境
$ gatsby --version
Gatsby CLI version: 4.4.0
Gatsby version: 4.5.2目次コンポーネントの作成
src/components/toc.js
import React from "react"
const TOC = ({ html }) => {
return <div dangerouslySetInnerHTML={{ __html: html }}></div>
}
export default TOCGraphQLでtableOfContentsを取得するように追加して、コンポーネントを利用
関係ないところは ... で省略しています。
src/templates/blog-post.js
import TOC from "../components/toc"
...
<TOC html={post.tableOfContents} />
...
export const pageQuery = graphql`
query BlogPostBySlug(
$id: String!
$previousPostId: String
$nextPostId: String
) {
...
markdownRemark(id: { eq: $id }) {
id
excerpt(pruneLength: 160)
html
frontmatter {
title
date(formatString: "MMMM DD, YYYY")
description
}
tableOfContents
}
...
}
`プラグインの設定
このままでは、目次をクリックしても遷移しないのでプラグインを追加します。
$ npm install gatsby-remark-autolink-headers以下、抜粋です。
gatsby-config.js
const config = {
...
plugins: [
{
resolve: `gatsby-transformer-remark`,
options: {
...
`gatsby-remark-autolink-headers`,
`gatsby-remark-prismjs`,
...
],
},
},
]
}
...gatsby-remark-prismjs より前に設定する必要があるようです。
おわりに
目次のスタイルは、このままで良いかな。