Javascript 盖茨比“createPage”正在生成具有相同数据的页面

gatsby config.js

配置为从

/content

目录中获取所有标记文件

ServicePost

和

BlogPost

模板从

/src/content/services

和

/src/content/blog

目录

gatsby node.js

根据中设置的

templateKey

对

/src/content/

中的数据进行排序 标记文件的frontmatter，并将其传递给生成页面的

createPage

在

/services/service name

和

/blog/blog article name

URL上

我的问题是所有

/services/service name

和

/blog/blog article name

页面 使用来自

/services/

和

/blog/

目录的第一篇文章的数据生成

gatsby config.js

constproxy=require（'http-proxy-middleware'））
module.exports={
站点元数据：{
标题：“盖茨比+Netlify CMS启动机”，
说明：
“本回购协议包含一个使用盖茨比和Netlify CMS构建的示例商业网站。它遵循JAMstack架构，使用Git作为单一真实来源，Netlify用于连续部署和CDN分发。”，
},
插件：[
“盖茨比头盔”，
“盖茨比·萨斯”，
{
//作为第一个gatsby源文件系统插件，用于gatsby映像支持
解析：“盖茨比源文件系统”，
选项：{
路径：`${uu dirname}/static/img`，
名称：“上传”，
},
},
{
解析：“盖茨比源文件系统”，
选项：{
路径：`${uu dirname}/src/content`，
名称：'内容'，
},
},
{
解析：“盖茨比源文件系统”，
选项：{
路径：`${uu dirname}/src/img`，
名称：'图像'，
},
},
“盖茨比·夏普”，
“盖茨比变形金刚”，
{
决议：“盖茨比变压器评论”，
选项：{
插件：[
{
解决方案：“盖茨比评论相关图像”，
选项：{
名称：“上传”，
},
},
{
决议：“盖茨比评论图片”，
选项：{
//指定的最大宽度（以像素为单位）很重要
//作为此插件的内容容器使用此作为
//用于生成每个图像的不同宽度的基础。
最大宽度：2048，
},
},
{
解决方案：“盖茨比备注复制链接文件”，
选项：{
destinationDir:“静态”，
},
},
],
},
},
{
解析：“盖茨比插件netlify cms”，
选项：{
modulePath:`${uu dirname}/src/cms/cms.js`，
},
},
{
解析：'盖茨比插件清除css'，//清除所有未使用/未引用的css规则
选项：{
develope:true，//在npm运行develope时激活清除
purgeOnly:['/all.sass']，//仅对bulma css文件应用清除
},
}，//必须在其他CSS插件之后
“gatsby plugin netlify”，//确保将其保留在数组中的最后一个
],
//在本地开发Netlify功能时避免CORS
//阅读更多：https://www.gatsbyjs.org/docs/api-proxy/#advanced-代理
开发软件：应用=>{
应用程序使用(
“/.netlify/functions/”，
代理({
目标：'http://localhost:9000',
路径重写：{
“/.netlify/functions/”：“”，
},
})
)
}
}

gatsby node.js

const=require（'lodash'））
const path=require（'路径'）
const{createFilePath}=require（'gatsby-source-filesystem'）
const{fmImagesToRelative}=require（'gatsby-remark-relative-images'）
exports.createPages=异步（{actions，graphql}）=>{
const{createPage}=actions
const blogs=wait graphql(`
{
博客：AllMarkdownReark(
限额：1000
筛选器：{frontmatter:{templateKey:{eq:“博客帖子”}}
排序：{
字段：[frontmatter\uuuuu日期]
订单：[说明]
}
) {
边缘{
节点{
身份证件
田地{
鼻涕虫
}
html
前沿物质{
标题
模板键
日期
}
}
}
}
}
`)
const blogpostemplate=path.resolve（`src/templates/BlogPost.js`）
blogs.data.blogs.edges.forEach（（{node}）=>{
创建页面({
路径：node.fields.slug，
组件：BlogPostTemplate，
上下文：{}，
});
});
const services=wait graphql(`
{
服务：AllMarkdown备注(
限额：1000
筛选器：{frontmatter:{templateKey:{eq:“服务站”}}
) {
边缘{
节点{
身份证件
田地{
鼻涕虫
}
html
前沿物质{
标题
模板键
}
}
}
}
}
`)
const servicepostemplate=path.resolve（`src/templates/ServicePost.js`）
services.data.services.edges.forEach（（{node}）=>{
创建页面({
路径：node.fields.slug，
组件：ServicePostTemplate，
});
});
}
exports.onCreateNode=（{node，actions，getNode}）=>{
const{createNodeField}=操作
fmImagesToRelative（node）//转换盖茨比图像的图像路径
if（node.internal.type==`MarkdownRemark`）{
const value=createFilePath（{node，getNode}）
createNodeField({
名称：`slug`，
节点，
价值
})
}
}

/src/templates/BlogPost.js

从“React”导入React
从“道具类型”导入道具类型
从“反应头盔”导入头盔
从“盖茨比”导入{graphql}
从“../components/Layout”导入布局
导入内容，{HTMLContent}from'
---
templateKey: blog-post
title: Blog post 1 title
date: 2014-12-17T15:04:10.000Z
---

Blog post 1 body

    createPage({
          path: node.fields.slug,
          component: BlogPostTemplate,
          context: {node}, // adding node in here and then pulling it as a 
                               // props everytime you create a page?
        });

    export const BlogPostTemplate = ({node}) => {

 <h1>{node.context.node.frontmatter.title}<h1> // sorry don't know what the extact api route would be but i think tis something like this. just double check with a console.log

}