GatsbyJS技术问题：如何用GraphQL在指定页面获取对应目录Markdown文件

当然可以给你的About页面编写专属的GraphQL查询！我来一步步帮你实现，顺便聊聊用path还是key的选择问题：

首先你得确保已经安装了必要的插件，并在gatsby-config.js里配置好数据源：

• 安装依赖：

npm install gatsby-source-filesystem gatsby-transformer-remark

• 在gatsby-config.js中添加配置：

module.exports = {
  plugins: [
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        name: `about`,
        path: `${__dirname}/content/about/`,
      },
    },
    `gatsby-transformer-remark`,
  ],
}

这样Gatsby就会把content/about下的所有Markdown文件都纳入数据源了。

作为页面组件（比如src/pages/about.js），你可以用Page Query或者useStaticQuery来获取数据，这里推荐用Page Query（更适合页面级的数据获取）。

方式一：通过路径（path）筛选数据（最推荐） #

因为你的Markdown文件都集中在content/about目录下，直接通过文件路径过滤是最直接可靠的方式，不需要额外给Markdown加配置。查询示例：

import React from "react"
import { graphql } from "gatsby"

const AboutPage = ({ data }) => {
  const aboutPosts = data.allMarkdownRemark.nodes
  return (
    <div>
      <h1>About Content</h1>
      {aboutPosts.map(post => (
        <div key={post.id}>
          <h2>{post.frontmatter.title}</h2>
          <div dangerouslySetInnerHTML={{ __html: post.html }} />
        </div>
      ))}
    </div>
  )
}

export const query = graphql`
  query AboutPageQuery {
    allMarkdownRemark(
      filter: { fileAbsolutePath: { regex: "/content/about/" } }
    ) {
      nodes {
        id
        frontmatter {
          title
          # 如果你有其他frontmatter字段比如date，也可以加在这里
        }
        html
      }
    }
  }
`

export default AboutPage

这里用fileAbsolutePath的正则匹配来筛选出content/about下的所有Markdown文件，非常直观。

方式二：通过自定义key筛选数据 #

如果你希望更灵活（比如未来可能把相关Markdown放在其他目录，但仍想在About页面展示），可以给每个Markdown文件的frontmatter加一个自定义key，比如：

在content/about/xxx.md的frontmatter里：

---
title: "Our Team"
pageType: "about" # 自定义的key
---

然后查询时就可以通过这个key来过滤：

query AboutPageQuery {
  allMarkdownRemark(filter: { frontmatter: { pageType: { eq: "about" } } }) {
    nodes {
      id
      frontmatter {
        title
        pageType
      }
      html
    }
  }
}

• 如果你的Markdown文件始终会放在content/about目录下，优先用path筛选：不需要额外维护frontmatter的key，配置简单，不容易出错。
• 如果未来有跨目录分类的需求（比如某些Markdown在content/articles下，但属于about相关内容），或者需要给内容打多标签，用自定义key更灵活：通过frontmatter的字段可以更精准地控制哪些内容展示在About页面。

• 可以给查询加排序规则，比如按frontmatter的date排序：在allMarkdownRemark里加sort: { fields: [frontmatter___date], order: DESC }
• 如果需要预览Markdown内容的样式，记得在组件里添加对应的CSS，或者用gatsby-plugin-mdx来支持更丰富的Markdown特性（比如MDX）。

内容的提问来源于stack exchange，提问作者ST80