带有降价文件的 Gatsby 静态查询组件中的 Graphql 查询
Graphql query in Gatsby static query component with markdown file
我一直在努力思考这个问题,但无法解决。
总而言之,我正在尝试使用 netlify CMS 创建一个 Gatsby 站点。 CMS 的目的不是创建或删除页面,而是能够编辑不同静态页面的内容(即:关于、主页等...)
在我的 Gatsby 项目中,我基本上连接了我的 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 查询,但很抱歉,如果它让我感到困惑。我也是一头雾水
任何指向正确方向的帮助将不胜感激。可能是方法不是它应该如何工作。
谢谢。
确保在您的 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
}
}
}
`
如果这没有帮助,请告诉我!
我一直在努力思考这个问题,但无法解决。
总而言之,我正在尝试使用 netlify CMS 创建一个 Gatsby 站点。 CMS 的目的不是创建或删除页面,而是能够编辑不同静态页面的内容(即:关于、主页等...)
在我的 Gatsby 项目中,我基本上连接了我的 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 查询,但很抱歉,如果它让我感到困惑。我也是一头雾水
任何指向正确方向的帮助将不胜感激。可能是方法不是它应该如何工作。
谢谢。
确保在您的 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
}
}
}
`
如果这没有帮助,请告诉我!