从内容数据以编程方式创建 Gatsby 页面 [英] Programmatically create Gatsby pages from Contentful data
问题描述
我正在寻求有关 GatsbyJS 和 Contentful 的帮助.文档没有给我足够的信息.
I am looking for help with GatsbyJS and Contentful. The docs aren't quite giving me enough info.
我希望基于内容丰富的数据以编程方式创建页面.在这种情况下,数据类型是零售商店",在/retail_store_name
I am looking to programmatically create pages based on contentful data. In this case, the data type is a retail "Store" with a gatsby page at /retail_store_name
每个商店的 index.js 基本上是几个 react 组件,其中传递了 props,例如商店名称和谷歌地点 ID.
The index.js for each store is basically a couple of react components with props passed in e.g. shop name and google place ID.
向内容添加数据.这是我的示例数据模型:
Add data to contentful. Here is my example data model:
{
"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
I've added the contentful site data to gatsby-config.js
// In gatsby-config.js
plugins: [
{
resolve: `gatsby-source-contentful`,
options: {
spaceId: `your_space_id`,
accessToken: `your_access_token`
},
},
];
查询内容丰富 - 我不确定这应该发生在哪里.我有一个模板文件,它可以作为根据内容数据创建的每个商店网页的模型.
Query contentful - I'm not sure where this should happen. I've got a template file that would be the model for each store webpage created from contentful data.
如前所述,这只是一些传入 props 的组件.示例:
As mentioned this is just some components with props passed in. Example:
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 中发布新商店以在生产站点上进行更新.
I'm really not sure how to go about this. The end goal is auto publishing for non-tech users, who post new stores in Contentful to be updated on the production site.
推荐答案
您可以在构建时动态创建页面,为此您需要向 gatsby-node.js
文件添加一些逻辑.这是一个简单的片段.
You can create pages dynamically at build time and to do that you need to add some logic to the gatsby-node.js
file. Here is a simple snippet.
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 函数,您可以在文档 这里.
the createPages
that was exported is a Gatsby Node API function you can find the complete list in the docs here.
对于查询 allContentfulStore
是这样调用的,因为您的 contentType 名称是 store
,gatsby 查询将是 allContentful{ContentTypeName}.
For the query allContentfulStore
it's called like that because your contentType name is store
the gatsby query will be allContentful{ContentTypeName}.
最后,我创建了一个 YouTube 视频系列,解释了如何使用 Contentful 构建 Gatsby 网站.您可以在此处
Finally, I created a youtube video series explaining how you can build a Gatsby website with Contentful. You can find it here
我希望这能回答你的问题.干杯,哈立德
I hope this answer your question. Cheers, Khaled
这篇关于从内容数据以编程方式创建 Gatsby 页面的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!