在 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 模板有疑问。

如果博客需要使用两个或多个模板,例如:

  1. 一个模板包含一张图片和一个富文本块。
  2. 一个模板包含多个图像和多个富文本块。

在同一 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 数据,查询 sluglayout(新字段),并根据该条件创建动态页面。

请注意,在 component 中,您将使用三元条件根据布局字段选择一个或另一个模板。当然,根据需要调整它。理想情况下,在复杂的方法(超过 2 个布局)中,它应该是一个可读性的函数。

您的遗留代码的其余部分(您的模板查询)将单独工作,因为您使用以下中的上下文提供了 slug(就像您之前所做的那样):

      context: {
        slug: post.node.slug
      },