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

小编典典

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

reactjs

我正在寻找有关GatsbyJS和Contentful的帮助。该文档并没有给我足够的信息。

我希望以编程方式基于内容数据创建页面。在这种情况下，数据类型是零售“商店”，其gatsby页面位于/ retail_store_name

每个商店的index.js基本上是几个具有响应的组件，其中包括商店名称和Google地方ID。

添加数据内容。这是我的示例数据模型：

{
"name": "Store"
"displayField": "shopName",
"fields": [
    {
        "id": "shopName",
        "name": "Shop Name",
        "type": "Symbol",
        "localized": false,
        "required": true,
        "validations": [
            {
            "unique": true
            }
        ],
        "disabled": false,
        "omitted": false
        },
        {
        "id": "placeId",
        "name": "Place ID",
        "type": "Symbol",
        "localized": false,
        "required": true,
        "validations": [
            {
            "unique": true
            }
        ],
        "disabled": false,
        "omitted": false
    }

}

我已将内容丰富的站点数据添加到gatsby-config.js

        // In gatsby-config.js
    plugins: [
        {
            resolve: `gatsby-source-contentful`,
            options: {
            spaceId: `your_space_id`,
            accessToken: `your_access_token`
            },
        },
    ];

查询内容丰富-我不确定应该在哪里发生。我有一个模板文件，该文件将是根据内容数据创建的每个商店网页的模型。

如前所述，这只是一些传递了props的组件。示例：

    import React, { Component } from "react";

    export default class IndexPage extends Component {
    constructor(props) {
        super(props);
        this.state = {
            placeId: "",
            shopName: "",
        };
    }
    render (){
        return (
            <ComponentExampleOne shopName={this.state.shopName} />
            <ComponentExampleTwo placeId={this.state.placeId} />
        );
    }

我真的不知道该怎么做。最终目标是为非技术用户自动发布，这些用户将在Contentful中发布新商店以在生产站点上进行更新。

阅读 379

2020-07-22

共1个答案

小编典典

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

    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
          })
        )
      })
    }

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

对于该查询allContentfulStore，之所以这样称呼，是因为您的contentType名称是storegatsby查询，将为allContentful{ContentTypeName}。

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

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

2020-07-22