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

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

在 Gatsby.js 中以編程方式創建多種類型的頁面

在 Gatsby.js 中以編程方式創建多種類型的頁面

慕碼人2483693 2023-06-29 15:37:57
我正在使用 GatsbyJS 構建一個網站。我在兩個不同的文件夾中有 markdown 文件:/content/collections并且/content/posts我希望 Gatsby 為每個 markdown 文件創建一個頁面,并使用相應的模板(collection.js 和 post.js)。所以我在 gatsby-node.js 文件中寫了這個:const path = require('path');const { createFilePath } = require('gatsby-source-filesystem');exports.onCreateNode = ({ node, getNode, actions }) => {  const { createNodeField } = actions;  if (node.internal.type === 'MarkdownRemark') {    const longSlug = createFilePath({ node, getNode, basePath: 'content' });    const slug = longSlug.split('/');    createNodeField({      node,      name: 'slug',      value: `/${slug[slug.length - 2]}/`,    });  }};exports.createPages = async ({ graphql, actions }) => {  const { createPage } = actions;  const result = await graphql(`    query {      allFile(filter: {relativeDirectory: {eq: "collections"}}) {        edges {          node {            childMarkdownRemark {              fields {                slug              }            }          }        }      }    }  `);  result.data.allFile.edges.forEach(({ node }) => {    createPage({      path: node.childMarkdownRemark.fields.slug,      component: path.resolve('./src/templates/collection.js'),      context: {        slug: node.childMarkdownRemark.fields.slug,      },    });  });};exports.createPages = async ({ graphql, actions }) => {  const { createPage } = actions;  const result = await graphql(`    query {      allFile(filter: {relativeDirectory: {eq: "posts"}}) {        edges {          node {            childMarkdownRemark {              fields {                slug              }            }          }        }      }    }  `);  result.data.allFile.edges.forEach(({ node }) => {    createPage({      path: node.childMarkdownRemark.fields.slug,      component: path.resolve('./src/templates/post.js'),      context: {        slug: node.childMarkdownRemark.fields.slug,      },    });  });};認為這會起作用。它確實適用于我放入的第二種類型。(在這種情況下,它創建帖子,但不創建集合。如果我顛倒調用 createPages 的順序,它會交換,但它永遠不會創建所有這些)
查看完整描述

1 回答

?
蕪湖不蕪

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

問題是您用第二個函數聲明覆蓋了第一個函數聲明。有點像這樣:


var a = "hello"

a = "world"

createPage相反,您應該在單個函數中執行所有查詢并調用要創建的所有頁面,如下所示:


exports.createPages = ({ graphql, actions }) => {

  const { createPage } = actions;


  const collections = graphql(`

    query {

      allFile(filter: {relativeDirectory: {eq: "collections"}}) {

        edges {

          node {

            childMarkdownRemark {

              fields {

                slug

              }

            }

          }

        }

      }

    }

  `).then(result => {

    result.data.allFile.edges.forEach(({ node }) => {

      createPage({

        path: node.childMarkdownRemark.fields.slug,

        component: path.resolve('./src/templates/collection.js'),

        context: {

          slug: node.childMarkdownRemark.fields.slug,

        },

      });

    });

  })


  const posts = graphql(`

    query {

      allFile(filter: {relativeDirectory: {eq: "posts"}}) {

        edges {

          node {

            childMarkdownRemark {

              fields {

                slug

              }

            }

          }

        }

      }

    }

  `).then(result => {

    result.data.allFile.edges.forEach(({ node }) => {

      createPage({

        path: node.childMarkdownRemark.fields.slug,

        component: path.resolve('./src/templates/post.js'),

        context: {

          slug: node.childMarkdownRemark.fields.slug,

        },

      });

    });

  })


  return Promise.all([collections, posts])

};


查看完整回答
反對 回復 2023-06-29
  • 1 回答
  • 0 關注
  • 178 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

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

幫助反饋 APP下載

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

公眾號

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