自动为 Gatsby网站中的 Markdown 页面添加 sidebar

0 简介

我想在Gatsby网站上创建Markdown页面时自动添加侧边栏。
有一个 starter “ gatsby-gitbook-starter” 可以支持markdown文件的侧边栏，但仅支持1级。 我希望能够支持更多级别。

你可以通过下面的命令安装这个starter。

gatsby new gatsby-gitbook-starter https://github.com/hasura/gatsby-gitbook-starter

相关文档可以在这里找到 this link

1. 从 “gatsby-gitbook-starter” 学到的

1.1 如何获取 markdown files 相关的数据

// in /src/templates/docs.js
export const pageQuery = graphql`
  query($id: String!) {
    site {
      siteMetadata {
        title
        docsLocation
      }
    }
    mdx(fields: { id: { eq: $id } }) {
      fields {
        id
        title
        slug
      }
      body
      tableOfContents
      parent {
        ... on File {
          relativePath
        }
      }
      frontmatter {
        metaTitle
        metaDescription
      }
    }
    allMdx {
      edges {
        node {
          fields {
            slug
            title
          }
        }
      }
    }
  }
`;

tableOfContents 就是 sidebar navigation 需要的数据.
可以 GraphiQL query 来查看.

为了简便起见，使用下面的 sample data:

a={
   
  "tableOfContents": {
   
   "items": [
     {
   
       "url": "#heading-h11",
       "title": "Heading H11"
     },
     {
   
       "url": "#heading-h12",
       "title": "Heading H12",
       "items": [
         {
   
           "url": "#heading-h2",
           "title": "Heading H2",
           "items": [
             {
   
               "url": "#heading-h3",
               "title": "Heading H3",
             }
           ]
         }
       ]
     }
   ] 
 }
};
b = a.tableOfContents.items;

1.2 如何把数据转化为 component

// in /src/components/rightSidebar.js

             if (item.node.tableOfContents.items) {
   
               innerItems = item.node.tableOfContents.items.map((innerItem, index) => {
   
                  const itemId = innerItem.title
                   ? innerItem.title.replace(/\s+/g, '').toLowerCase()
                   : &#