正确地将第二个动态模板添加到 Gatsby/NetlifyCMS - 我哪里出错了？

Posted 2023-03-08

【中文标题】正确地将第二个动态模板添加到 Gatsby/NetlifyCMS - 我哪里出错了？

【英文标题】：Adding a 2nd dynamic template to Gatsby/NetlifyCMS correctly - Where am I going wrong?

【发布时间】：2021-02-20 22:31:06

【问题描述】：

我添加了一个与 NetlifyCMS 集成的博客页面，它运行良好。但是，我需要在我的网站上再添加一个显示服务的动态页面，并且每个服务都有自己生成的模板，理论上与博客页面非常相似。

所以我阅读了一堆不同的解决方案，但一直碰壁。我在这里做错了什么？以及使这项工作最简单的方法是什么，因为我不会添加任何其他动态页面。

这是我刚拥有博客页面时的 gatsby-node.js，一切正常：

const  createFilePath  = require("gatsby-source-filesystem")
exports.onCreateNode = ( node, actions, getNode ) => 
  const  createNodeField  = actions
  if (node.internal.type === `MarkdownRemark`) 
    const value = createFilePath( node, getNode )
    createNodeField(
      name: `slug`,
      node,
      value,
    )
  


//Blog
async function getPageData(graphql) 
  return await graphql(`
    
      blogPosts: allMarkdownRemark 
        edges 
          node 
            fields 
              slug
            
          
        
      
    
  `)


const path = require(`path`)
exports.createPages = async ( graphql, actions ) => 
  const  data  = await getPageData(graphql)
  data.blogPosts.edges.forEach(( node ) => 
    const  slug  = node.fields
    actions.createPage(
      path: `/articles$slug`,
      component: path.resolve("./src/templates/articlepost.js"),
      context: slug: slug ,
    )
  )

所以我试了一下并尝试做同样的事情，但添加了我的服务页面。这是最终的样子：

gatsby-node.js

const  createFilePath  = require("gatsby-source-filesystem")
exports.onCreateNode = ( node, actions, getNode ) => 
  const  createNodeField  = actions
  if (node.internal.type === `MarkdownRemark`) 
    const value = createFilePath( node, getNode )
    createNodeField(
      name: `slug`,
      node,
      value,
    )
  


async function getBlogData(graphql) 
  return await graphql(`
    
      blogPosts: allMarkdownRemark(
        filter:  frontmatter:  template:  eq: "articlepost"   
      ) 
        edges 
          node 
            fields 
              slug
            
          
        
      
    
  `)


async function getServiceData(graphql) 
  return await graphql(`
    
      servicePosts: allMarkdownRemark(
        filter:  frontmatter:  template:  eq: "service"   
      ) 
        edges 
          node 
            fields 
              slug
            
          
        
      
    
  `)


const path = require(`path`)
exports.createPages = async ( graphql, actions ) => 
  const blogPage = path.resolve("./src/templates/articlepost.js")
  const servicePage = path.resolve("./src/templates/service.js")

  const  data  = await getBlogData(graphql)
  data.blogPosts.edges.forEach(( node ) => 
    const  slug  = node.fields
    actions.createPage(
      path: `/articles$slug`,
      component: blogPage,
      context:  slug: slug ,
    )
  )

  const  serviceData  = await getServiceData(graphql)
  serviceData.servicePosts.edges.forEach(( node ) => 
    const  slug  = node.fields
    actions.createPage(
      path: `/streaming-services$slug`,
      component: servicePage,
      context:  slug: slug ,
    )
  )

我的博客页面仍然可以正常工作，但出现错误：

如您所见，我在我的 config.yml 中添加了一个模板类型，它现在显示在我的 frontmatter 中以分隔我的帖子，但我认为它可能让我更加困惑。从 frontmatter 中删除模板类型完全没问题，但确实需要一种非常简单的方法才能工作。

非常感谢！

【问题讨论】：

别名应该用于解构

@xadm 您介意详细说明吗？抱歉，我是新手。

【参考方案1】：

尝试为你的循环添加别名以避免作用域元素。

  const  data  = await getBlogData(graphql)
  data.blogPosts.edges.forEach(( node: post ) => 
    const  slug  = post.fields
    actions.createPage(
      path: `/articles$slug`,
      component: blogPage,
      context:  slug: slug ,
    )
  )

还有：

  serviceData.servicePosts.edges.forEach(( node: service ) => 
    const  slug  = service.fields
    actions.createPage(
      path: `/streaming-services$slug`,
      component: servicePage,
      context:  slug: slug ,
    )
  )

基本上，您正在为循环项目添加别名，以使它们分别为 post 和 service 以使其唯一（不同于上一个循环）。

我会推荐阅读this article from David Walsh。

【参考方案2】：

const serviceData = 等待 getServiceData(graphql)

在从 graphql(（由 getServiceData 返回）返回的对象中没有 serviceData 时不起作用 - 它始终是 data 命名属性。

您可以重用data（如果以后不需要更早的data）或在解构中使用别名：

const  data: serviceData  = await getServiceData(graphql)