Gatsby + Markdown：如何将特定markdown文件中的数据获取到单个页面中？

Question

我是 Gatsby 的新手，我正在努力学习它（以及 React，我也没有任何先验知识）。我想创建一个页面，从一个或多个 Markdown 文件中获取数据。

现在我只使用 Gatsby 对其进行测试，以便以后使用 Netlify CMS 降价文件重现该技术（并能够使用 Netlify CMS 管理面板更新页面文本）。 到目前为止，感谢tutorial，我已经设法将降价页面添加到 Gatsby。但是这种方法只创建动态页面，这比我需要的要复杂得多。

有没有一种简单的方法来导入一个特定的降价文件，比如说 src/markdowns/hero-texts.md，在（也可以说）pages/index.js 中，然后使用它们的 frontmatter 标签调用数据，在尽可能干净的方式？

我在 Google 上进行了无数次研究，只是为了找出哪个插件或编码术语可以处理这个问题，但没有成功。我完全明白上面的一些解释可能充满了技术误解，对不起......

Answer 1

您有一个名为 hero-texts.md 的降价文件，并且您希望能够查询其前端内容。

安装插件gatsby-transformer-remark 和gatsby-source-filesystem 并设置gatsby-source-filesystem 选项以查找您的降价文件。

---

// gatsby-config.js

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

您可以在index.js 中进行这样的graphql 页面查询（然后查询结果会自动添加到props.data 下的索引组件中）

// src/pages/index.js

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

const IndexPage = ({data}) => {
  return (
  <>
    <p>{data.markdownRemark.frontmatter.author}</p>
    <p>{data.markdownRemark.frontmatter.date}</p>
    <p>{data.markdownRemark.frontmatter.title}</p>
  </>
)}

export default IndexPage

export const pageQuery = graphql`
  query IndexPageQuery {
    markdownRemark(fileAbsolutePath: { regex: "/hero-texts.md/" }) {
      frontmatter {
        author
        date
        title
      }
    }
  }
`

---

它将在构建时执行graphql查询，并将查询结果添加到IndexPage页面组件的data属性中。

实际上，从一个看起来像这样的降价文件中提取所有的frontmatter字段。

// src/markdowns/hero-texts.md

---
title: "Gatsby + Markdown: How to simply get data from a specific markdown in a single page?"
author: Florent Despinoy
date: 2019-08-06
---

# This is my markdown post

The content of this markdown file would not be queried by pageQuery (only the frontmatter would)