gatsbyで作られたブログに
\nMDX pluginは使わずにgatsby-transformer-remarkの元で実現しています。
gatsby-transformer-remarkを使うと、gatsbyのgraphQLにいろいろな項目が追加されますが、そのなかにtable of contentsがあります。
まず、これをblog postのtemplateから読み取りましょう。
\nexport const pageQuery = graphql`\n query BlogPostBySlug($slug: String!) {\n site {\n siteMetadata {\n title\n }\n }\n markdownRemark(fields: { slug: { eq: $slug } }) {\n id\n excerpt(pruneLength: 160)\n html\n tableOfContents //←これ追加\n frontmatter {\n title\n date(formatString: \"MMMM DD, YYYY\")\n description\n }\n }\n }\n`そして、得られたtableOfContentsを（ここらへんは個人の実装のより異なりますが）、自分の作ったtableOfContents用のcomponentに渡します。
const BlogPostTemplate = ({ data, pageContext, location }) => {\n const post = data.markdownRemark\n const siteTitle = data.site.siteMetadata.title\n const { previous, next } = pageContext\n\n return (\n <Layout \n location={location} title={siteTitle}\n rightSide={\n <>\n <Bio/> \n <TOC tocitems={data.markdownRemark.tableOfContents}/> // <- これ\n </>\n }\n > \n....................中略..................\n)うけとる、TOC componentはこんな感じ。tableOfContentsは生のhtmlなのでdengerouslySetInnerHTMLで渡します。
import React from \"react\"\nimport styled from \"styled-components\"\nimport { rhythm, scale } from \"../utils/typography\"\n\nconst TOCInner = ({ className, tocitems }) => {\n return (\n <div classname={className} dangerouslySetInnerHTML={{__html: tocitems}} />\n )\n}\n\nconst TOC = styled(TOCInner)`\npadding: ${rhythm(0.5)} ${rhythm(0.25)};\npadding-top: ${rhythm(0.5)}\nfont-style: italic;\ncolor: var(--fg-demisub-color);\n${scale(-3 / 8)};\n& > a {\n line-height: 0;\n}\n`\nexport default TOCこの時点で見た目だけまともなのができますが、まだpage内リンクは機能していません （ハリボテ・・・）
\n上で作ったtable of contentsが動かないのは、page内の<h1> ~ <h6>にidが設定されていないからです。 なのでidを設定するためにpluginを入れます。
idを設定してくれる（と嘯いている） pluginはいくつかありますが、
\ngatsby-remark-autolink-headers を使ってください。
\nhttps://www.gatsbyjs.com/plugins/gatsby-remark-autolink-headers/
gatsby-remark-slugやgatsby-remark-heading-slugはgraphQLのtableOfContentsがなにも返さなくなるので使わないように
npm i gatsby-remark-autolink-headersresolve: `gatsby-transformer-remark`,\n options: {\n plugins: [\n `gatsby-remark-code-titles`,\n `gatsby-remark-autolink-headers`, // <- これ追加\n {\n resolve: `gatsby-remark-images`,\n options: {\n maxWidth: 590\n }\n },そうするとリンクが機能するようになります。
\n（僕なんかからすると）モダンなデザインに思えますが、現在ではcssにposition: stickyを設定するだけでこのような動作を実現することができます。
const TOC = styled(TOCInner)`\ntop: 0px;\npadding: ${rhythm(0.5)} ${rhythm(0.25)};\npadding-top: ${rhythm(0.5)};\nmargin-top: ${rhythm(0.5)};\nmargin-left: ${rhythm(0.20)};\nmargin-right: ${rhythm(0.20)};\nposition: sticky; // <-これ\n........しかし、単純にposition: stickyを設定するだけでは、うまく動かない場合がしばしばあります。
具体的には、
\noverflow: hidden overflow: auto が設定されている。僕の場合も動かず、原因は3番目でした。
\n要素の位置を明示するために
\nconst TOC = styled(TOCInner)`\ntop: 0px; // <- これ\npadding: ${rhythm(0.5)} ${rhythm(0.25)};\npadding-top: ${rhythm(0.5)};\nmargin-top: ${rhythm(0.5)};\nmargin-left: ${rhythm(0.20)};\nmargin-right: ${rhythm(0.20)};\nposition: sticky; \n........を指定したら動きました。
\nCSSがうまく動かない系バグはエラーメッセージがないので原因究明が大変です。position: stickyが動かない 理屈 も分かり次第追記しようと思います。