使用gatsby-node.js 的想法是使用createPage API 从某些数据源（CMS、markdown 文件、JSON 文件、外部 API 等）创建动态页面。换句话说，从数据源创建具有未知 slug 或名称的动态页面非常有用。这个想法是查询所有类型的数据（例如帖子）并通过上下文传递一些独特的信息（通常是 slug 或 id）作为过滤器参数，以在您的模板中执行另一个查询。
在您的情况下，这适合您的博客（降价文件 2），但不适用于其他已知页面，例如索引、关于等（降价文件 1）。它们是已定义的已知页面，应使用page query 区别对待。它们不是模板，因为它们是独特的页面，您不会有两个可以重复使用主页模板的不同主页。
例如，要在帖子和主页之间识别不同的降价页面，您可以使用key 值来过滤您的查询。
---
title: 'Index page'
slug: '/'
key: 'home'
template: indexTemplate //This is where i declare which component it shall use
content: 'Index content'
---
Content of the index page.
还有：
---
slug: '/my-first-post'
date: '2019-05-04'
key: 'post'
title: 'My first blog post!'
content: 'Content post 1'
template: postTemplate
---
在动态创建页面时（通过gatsby-node.js），该方法应如下所示：
const path = require(`path`)
const { createFilePath } = require(`gatsby-source-filesystem`)
exports.onCreateNode = ({ node, getNode, actions }) => {
const { createNodeField } = actions
if (node.internal.type === `MarkdownRemark`) {
const slug = createFilePath({ node, getNode, basePath: `pages` })
createNodeField({
node,
name: `slug`,
value: slug,
})
}
}
exports.createPages = async ({ graphql, actions }) => {
const { createPage } = actions
const result = await graphql(`
query {
allMarkdownRemark(
filter: { frontmatter: { key: { eq: "article" }}}) {
edges {
node {
fields {
slug
}
}
}
}
}
`)
result.data.allMarkdownRemark.edges.forEach(({ node }) => {
createPage({
path: node.fields.slug,
component: path.resolve(`./src/templates/blog-post.js`),
context: {
// Data passed to context is available
// in page queries as GraphQL variables.
slug: node.fields.slug,
},
})
})
}
注意key 值的过滤器。
然后，在您的blog-post（模板）中：
import React from "react"
import { graphql } from "gatsby"
import Layout from "../components/layout"
export default function BlogPost({ data }) {
const post = data.markdownRemark
return (
<Layout>
<div>
<h1>{post.frontmatter.title}</h1>
<div dangerouslySetInnerHTML={{ __html: post.html }} />
</div>
</Layout>
)
}
export const query = graphql`
query($slug: String!) {
markdownRemark(fields: { slug: { eq: $slug } }) {
html
frontmatter {
title
}
}
}
`
对于您的静态页面，只需在页面上进行查询。给你的index.js：
import React from 'react'
import { graphql } from 'gatsby'
const HomePage = ({data}) => {
return (
<div>
Your page title is {data.nodes[0].frontmatter.title}
</div>
)
}
export const query = graphql`
query HomePageQuery {
allMarkdownRemark(filter: { frontmatter: { key: { eq: "home" }}}) {
nodes{
frontmatter{
title
}
}
}
}
`
export default HomePage
根据您的需要随意调整代码。重要的是，您应该区分应该用作模板的内容（博客、帖子、文章或其他动态数据）和应该静态处理的内容（主页、关于或其他静态页面）。
当然，根据问题的范围，您可以有多个模板，假设一个用于帖子，另一个用于评论（或其他动态数据）。您可以通过将查询结果保存在变量中并调用两次createPage API 来简单地实现它：
const result1 = await graphql(`
query{
allMarkdownRemark {
nodes {
frontmatter {
slug
template
}
}
}
}
`)
const result2 = await graphql(`
query{
allMarkdownRemark {
nodes {
frontmatter {
slug
template
}
}
}
}
`)
const postTemplate = require.resolve(`./src/templates/postTemplate.js`)
const reviewsTemplate = require.resolve(`./src/templates/reviewsTemplate.js`)
// Handle errors
if (result1.errors || result2.errors) {
reporter.panicOnBuild(`Error while running GraphQL query.`)
return
}
result1.data.allMarkdownRemark.nodes.forEach( post => {
createPage({
path: post.frontmatter.slug,
component: postTemplate
context: {
slug: post.frontmatter.slug,
},
})
})
result2.data.allMarkdownRemark.nodes.forEach( review => {
createPage({
path: review.frontmatter.slug,
component: reviewsTemplate
context: {
slug: review.frontmatter.slug,
},
})
})