Gatsby 页面不会以编程方式从数据中创建

Question

我正在尝试使用 Gatsby (v2.18.17) 为我的博客生成页面。我已经在 Gatsby 网站上使用 createPages API 的教程中的 part seven 实现了代码示例。页面不会生成，也没有警告或错误。

gatsby-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/templates/post.js

import React from "react"
import Layout from "../components/layout"
export default () => {
  return (
    <Layout>
      <div>Hello blog post</div>
    </Layout>
  )
}

构建输出只生成了 11 个页面（其中 8 个是手动创建的 - 我不确定其他 3 个页面是什么）

我在content/posts的markdown博客帖子应该有200多个页面

> 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获取。

Answer 1

gatsby-config.js 中的gatsby-plugin-routes 以某种方式干扰了gatsby-node.js 中的 createPages 函数。

这里是我编辑您的项目时起作用的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-config.js 中删除gatsby-plugin-routes：

/*    {
      resolve: `gatsby-plugin-routes`,
      options: {
        path: `${__dirname}/gatsby-routes.js`,
      },
    },*/

我建议在您网站的其他部分运行之前不要使用路线插件。每个插件都会为您的项目增加复杂性，在这种情况下会导致静默失败。

这是一个不错的博客。我将为我自己的投资组合获取一些灵感。 :)