在 Gatsby 中以编程方式创建帖子时,如何使用多个模板显示来自 Contentful API 的博客帖子
How can I display blog posts from Contentful's API using multiple templates when programmatically creating posts in Gatsby
我一直在关注 beginner tutorial on Gatsby's website 并且对使用多个博客 post 模板有疑问。
如果博客需要使用两个或多个模板,例如:
- 一个模板包含一张图片和一个富文本块。
- 一个模板包含多个图像和多个富文本块。
在同一 URL 结构中以编程方式生成页面时,如何在 Gatsby 中实现这一点,例如:
/blog/post-title-1(使用模板 1)
/blog/post-title-2(使用模板 2)
谢谢。
当然,这是可行的,但请记住,您需要向您的代码提供该信息(所选布局)。如果您使用文件系统路由 API 遵循教程,则需要切换到创建动态页面的“经典”版本,使用 gatsby-node.js
因为需要提供这种逻辑某个地方让盖茨比知道这一点。
您可以只添加一个名为 layout
的 Contentful 字段,在本例中可以是整数或类似的东西,然后在您的 gatsby-node.js
:
const path = require("path")
exports.createPages = async ({ graphql, actions, reporter }) => {
const { createPage } = actions
const result = await graphql(
`
{
allContentfulBlogPost {
edges {
node {
layout
slug
}
}
}
}
`
)
if (result.errors) {
reporter.panicOnBuild(`Error while running GraphQL query.`)
return
}
const blogPostTemplate1 = path.resolve(`src/templates/blog-post-1.js`)
const blogPostTemplate2 = path.resolve(`src/templates/blog-post-2.js`)
const posts = result.data.allContentfulBlogPost.edges
posts.forEach((post, index) => {
createPage({
path: `/blog/${post.node.slug}/`,
component: post.node.layout === "1" ? blogPostTemplate1 : blogPostTemplate2,
context: {
slug: post.node.slug
},
})
})
})
}
文件系统路由 API 使您免于在 gatsby-node.js
中为标准方法添加这种查询 + 逻辑,但由于它不支持(目前)在您需要时进行过滤要添加一些逻辑,您需要返回到“标准”方法。
基本上,您正在获取 Contentful 数据,查询 slug
和 layout
(新字段),并根据该条件创建动态页面。
请注意,在 component
中,您将使用三元条件根据布局字段选择一个或另一个模板。当然,根据需要调整它。理想情况下,在复杂的方法(超过 2 个布局)中,它应该是一个可读性的函数。
您的遗留代码的其余部分(您的模板查询)将单独工作,因为您使用以下中的上下文提供了 slug(就像您之前所做的那样):
context: {
slug: post.node.slug
},
我一直在关注 beginner tutorial on Gatsby's website 并且对使用多个博客 post 模板有疑问。
如果博客需要使用两个或多个模板,例如:
- 一个模板包含一张图片和一个富文本块。
- 一个模板包含多个图像和多个富文本块。
在同一 URL 结构中以编程方式生成页面时,如何在 Gatsby 中实现这一点,例如:
/blog/post-title-1(使用模板 1) /blog/post-title-2(使用模板 2)
谢谢。
当然,这是可行的,但请记住,您需要向您的代码提供该信息(所选布局)。如果您使用文件系统路由 API 遵循教程,则需要切换到创建动态页面的“经典”版本,使用 gatsby-node.js
因为需要提供这种逻辑某个地方让盖茨比知道这一点。
您可以只添加一个名为 layout
的 Contentful 字段,在本例中可以是整数或类似的东西,然后在您的 gatsby-node.js
:
const path = require("path")
exports.createPages = async ({ graphql, actions, reporter }) => {
const { createPage } = actions
const result = await graphql(
`
{
allContentfulBlogPost {
edges {
node {
layout
slug
}
}
}
}
`
)
if (result.errors) {
reporter.panicOnBuild(`Error while running GraphQL query.`)
return
}
const blogPostTemplate1 = path.resolve(`src/templates/blog-post-1.js`)
const blogPostTemplate2 = path.resolve(`src/templates/blog-post-2.js`)
const posts = result.data.allContentfulBlogPost.edges
posts.forEach((post, index) => {
createPage({
path: `/blog/${post.node.slug}/`,
component: post.node.layout === "1" ? blogPostTemplate1 : blogPostTemplate2,
context: {
slug: post.node.slug
},
})
})
})
}
文件系统路由 API 使您免于在 gatsby-node.js
中为标准方法添加这种查询 + 逻辑,但由于它不支持(目前)在您需要时进行过滤要添加一些逻辑,您需要返回到“标准”方法。
基本上,您正在获取 Contentful 数据,查询 slug
和 layout
(新字段),并根据该条件创建动态页面。
请注意,在 component
中,您将使用三元条件根据布局字段选择一个或另一个模板。当然,根据需要调整它。理想情况下,在复杂的方法(超过 2 个布局)中,它应该是一个可读性的函数。
您的遗留代码的其余部分(您的模板查询)将单独工作,因为您使用以下中的上下文提供了 slug(就像您之前所做的那样):
context: {
slug: post.node.slug
},