Question

一段时间以来，我一直在努力思考这个问题，无法解决。

总而言之，我正在尝试使用netlify CMS创建一个Gatsby网站。 CMS的目的不是创建或删除页面，而是能够编辑不同静态页面的内容（即：关于，主页等）

在我的盖茨比项目中，我基本上连接了netlify CMS，而我想要实现的文件结构大致如下：

myproject/
    |---src/
        |---CMS
            |---about.md
            |---index.md
        |---pages
            |---about.js
            |---index.js

可以从CMS编辑markdown文件，我想在我的页面组件中使用此数据。我使用npm install和相应的gatsby-config.js插件声明来设置gatsby-markdown-remark和gatsby-source-filesystem。

这些减价将如下所示：

---
title: "About Page"
intro: "This is all about is"
---
We are doing this because we love it and we are good at it.

我希望能够使用静态查询来提取此数据以在页面组件中使用，但无法确定如何定位该数据。

 import React from "react"
    import { StaticQuery, graphql } from 'gatsby'

    const IndexPage = () => (
      <StaticQuery
      query = { graphql`
        query IndexPageQuery {
          mardownRemark(frontmatter: {title: {eq:"About Page"}}) {
  frontmatter {
    title
    intro
  }
}      
        
      `} 

      render={data => (
        <h1>{data.markdownRemark.frontmatter.title</h1>
        <h2>{data.markdownRemark.frontmatter.intro}</h2>
      )}
      /> 
    )

    export default IndexPage

由于我确实认为我的问题来自graphql查询，所以我尝试减少了代码量，但是对它造成混淆感到抱歉。我也很困惑。

任何对正确方向的帮助将不胜感激。可能不是这种方法应该如何工作。

谢谢。

Answer 1

请确保在您的gatsby-config中设置了gatsby-source-filesystem（它可以是一个新条目-您可以有多个gatsby-source-filesystem）

{
  resolve: `gatsby-source-filesystem`,
  options: {
    path: `${__dirname}/src/CMS`, <-- your CMS folder
    name: `pages`, <-- will be your `sourceInstanceName` when you query `allFile`
  },
},

您的查询看起来不错。请注意，StaticQuery在需要从组件中获取一些数据时非常有用，但是在页面组件中，您可以使用常规查询：

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

export default class Index extends React.Components {
  ...
}

export const pageQuery = graphql`
  query {
    markdownRemark(frontmatter: {
      title: {
        eq: "New Beginnings"
      }
    }) {
      id
      frontmatter {
        title
      }
    }
  }
`

让我知道这是否无济于事！

Gatsby静态查询组件中带有Markdown文件的Graphql查询

1 个答案: