javascript — Гэтсби `createPage` генерирует страницы с одинаковыми данными

Gatsby `createPage` генерирует страницы с одинаковыми данными

gatsby-config.js настроен на получение всех файлов ./content из ./content .

Шаблоны ServicePost и BlogPost получают данные из ./src/content/services и ./src/content/blog .

gatsby-node.js сортирует данные из ./src/content/ на основе templateKey установленного в frontmatter файлов уценки, и передает их в createPage который генерирует страницы по URL /blog/blog-article-name адресам /services/service-name и /blog/blog-article-name .

У меня проблема в том, что все страницы /services/service-name и /blog/blog-article-name генерируются с данными из первого поста из ./services/ и ./blog/ .

gatsby-config.js

 const proxy = require('http-proxy-middleware') module.exports = { siteMetadata: { title: 'Gatsby   Netlify CMS Starter', description: 'This repo contains an example business website that is built with Gatsby, and Netlify CMS.It follows the JAMstack architecture by using Git as a single source of truth, and Netlify for continuous deployment, and CDN distribution.', }, plugins: [ 'gatsby-plugin-react-helmet', 'gatsby-plugin-sass', { // keep as first gatsby-source-filesystem plugin for gatsby image support resolve: 'gatsby-source-filesystem', options: { path: `${__dirname}/static/img`, name: 'uploads', }, }, { resolve: 'gatsby-source-filesystem', options: { path: `${__dirname}/src/content`, name: 'content', }, }, { resolve: 'gatsby-source-filesystem', options: { path: `${__dirname}/src/img`, name: 'images', }, }, 'gatsby-plugin-sharp', 'gatsby-transformer-sharp', { resolve: 'gatsby-transformer-remark', options: { plugins: [ { resolve: 'gatsby-remark-relative-images', options: { name: 'uploads', }, }, { resolve: 'gatsby-remark-images', options: { // It's important to specify the maxWidth (in pixels) of // the content container as this plugin uses this as the // base for generating different widths of each image. maxWidth: 2048, }, }, { resolve: 'gatsby-remark-copy-linked-files', options: { destinationDir: 'static', }, }, ], }, }, { resolve: 'gatsby-plugin-netlify-cms', options: { modulePath: `${__dirname}/src/cms/cms.js`, }, }, { resolve: 'gatsby-plugin-purgecss', // purges all unused/unreferenced css rules options: { develop: true, // Activates purging in npm run develop purgeOnly: ['/all.sass'], // applies purging only on the bulma css file }, }, // must be after other CSS plugins 'gatsby-plugin-netlify', // make sure to keep it last in the array ], // for avoiding CORS while developing Netlify Functions locally // read more: https://www.gatsbyjs.org/docs/api-proxy/#advanced-proxying developMiddleware: app ={amp}gt; { app.use( '/.netlify/functions/', proxy({ target: 'http://localhost:9000', pathRewrite: { '/.netlify/functions/': '', }, }) ) } } 

gatsby-node.js

 const _ = require('lodash') const path = require('path') const { createFilePath } = require('gatsby-source-filesystem') const { fmImagesToRelative } = require('gatsby-remark-relative-images') exports.createPages = async ({ actions, graphql }) ={amp}gt; { const { createPage } = actions const blogs = await graphql(` { blogs: allMarkdownRemark( limit: 1000 filter: { frontmatter: { templateKey: { eq: "blog-post" } } } sort: { fields: [frontmatter___date] order: [DESC] } ) { edges { node { id fields { slug } html frontmatter { title templateKey date } } } } } `) const BlogPostTemplate = path.resolve(`src/templates/BlogPost.js`) blogs.data.blogs.edges.forEach(({ node }) ={amp}gt; { createPage({ path: node.fields.slug, component: BlogPostTemplate, context: {}, }); }); const services = await graphql(` { services: allMarkdownRemark( limit: 1000 filter: { frontmatter: { templateKey: { eq: "service-post" } } } ) { edges { node { id fields { slug } html frontmatter { title templateKey } } } } } `) const ServicePostTemplate = path.resolve(`src/templates/ServicePost.js`) services.data.services.edges.forEach(({ node }) ={amp}gt; { createPage({ path: node.fields.slug, component: ServicePostTemplate, }); }); } exports.onCreateNode = ({ node, actions, getNode }) ={amp}gt; { const { createNodeField } = actions fmImagesToRelative(node) // convert image paths for gatsby images if (node.internal.type === `MarkdownRemark`) { const value = createFilePath({ node, getNode }) createNodeField({ name: `slug`, node, value, }) } } 

./src/templates/BlogPost.js

 import React from 'react' import PropTypes from 'prop-types' import Helmet from 'react-helmet' import { graphql } from 'gatsby' import Layout from '../components/Layout' import Content, { HTMLContent } from '../components/Content' export const BlogPostTemplate = ({ content, contentComponent, description, title, helmet, }) ={amp}gt; { const PostContent = contentComponent || Content return ( {amp}lt;section{amp}gt; {helmet || ''} {amp}lt;h1{amp}gt; {title} {amp}lt;/h1{amp}gt; Blog post template {amp}lt;p{amp}gt;{description}{amp}lt;/p{amp}gt; {amp}lt;PostContent content={content} /{amp}gt; {amp}lt;/section{amp}gt; ) } BlogPostTemplate.propTypes = { content: PropTypes.node.isRequired, contentComponent: PropTypes.func, title: PropTypes.string, helmet: PropTypes.object, } const BlogPost = ({ data }) ={amp}gt; { // console.log('Blog Post Data', JSON.stringify(data)) const { markdownRemark: post } = data return ( {amp}lt;Layout{amp}gt; {amp}lt;BlogPostTemplate content={post.html} contentComponent={HTMLContent} helmet={ {amp}lt;Helmet titleTemplate="%s | Blog"{amp}gt; {amp}lt;title{amp}gt;{`${post.frontmatter.title}`}{amp}lt;/title{amp}gt; {amp}lt;/Helmet{amp}gt; } title={post.frontmatter.title} /{amp}gt; {amp}lt;/Layout{amp}gt; ) } BlogPost.propTypes = { data: PropTypes.shape({ markdownRemark: PropTypes.object, }), } export default BlogPost export const pageQuery = graphql` query BlogPostByID { markdownRemark(frontmatter: { templateKey: { eq: "blog-post" } }) { id html frontmatter { date(formatString: "MMMM DD, YYYY") title } } } ` 

./src/content/blog/blog-post-1.md

 --- templateKey: blog-post title: Blog post 1 title date: 2014-12-17T15:04:10.000Z --- Blog post 1 body 
Понравилась статья? Поделиться с друзьями:
JavaScript & TypeScript
Adblock
detector