Gatsbyブログサイト移行物語4~プラグインを利用して目次出力~

npm install gatsby-remark-autolink-headers

module.exports = {
  plugins: [
    {
      resolve: `gatsby-transformer-remark`,
      options: {
        plugins: [`gatsby-remark-autolink-headers`],
      },
    },
  ],
}

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

// bad
{
  resolve: `gatsby-transformer-remark`,
  options: {
    plugins: [
      `gatsby-remark-prismjs`, // should be placed after `gatsby-remark-autolink-headers`
      `gatsby-remark-autolink-headers`,
    ],
  },
}

module.exports = {
  plugins: [
    {
      resolve: `gatsby-transformer-remark`,
      options: {
        plugins: [
          {
            resolve: `gatsby-remark-autolink-headers`,
            options: {
              icon: false,
              maintainCase: true,
            },
          },
        ],
      },
    }
  ]
}

src/
    ├ templates/
    |   └ blog-post.js
    └ components/
        └ topics.js（新規作成）

import React from "react";

const Topic = props => {
  return (
    <div class="mokujiList">
      <h2>目次</h2>
        <div
          dangerouslySetInnerHTML={{
            __html: props.data,
          }}
        >
        </div>
      </div>
  );
};

export default Topic;

import Topic from "../components/topic"

//~コード省略~

const BlogPostTemplate = ({ data, location }) => {
  {/*読み込みたい場所に挿入*/}
  <Topic data={data.markdownRemark.tableOfContents} />

  //~コード省略~

}

export default BlogPostTemplate

export const pageQuery = graphql`
  query BlogPostBySlug(
    $id: String!
    $previousPostId: String
    $nextPostId: String
    $hero: String
  )
  {
    site {
      siteMetadata {
        title
      }
    }
    allFile(
      filter: {
        relativePath: {eq: $hero}
        sourceInstanceName: {eq: "assets"}
      }
    ){
      edges {
        node {
          name
          relativePath
          childImageSharp {
          fluid(maxWidth: 800) {
          ...GatsbyImageSharpFluid_withWebp
        }
            }
          }
        }
      }
    markdownRemark(
      id: {eq: $id }
    ) {
        id
        excerpt(pruneLength: 160)
        html
        tableOfContents
        frontmatter {
          title
          date(formatString: "YYYY.MM.DD")
          description
          lead
          hero
          category
          cateId
          tags
          pagetype
          modifieddate(formatString: "YYYY.MM.DD")
        }
      }
      previous: markdownRemark(id: {eq: $previousPostId }) {
        fields {
          slug
        }
        frontmatter {
          title
        }
      }
      next: markdownRemark(id: {eq: $nextPostId }) {
        fields {
          slug
        }
        frontmatter {
          title
        }
      }
    }
  }
`

import React from "react";

const Topic = props => {
  const list = props.data.replace(/(ul>)/gi, 'ol>');

  return (
    <div class="p-box--gray u-mblg">
      <input type="checkbox" class="mokuji" id="mokuji" />
      <label class="c-content__heading" for="mokuji">目次</label>
      <div class="c-editArea mokujiList">
        <div
          dangerouslySetInnerHTML={{
            __html: list,
          }}
        >
        </div>
      </div>
    </div>
  );
};

export default Topic;

<div class="p-box--gray u-mblg">
  <input type="checkbox" class="mokuji" id="mokuji">
  <label class="c-content__heading" for="mokuji">目次</label>
  <div class="c-editArea mokujiList">
    <div>
      <ol>
    ここリストが出力されます
      </ol>
    </div>
  </div>
</div>

.mokuji {
  display: none;
}

.mokuji:checked ~ .mokujiList {
  max-height: 0;
}

.mokuji ~ .mokujiList {
  max-height: 200vh;
  transition: .3s;
  overflow: hidden;
}

.mokuji + .c-content__heading {
  position: relative;
  display: block;
}

.mokuji + .c-content__heading:before {
  transition: .3s;
  position: absolute;
  content: "";
  width: 30px;
  height: 1px;
  top: 10px;
  right: 0px;
  background: #464675;
  display: block;
}

.mokuji:checked + .c-content__heading:after {
  transform: rotate(0deg);
}

.mokuji+ .c-content__heading:after {
  transform: rotate(90deg);
  transition: .3s;
  position: absolute;
  content: "";
  width: 30px;
  height: 1px;
  top: 10px;
  right: 0px;
  background: #464675;
  display: block;
}

<input type="checkbox" class="mokuji" id="mokuji" checked>