如何解决Gatsby + Contentful以编程方式创建类别页面？
我想知道在将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）。
我非常感谢您的反馈！
解决方法
由于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并检索您需要用来建立类别页面的其他数据。
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。