代码之家 › 专栏 › 技术社区 › Barney

从有内容的数据以编程方式创建Gatsby页面

gatsby contentful graphql reactjs javascript

9

Barney · 技术社区 · 7 年前

我正在寻求盖茨比和满足的帮助。医生没有给我足够的信息。

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

索引。每个店铺的js基本上是一对带有道具的react组件,例如店铺名称和google place ID。

将数据添加到contentful。下面是我的示例数据模型:

{
    "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配置中。js公司

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

Query contentful-我不确定这应该发生在哪里。我有一个模板文件,它将是从内容数据创建的每个商店网页的模型。

如前所述,这只是一些传递了道具的组件。例子:

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

我真的不知道该怎么办。最终目标是为非技术用户提供自动发布,这些用户发布新的商店,并在生产网站上进行更新。

1 回复 | 直到 7 年前

1

13

Khaled Garbaya 6 年前

您可以在构建时动态创建页面,为此需要向 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 导出的是一个Gatsby节点API函数,您可以在文档中找到完整的列表 here .

用于查询 allContentfulStore 之所以这样叫是因为您的contentType名称是 store gatsby查询将是allContentful{ContentTypeName}。

最后,我创建了一个youtube视频系列,解释如何创建一个内容丰富的盖茨比网站。你可以找到它 here

我希望这能回答你的问题。干杯哈立德