我正在寻找GatsbyJS和Contentful的帮助。文档并没有给我足够的信息。
我希望以编程方式创建基于内容数据的页面。在这种情况下,数据类型是零售店"商店"在/ retail_store_name
的gatsby页面每个商店的index.js基本上是几个反应组件,其中传递了道具,例如商店名称和谷歌地址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`
},
},
];
查询内容 - 我不知道这应该发生在哪里。我有一个模板文件,它是从内容数据创建的每个商店网页的模型。
如前所述,这只是传入道具的一些组件。例如:
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中发布新商店以在生产站点上进行更新。
答案 0 :(得分: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 Node API函数,您可以在文档here中找到完整列表。
对于查询allContentfulStore
,它被称为,因为您的contentType名称为store
,gatsby查询将为allContentful {ContentTypeName}。
最后,我创建了一个YouTube视频系列,解释了如何使用Contentful构建Gatsby网站。你可以找到它here
我希望这能回答你的问题。 干杯, 物语