Question

我想知道在将Contentful用作CMS时如何使用Gatsby.JS以编程方式设置类别页面吗？

我知道在MDX中，您可以简单地将gatsby-node.js配置为如下所示，以编程方式创建类别页面：

  result.data.allMDX.categories.distinct.forEach((category) => {
createPage({
  path: `/${category}`,
  component: path.resolve(`src/templates/category-template.js`),
  context: {
    category,
  },
})

如何使用Contentful实现相同的目标？我在网上找不到任何好的资源。没人在谈论如何使用Gatsby + Contentful以编程方式设置类别页面。

这里是我当前的gatsby-node.js文件：

const path = require('path')

exports.createPages = async ({ graphql, actions }) => {
  const { createPage } = actions
  const result = await graphql(`
  query GetStrains {
    strains: allContentfulStrains(filter: {node_locale: {eq: "en-US"}}) {
      nodes {
        slug
      }
    }
    categories: allContentfulStrains {
      distinct(field: category)
    }
  }
  `)


  result.data.strains.nodes.forEach(strain => {
    createPage({
      path: `/strains/${strain.slug}`,
      component: path.resolve(`src/templates/strain-template.js`),
      context: {
        slug: strain.slug
      },
    })
  })

  result.data.allContentfulStrains.categories.distinct.forEach((category) => {
    createPage({
      path: `/${category}`,
      component: path.resolve(`src/templates/category-template-strains.js`),
      context: {
        category,
      },
    })
  })

正如您在上面看到的，我尝试以与MDX相同的方式添加类别，但无法正常工作（OFC）。

我非常感谢您的反馈！

Answer 1

由于Contentful或Gatsby都不具有“类别”的概念，并且对于可以代表您应用中类别的页面也没有任何约定，因此很难期望会有这种先有技术。

>

如果您要基于另一节点（例如yAxis: { data: null, axisTick: { show: false }, splitLine: { show: true }, axisLine: { show: true }, axisLabel: { show: true, formatter: (value: any, index: number) => { return value; } }, min: 0, max: this.chartAssets.length - 1, // this line here cased this behavior inverse: true, }）的category字段创建页面，则需要查询这些节点并整理/删除-在为每个唯一的contentfulStrain调用createPage之前，根据需要进行复制。像这样：

category

然后在const { data: { strains: { nodes: strains }, }, } = await graphql(` { strains: allContentfulStrains(filter: { node_locale: { eq: "en-US" } }) { nodes { slug category } } } `) strains // Convert from strains to categories .reduce((categories, strain) => { categories.add(strain.category) return categories }, new Set()) // Create a page for each category .forEach((category) => { createPage({ // TODO: use a slugify function to create a url-friendly slug // for `category` before using it as the path. path: `/${category}`, component: path.resolve(`src/templates/category-template-strains.js`), context: { category, }, }) })中，您将获得一个查询，该查询将过滤src/templates/category-template-strains.js字段上的allContentfulStrains并检索您需要用来建立类别页面的其他数据。

（Gatsby + Contentful）以编程方式创建类别页面？

1 个答案: