时间戳

首页 > 解决方案 > 如何在 gatsby 中获取 markdown 文件的目录名称？

javascript - 如何在 gatsby 中获取 markdown 文件的目录名称？

问题描述

我有一个帖子目录，例如：

src
  -posts
    -post-a
      index.md
      demo.jpg
    -post-b
      index.md
      logo.jpg
  -pages
    index.js
    // ...

我想让目录名 post-a/post-b 作为 index.md 的 id，我该怎么办？

这是我的gatsby-config.js：

module.exports = {
  plugins: [
    {
      resolve: 'gatsby-source-filesystem',
      options: {
        name: 'posts',
        path: `${__dirname}/src/posts`,
      },
    },
    {
      resolve: 'gatsby-transformer-remark',
      options: {
        commonmark: true,
        footnotes: true,
        pedantic: true,
        gfm: true,
        plugins: [],
      },
    },
    'gatsby-transformer-sharp',
    'gatsby-plugin-sharp',
    'gatsby-plugin-react-helmet',
  ],
};

但allMarkdownRemark.edges.node没有目录信息。

标签： javascriptreactjsgatsby

解决方案

您可以使用createFilePath函数 fromgatsby-source-filesystem来构建您的 slug 并markdownRemark.fields使用onCreateNodeAPI 将其添加到其中。官方博客启动器也这样做：https ://github.com/gatsbyjs/gatsby-starter-blog/blob/04ace724603b46198665e052006031ba7e644f9d/gatsby-node.js#L53-L64

exports.onCreateNode = ({ node, actions, getNode }) => {
  const { createNodeField } = actions

  if (node.internal.type === `MarkdownRemark`) {
    const value = createFilePath({ node, getNode })
    createNodeField({
      name: `slug`,
      node,
      value,
    })
  }
}

slug 现在包含您的博客文章的目录名称。

你原来的问题：

您可以使用联合类型来访问父级，例如：

{
  allMarkdownRemark {
    nodes {
      parent {
        ... on File {
          dir
        }
      }
    }
  }
}

推荐阅读