在'gatsby-node'中使用不同的模板创建多个页面可以通过以下步骤实现:
const path = require('path');
exports.createPages = async ({ graphql, actions }) => {
const { createPage } = actions;
// 在这里编写创建页面的逻辑
};
exports.createPages = async ({ graphql, actions }) => {
const { createPage } = actions;
const result = await graphql(`
query {
allMarkdownRemark {
edges {
node {
frontmatter {
template
path
}
}
}
}
}
`);
// 在这里处理查询结果
};
exports.createPages = async ({ graphql, actions }) => {
const { createPage } = actions;
const result = await graphql(`
query {
allMarkdownRemark {
edges {
node {
frontmatter {
template
path
}
}
}
}
}
`);
result.data.allMarkdownRemark.edges.forEach(({ node }) => {
const { template, path } = node.frontmatter;
// 根据模板创建页面
if (template === 'template1') {
createPage({
path: path,
component: path.resolve('./src/templates/template1.js'),
context: {
// 可选:传递额外的数据给模板组件
},
});
} else if (template === 'template2') {
createPage({
path: path,
component: path.resolve('./src/templates/template2.js'),
context: {
// 可选:传递额外的数据给模板组件
},
});
}
});
};
在上述代码中,我们根据模板的不同,使用不同的模板文件来创建页面。你需要根据自己的项目结构和需求来修改模板文件的路径和名称。
这样,当你运行Gatsby开发服务器时,'gatsby-node.js'文件将被执行,根据查询结果创建多个页面。
请注意,上述代码中的路径和文件名仅供参考,你需要根据自己的项目结构和需求进行相应的修改。
推荐的腾讯云相关产品:腾讯云云服务器(https://cloud.tencent.com/product/cvm)和腾讯云云函数(https://cloud.tencent.com/product/scf)。
希望以上信息对你有所帮助!
领取专属 10元无门槛券
手把手带您无忧上云