您好, 欢迎来到 !    登录 | 注册 | | 设为首页 | 收藏本站

通过内容丰富的数据以编程方式创建Gatsby页面

通过内容丰富的数据以编程方式创建Gatsby页面

您可以在构建时动态创建页面,而这样做需要向gatsby-node.js@H_403_2@文件添加一些逻辑。这是一个简单的片段。

    const path = require('path')

    exports.createPages = ({graphql, boundActionCreators}) => {
      const {createPage} = boundActionCreators
      return new Promise((resolve, reject) => {
        const storeTemplate = path.resolve('src/templates/store.js')
        resolve(
          graphql(`
            {
              allContentfulStore (limit:100) {
                edges {
                  node {
                    id
                    name
                    slug
                  }
                }
              }
            }
          `).then((result) => {
            if (result.errors) {
              reject(result.errors)
            }
            result.data.allContentfulStore.edges.forEach((edge) => {
              createPage ({
                path: edge.node.slug,
                component: storeTemplate,
                context: {
                  slug: edge.node.slug
                }
              })
            })
            return
          })
        )
      })
    }
@H_403_2@

createPages@H_403_2@已导出的是你能找到的文档的完整列表中的盖茨比节点API函数在这里

对于该查询allContentfulStore@H_403_2@,之所以这样称呼,是因为您的contentType名称store@H_403_2@gatsby查询,将为allContentful{ContentTypeName}。

最后,我制作了一个youtube视频系列,解释了如何使用Contentful构建Gatsby网站。你可以在这里找到

我希望这能回答您的问题。

其他 2022/1/1 18:18:18 有524人围观

撰写回答


你尚未登录,登录后可以

和开发者交流问题的细节

关注并接收问题和回答的更新提醒

参与内容的编辑和改进,让解决方法与时俱进

请先登录

推荐问题


联系我
置顶