亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

正確地將第二個動態模板添加到 Gatsby/NetlifyCMS - 我哪里出錯了?

正確地將第二個動態模板添加到 Gatsby/NetlifyCMS - 我哪里出錯了?

蕭十郎 2023-07-20 16:07:45
我添加了一個與 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,    })  }}//Blogasync 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.jsconst { 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            }          }        }      }    }  `)}正如您所看到的,我在 config.yml 中添加了一個模板類型,該模板類型現在顯示在我的 frontmatter 中以分隔我的帖子,但我認為這可能讓我更加困惑。從 frontmatter 中刪除模板類型完全沒問題,但確實需要一種非常簡單的方法才能實現這一點。
查看完整描述

2 回答

?
Smart貓小萌

TA貢獻1911條經驗 獲得超7個贊

嘗試為循環添加別名以避免作用域元素。


? 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。

查看完整回答
反對 回復 2023-07-20
?
墨色風雨

TA貢獻1853條經驗 獲得超6個贊

const { serviceData } = 等待 getServiceData(graphql)

不起作用,因為沒有從(返回)serviceData返回的對象中- 它始終是一個命名屬性。graphql(getServiceDatadata

您可以在解構中重用data(如果之前data不需要)或使用別名:

const { data: serviceData } = await getServiceData(graphql)


查看完整回答
反對 回復 2023-07-20
  • 2 回答
  • 0 關注
  • 173 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號