Gatsby MDX 显示标题和 slug 但找不到页面

Question

我正在学习 Gatsby，我想将 MDX 用于博客页面。我按照教程here 以编程方式创建页面。

我可以在我的 GraphQL 中看到它们，并且显示所有文章的列表正在使用它们的标题和 slug，但是当我单击链接打开它们或输入它们的地址时，我有一个 404 页面。你知道它的来源吗？

这是我的代码：

gatsby-node.js：

exports.onCreateNode = ({ node, actions, getNode }) => {
    const { createNodeField } = actions

    if (node.internal.type === "Mdx") {
        const value = createFilePath({ node, getNode })

        createNodeField({
            name: "slug",
            node,
            value: `/blog${value}`,
        })
    }
}

gatsby-config.js：

plugins: [
        {
        resolve: `gatsby-plugin-mdx`,
        options: {
            defaultLayouts: { default: path.resolve('./src/layouts/post.js') },
            extensions: [`.mdx`, `.md`],
        },
    },

    {
        resolve: `gatsby-source-filesystem`,
        options: {
            name: `posts`,
            path: `${__dirname}/src/posts`
        }
    },
],

index.js（带有列表）：

<ul>
    {posts.map(({ node: post }) => (
        <li key={post.id}>
            <Link to={post.fields.slug}>
                <h2>{post.frontmatter.title}</h2>
            </Link>
            <p>{post.excerpt}</p>
        </li>
    ))}
</ul>

index.js 中的查询

export const pageQuery = graphql`
    query blogIndex {
        allMdx {
            edges {
                node {
                    id
                    excerpt
                    frontmatter {
                        title
                    }
                    fields {
                        slug
                    }
                }
            }
        }
    }
`

模板：

<div>
    <div className="content" dangerouslySetInnerHTML={{ __html: post.html }}></div>
</div>

以及模板的查询：

export const pageQuery = graphql`
    query BlogPostQuery($id: String) {
        mdx(id: { eq: $id }) {
            id
            body
            frontmatter {
                title
            }
        }
    }
`

如果你想测试它，我做了一个 repo：https://github.com/JulSeb42/gatsby-mdx

感谢您的回答！

Answer 1

您缺少页面创建部分。在您的gatsby-node.js 中添加以下内容：

const path = require("path")

exports.createPages = async ({ graphql, actions, reporter }) => {
  // Destructure the createPage function from the actions object
  const { createPage } = actions

  const result = await graphql(`
    query {
      allMdx {
        edges {
          node {
            id
            fields {
              slug
            }
          }
        }
      }
    }
  `)

  if (result.errors) {
    reporter.panicOnBuild('?  ERROR: Loading "createPages" query')
  }

  // Create blog post pages.
  const posts = result.data.allMdx.edges

  // you'll call `createPage` for each result
  posts.forEach(({ node }, index) => {
    createPage({
      // This is the slug you created before
      // (or `node.frontmatter.slug`)
      path: node.fields.slug,
      // This component will wrap our MDX content
      component: path.resolve(`./src/components/posts-page-layout.js`),
      // You can use the values in this context in
      // our page layout component
      context: { id: node.id },
    })
  })
}

关于您的其他问题，这应该是一个单独的问题，但是，如果组件默认导出，则导入时不需要大括号。另外，还需要返回一个值。