Gatsby 在从 Contentful CMS 提供新变量时生成页面
Gatsby to generate pages when a new variable is served from Contentful CMS
所以我用产品构建了一个 Gatsby 博客,它可以以编程方式为每个产品生成页面。我想添加到这个项目,以便它也生成产品类别的页面。每个类别页面将显示该类别中的所有产品。
内容由 Contentful CMS 提供。
这可能吗?添加第二个布局模板并创建此类页面?
exports.createPages = ({ graphql, boundActionCreators }) => {
const { createPage } = boundActionCreators
return new Promise((resolve, reject) => {
const blogPost = path.resolve('./src/templates/blog-post.js')
const categoryPage = path.resolve('./src/templates/category-post.js')
resolve(
graphql(
`
{
allContentfulBlog(limit: 200) {
edges {
node {
id
categories
mainTitle
mainImg {
id
}
mainText {
childMarkdownRemark {
excerpt
}
}
slug
}
}
}
}
`
)
.then(result => {
if (result.errors) {
console.log(result.errors)
reject(result.errors)
}
result.data.allContentfulBlog.edges.forEach(edge => {
createPage({
path: edge.node.slug,
component: blogPost,
context: {
slug: edge.node.slug,
},
})
})
return
})
.then(result => {
result.forEach(category => {
createPage({
path: '/' + edge.node.category,
component: categoryPage,
context: {
slug: edge.node.category,
},
})
})
})
)
})
}
promise 中的第一个 .then() 方法工作得很好,我的想法是简单地添加第二个 .then(),使用类别页面的模板。
终端显示:
您可以在产品页面循环后插入此内容,但您没有类别数据。可以从产品中收集它,但这将是一种古怪的解决方法。
您需要在顶层单独查询、单独承诺和组合承诺 (.all()
)。
所以我用产品构建了一个 Gatsby 博客,它可以以编程方式为每个产品生成页面。我想添加到这个项目,以便它也生成产品类别的页面。每个类别页面将显示该类别中的所有产品。 内容由 Contentful CMS 提供。
这可能吗?添加第二个布局模板并创建此类页面?
exports.createPages = ({ graphql, boundActionCreators }) => {
const { createPage } = boundActionCreators
return new Promise((resolve, reject) => {
const blogPost = path.resolve('./src/templates/blog-post.js')
const categoryPage = path.resolve('./src/templates/category-post.js')
resolve(
graphql(
`
{
allContentfulBlog(limit: 200) {
edges {
node {
id
categories
mainTitle
mainImg {
id
}
mainText {
childMarkdownRemark {
excerpt
}
}
slug
}
}
}
}
`
)
.then(result => {
if (result.errors) {
console.log(result.errors)
reject(result.errors)
}
result.data.allContentfulBlog.edges.forEach(edge => {
createPage({
path: edge.node.slug,
component: blogPost,
context: {
slug: edge.node.slug,
},
})
})
return
})
.then(result => {
result.forEach(category => {
createPage({
path: '/' + edge.node.category,
component: categoryPage,
context: {
slug: edge.node.category,
},
})
})
})
)
})
}
promise 中的第一个 .then() 方法工作得很好,我的想法是简单地添加第二个 .then(),使用类别页面的模板。
终端显示:
您可以在产品页面循环后插入此内容,但您没有类别数据。可以从产品中收集它,但这将是一种古怪的解决方法。
您需要在顶层单独查询、单独承诺和组合承诺 (.all()
)。