javascript - GatsbyJS 如何使用 GraphQL 获取 Markdown 文件并在特定页面上显示数据

标签 javascript reactjs graphql gatsby

我正在构建一个 gatsby -我想显示一些内容的站点 markdown -使用graphql特定页面上的文件.

我的结构是这样的:

src
  content
     about
       file1.md
       file2.md
     services
       somefile.md
       another.md
  pages
     about
       index.js

// etc.

markdown 文件的示例是:

---
key: about
title: some title
---
## this is some section header

this is some dummy text

然后我就有了我的 react 文件,例如例如关于页面,我想在其中显示所有 markdown - 位于 content/about 中的文件-文件夹..

import React from "react"

const AboutPage = ({data}) => {

   return(
       <div>
        // here the markdown data should be displayed
      </div>
   ) 
}

我可以做一个graphql - 仅针对该页面的查询?我可以通过查询键来获取数据还是应该设置路径值?

欢迎任何建议...

最佳答案

Gatsby-source-filesystem 插件将允许您获取目录中的文件

关于javascript - GatsbyJS 如何使用 GraphQL 获取 Markdown 文件并在特定页面上显示数据,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48674376/

相关文章:

javascript - React - 变量的值未正确更改

javascript - React 路由器链接强制更新

search - Github GraphQL 搜索与过滤

graphql - 将获得的字段传递给 GraphQL 中的另一个(嵌套)查询

javascript - 如何将 HTML 文件转换为 GIF

php - 使用 JavaScript、PHP 和 MySQL 时,我在哪里设置字符集

javascript - 将 javascript 添加到 HAML 标记错误

javascript - 遇到 Async/Await Promise 问题 - Javascript/Nodejs

javascript - react native 错误 : undefined is not an object (evaluating '_this2.props.navigator.push' )

javascript - GraphQl 中的注册身份验证不起作用 : Error:- signupUser: null