Question

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

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文件的同时将它们写入控制台时，会在构建期间打印这些块。

该代码在GitHub上可用。

Answer 1

gatsby-plugin-routes中的

gatsby-config.js以某种方式干扰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-plugin-routes中删除gatsby-config.js：

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

我建议不要使用路由插件，直到您网站的其他部分运行为止。每个插件都会增加项目的复杂性，在这种情况下会导致无提示的失败。

那是一个不错的博客。我将为自己的作品集获得一些启发。：）

Gatsby页面无法以编程方式从数据中创建

1 个答案: