gatsby - Gatsby 页面不会以编程方式从数据中创建
问题描述
我正在尝试使用 Gatsby (v2.18.17) 为我的博客生成页面。我已经在 Gatsby 网站上使用 createPages API 实现了教程第七部分的代码示例。页面不会生成,也没有警告或错误。
盖茨比-node.js
const path = require(`path`)
const { createFilePath } = require(`gatsby-source-filesystem`)
exports.onCreateNode = ({ node, getNode, actions }) => {
const { createNodeField } = actions
if (node.internal.type === `MarkdownRemark`) {
const slug = createFilePath({ node, getNode, basePath: `pages` })
createNodeField({
node,
name: `slug`,
value: slug,
})
}
}
exports.createPages = async ({ graphql, actions }) => {
const { createPage } = actions
const result = await graphql(`
query {
allMarkdownRemark {
edges {
node {
fields {
slug
}
}
}
}
}
`)
result.data.allMarkdownRemark.edges.forEach(({ node }) => {
createPage({
path: node.fields.slug,
component: path.resolve(`./src/templates/post.js`),
context: {
// Data passed to context is available
// in page queries as GraphQL variables.
slug: node.fields.slug,
},
})
})
}
src/模板/post.js
import React from "react"
import Layout from "../components/layout"
export default () => {
return (
<Layout>
<div>Hello blog post</div>
</Layout>
)
}
仅生成 11 个页面的构建输出(其中 8 个是手动创建的 - 我不确定其他 3 个页面是什么)
我的降价博客帖子应该有超过 200 个页面content/posts
> gatsby develop
success open and validate gatsby-configs - 0.034s
success load plugins - 0.578s
success onPreInit - 0.002s
success initialize cache - 0.007s
success copy gatsby files - 0.071s
success onPreBootstrap - 0.008s
success createSchemaCustomization - 0.009s
success source and transform nodes - 0.233s
success building schema - 0.304s
success createPages - 0.101s
success createPagesStatefully - 0.090s
success onPreExtractQueries - 0.001s
success update schema - 0.033s
success extract queries from components - 0.270s
success write out requires - 0.046s
success write out redirect data - 0.002s
success Build manifest and related icons - 0.106s
success onPostBootstrap - 0.112s
⠀
info bootstrap finished - 3.825 s
⠀
success run queries - 0.039s - 12/12 303.82/s
我想知道我的网站是否有配置问题。但是,当我在迭代 Markdown 文件时将 slug 写入控制台时,会在构建期间打印这些 slug。
代码可在GitHub上找到。
解决方案
gatsby-plugin-routes
在您以某种方式gatsby-config.js
干扰您内部的 createPages 功能。gatsby-node.js
gatsby-node.js
当我编辑您的项目时,这是有效的:
exports.createPages = ({ actions, graphql }) => {
const { createPage } = actions;
const blogTemplate = path.resolve("src/templates/post.js");
return graphql(`
{
allMarkdownRemark(filter: {fileAbsolutePath: {regex: "content/posts/"}}) {
edges {
node {
fields {
slug
}
}
}
}
}
`).then((result) => {
if (result.errors) {
return Promise.reject(result.errors);
}
/* --- Create blog pages --- */
result.data.allMarkdownRemark.edges.forEach(({ node }) => {
console.log(node.fields.slug);
createPage({
path: `/blog${node.fields.slug}`,
component: blogTemplate,
context: {
slug: node.fields.slug,
},
});
});
});
};
您需要gatsby-plugin-routes
从您的gatsby-config.js
:
/* {
resolve: `gatsby-plugin-routes`,
options: {
path: `${__dirname}/gatsby-routes.js`,
},
},*/
我建议在您网站的其他部分运行之前不使用路由插件。每个插件都会增加项目的复杂性,在这种情况下会导致静默失败。
这是一个不错的博客。我将为我自己的投资组合获取一些灵感。:)
推荐阅读
- kubernetes - Rancher:能够获取,但不能创建对象( dial tcp [::1]:6443: connect: network is unreachable)
- c++ - length() 函数返回不正确的值,而如果在 C++ 的主函数中实现相同的逻辑,它是否正确?
- css - 如何手动将 Faux Bold 应用于特定字体文件(.ttf)以生成新字体文件(.ttf)
- apache-spark - Big Query 无法将字符串转换为时间戳
- kotlin - 是否可以复制 KClass 并更改其属性?
- debugging - 如何调试 woocommerce 覆盖的文件夹
- scala - 如何从 Source 或 Flow 中的元素生成物化值?
- java - 在Java中存储货币双倍(浮点),没有任何数学,总是准确的吗?
- php - 如何从 htaccess 的重写条件中排除子文件夹规则
- typescript - 打字稿:动态检查第二个参数键在第一个参数上不存在