Gatsbyでの目次のつけかたは各所で紹介されており、特に目新しい内容はありませんがメモ。 かなりお手軽です。
前提
gatsby-transformer-remarkを利用していること
gatsby-remark-autolink-headers を導入する
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}
/>お好みでスタイルを付与すれば完成です。 参考までに、この記事の目次は以下のように出力されています。
