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

Question

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

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

有没有一种简单的方法可以导入一个特定的降价文件，比如说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)

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

Gatsby + Markdown: How to get data from a specific markdown file into a single page?

markdown

reactjs

gatsby