Gatsby：如何将MDX文件的frontmatter数据插入到页面组件中

1. 首页（index.js）传递查询到的MDX数据到OurSites组件 #

你已经完成了GraphQL查询获取数据的步骤，直接将拿到的MDX数组作为自定义props传入OurSites组件即可，参考代码如下：

// index.js 核心示例代码
import OurSites from './OurSites'

// 以下代码适配不同框架的查询数据获取逻辑：
// Gatsby 生态可通过 useStaticQuery 拿到数据
// Next.js 生态可通过 getStaticProps 将数据传入页面组件props
const HomePage = ({ data }) => {
  return (
    <div>
      {/* 其他首页原有组件 */}
      <OurSites sites={data.allMdx.nodes} />
      {/* 其他首页原有组件 */}
    </div>
  )
}

export default HomePage

2. 改造OurSites.js组件动态渲染内容 #

修改组件接收sites参数，删除原有写死的静态卡片代码，通过遍历MDX数据数组生成所有卡片，如果你需要渲染MDX的富文本正文，需要引入对应框架的MDX渲染组件（Gatsby生态用MDXRenderer，Next.js生态用MDXRemote），参考代码如下：

// OurSites.js 核心示例代码
import Card from 'react-bootstrap/Card'
// 如需渲染MDX富文本正文，引入对应渲染器，以下为Gatsby生态示例
import { MDXRenderer } from 'gatsby-plugin-mdx'

const OurSites = ({ sites }) => {
  return (
    <div className="sites-wrapper">
      {/* 遍历MDX数据动态生成卡片 */}
      {sites.map((siteItem) => (
        <Card key={siteItem.id} className="site-card">
          <Card.Img variant="top" src={siteItem.frontmatter.coverImage} />
          <Card.Body>
            {/* 替换静态标题为MDX对应字段 */}
            <Card.Title>{siteItem.frontmatter.title}</Card.Title>
            {/* 替换静态描述文本为MDX对应字段 */}
            <Card.Text>{siteItem.frontmatter.description}</Card.Text>
            {/* 如需渲染完整MDX正文内容，打开下方代码 */}
            {/* <MDXRenderer>{siteItem.body}</MDXRenderer> */}
          </Card.Body>
        </Card>
      ))}
    </div>
  )
}

export default OurSites

3. 字段匹配调整 #

请根据你自己的GraphQL查询返回的字段结构，调整上述代码的字段名：

• 如果你的字段直接挂在MDX节点下而非frontmatter中，直接去掉.frontmatter层级即可
• 其他自定义字段如站点地址、上线时间等，按照你查询返回的字段名直接调用即可

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