如何使用gatsby节点使用相同的模板创建多个页面？

Question

个人项目页面，，我正在使用模板A为每个标记文件创建一个唯一的页面，这个页面就像预期的那样工作。它们是以下Project页面的每个子类(例如，www.site//project-1)

项目类型页我还试图使用模板B (project-type.jsx)创建4个不同的页面。每个路径都有一个唯一的路径，我将为每个页面传递一个不同的“键”。该键将用于获取具有匹配" key“的特定标记文件。所有这些带有匹配键的标记文件都将被显示。这4页是Project页面(例如，www.site/)。

本质上，正在发生的事情是，单个项目页被正确地创建了，但是这4个项目类型的页面根本没有被生成。按照https://www.gatsbyjs.com/docs/creating-and-modifying-pages/的指示，我在https://www.gatsbyjs.com/docs/creating-and-modifying-pages/中对所有生成的页面进行了双重签入。我在生成4个项目类型页面时做错了什么？

这里是我的gatsby-node.js文件：

const path = require('path')

exports.createPages = async ({ graphql, actions }) => {
    
    const { data } = await graphql(`
        query Projects {
            mograph: allMarkdownRemark(
                filter: {frontmatter: {typeKey: {eq: "mograph"}}}
            ) {
                nodes {
                    frontmatter {
                        slug
                    }
                }
            }
            photoedit: allMarkdownRemark(
                filter: {frontmatter: {typeKey: {eq: "photoedit"}}}
            ) {
                nodes {
                    frontmatter {
                        slug
                    }
                }
            }
            photoman: allMarkdownRemark(
                filter: {frontmatter: {typeKey: {eq: "photoman"}}}
            ) {
                nodes {
                    frontmatter {
                        slug
                    }
                }
            }
            webdev: allMarkdownRemark(
                filter: {frontmatter: {typeKey: {eq: "webdev"}}}
            ) {
                nodes {
                    frontmatter {
                        slug
                    }
                }
            }
        }
    `)

    // Individual Project Pages

    data.mograph.nodes.forEach(node => {
        actions.createPage({
            path: '/motion-graphics/' + node.frontmatter.slug,
            component: path.resolve('./src/templates/project-details.jsx'),
            context: { slug: node.frontmatter.slug }
        })
    })

    data.photoedit.nodes.forEach(node => {
        actions.createPage({
            path: '/photo-editing/' + node.frontmatter.slug,
            component: path.resolve('./src/templates/project-details.jsx'),
            context: { slug: node.frontmatter.slug }
        })
    })

    data.photoman.nodes.forEach(node => {
        actions.createPage({
            path: '/photo-manipulation/' + node.frontmatter.slug,
            component: path.resolve('./src/templates/project-details.jsx'),
            context: { slug: node.frontmatter.slug }
        })
    })

    data.webdev.nodes.forEach(node => {
        actions.createPage({
            path: '/web-development/' + node.frontmatter.slug,
            component: path.resolve('./src/templates/project-details.jsx'),
            context: { slug: node.frontmatter.slug }
        })
    })

    //Project Type Pages

    createPage({
        path: '/motion-graphics',
        component: require.resolve('./src/templates/project-type.jsx'),
        context: { typeKey: 'mograph' }
    })
      
    createPage({
        path: '/photo-editing',
        component: require.resolve('./src/templates/project-type.jsx'),
        context: { typeKey: 'photoedit' }
    })

    createPage({
        path: '/photo-manipulation',
        component: require.resolve('./src/templates/project-type.jsx'),
        context: { typeKey: 'photoman' }
    })

    createPage({
        path: '/web-development',
        component: require.resolve('./src/templates/project-type.jsx'),
        context: { typeKey: 'webdev' }
    })
}

下面是我的模板文件，project-type.jsx：

import * as React from "react"
import { graphql } from "gatsby"
import { Themed } from "theme-ui"
import Layout from "@lekoarts/gatsby-theme-cara/src/components/layout"
import { UpDown, UpDownWide } from "@lekoarts/gatsby-theme-cara/src/styles/animations"
import Svg from "@lekoarts/gatsby-theme-cara/src/components/svg"
import Seo from "@lekoarts/gatsby-theme-cara/src/components/seo"
import Inner from "@lekoarts/gatsby-theme-cara/src/elements/inner"
import "../styles/projects.scss"
import Navbar from "../@lekoarts/gatsby-theme-cara/components/project-nav"
import { GatsbyImage } from "gatsby-plugin-image"
import ProjectCard from "../@lekoarts/gatsby-theme-cara/components/project-card"
import ContentNoParallax from "../elements/content-no-parallax.tsx"

const ProjectType = ({ data }) => {

  const projects = data.projects.nodes
  const typeKey = data.projects.nodes.frontmatter.typeKey

  return (
    <Layout>
      <Seo title={ typeKey } />
      <div>
        <UpDown>
          <Svg icon="triangle" hiddenMobile width={48} stroke color="icon_orange" left="10%" top="20%" />
          <Svg icon="hexa" width={48} stroke color="icon_red" left="60%" top="70%" />
          <Svg icon="box" width={6} color="icon_darker" left="60%" top="15%" />
        </UpDown>
        <UpDownWide>
          <Svg icon="arrowUp" hiddenMobile width={16} color="icon_blue" left="80%" top="10%" />
          <Svg icon="triangle" width={12} stroke color="icon_brightest" left="90%" top="50%" />
          <Svg icon="circle" width={16} color="icon_darker" left="70%" top="90%" />
          <Svg icon="triangle" width={16} stroke color="icon_darkest" left="30%" top="65%" />
          <Svg icon="cross" width={16} stroke color="icon_pink" left="28%" top="15%" />
          <Svg icon="circle" width={6} color="icon_darkest" left="75%" top="10%" />
          <Svg icon="upDown" hiddenMobile width={8} color="icon_darkest" left="45%" top="10%" />
        </UpDownWide>
        <Svg icon="circle" hiddenMobile width={24} color="icon_darker" left="5%" top="70%" />
        <Svg icon="circle" width={6} color="icon_darkest" left="4%" top="20%" />
        <Svg icon="circle" width={12} color="icon_darkest" left="50%" top="60%" />
        <Svg icon="upDown" width={8} color="icon_darkest" left="95%" top="90%" />
        <Svg icon="upDown" hiddenMobile width={24} color="icon_darker" left="40%" top="80%" />
        <Svg icon="triangle" width={8} stroke color="icon_darker" left="25%" top="5%" />
        <Svg icon="circle" width={64} color="icon_green" left="95%" top="5%" />
        <Svg icon="box" hiddenMobile width={64} color="icon_purple" left="5%" top="90%" />
        <Svg icon="box" width={6} color="icon_darkest" left="10%" top="10%" />
        <Svg icon="box" width={12} color="icon_darkest" left="40%" top="30%" />
        <Svg icon="hexa" width={16} stroke color="icon_darker" left="10%" top="50%" />
        <Svg icon="hexa" width={8} stroke color="icon_darker" left="80%" top="70%" />
        <ContentNoParallax>
        <Inner>
          <Themed.h1>Projects</Themed.h1>
          <Themed.h2>
            { typeKey }
          </Themed.h2>
          <Navbar></Navbar>
          <Themed.div className="projects">
            {projects.map(project => (
              <ProjectCard className="project" link={ typeKey } key={ project.id } bg="linear-gradient(to right, #D4145A 0%, #FBB03B 100%)" title={ project.frontmatter.title }>
                <GatsbyImage image={ project.frontmatter.thumb.childImageSharp.gatsbyImageData }></GatsbyImage>                    
                <Themed.p>{ project.frontmatter.description }</Themed.p>                      
              </ProjectCard>
            ))}
          </Themed.div>
        </Inner>
        </ContentNoParallax>
      </div>
    </Layout>
  );
}

export const query = graphql`
query ProjectData($typeKey: String) {
  projects: allMarkdownRemark(
    sort: {fields: frontmatter___date, order: DESC}
    filter: {frontmatter: {typeKey: {eq: $typeKey}}}
  ) {
    nodes {
      id
      frontmatter {
        title
        slug
        description
        typeKey
        thumb {
          childImageSharp {
            gatsbyImageData(
              placeholder: BLURRED
            )
          }
        }
      }
    }
  }
}
`;

export default ProjectType

Answer 1

您是否尝试过通过key而不是typeKey在project-type.jsx中进行过滤？

export const query = graphql`
query ProjectData($key: String) {
  projects: allMarkdownRemark(
    sort: {fields: frontmatter___date, order: DESC}
    filter: {frontmatter: {typeKey: {eq: $key}}}
  ) {
    nodes {
      id
      frontmatter {
        title
        slug
        description
        typeKey
        thumb {
          childImageSharp {
            gatsbyImageData(
              placeholder: BLURRED
            )
          }
        }
      }
    }
  }
}
`;

我假设标记文件中的字段名为typeKey，因为您正在查询它(尽管在您的问题中您说了key)，但是，您要传递给模板的变量名为key，因为：

context: { key: 'photoman' }

我建议使用相同的命名约定来避免这种问题，但实际上，您是在传递一个作为typeKey接收的typeKey字段，这与此不匹配，所以查询没有过滤。

根据项目模板，只要您已经知道了段塞(/motion-graphics、/photo-editing、/photo-manipulation和/web-development)，就不需要使用/motion-graphics创建页面，这样您就可以在/pages文件夹中创建4个文件，名为motion-graphics.js、photo-editing.js、photo-manipulation.js和web-development.js，并在那里放置一个筛选(由key) 页面查询。