Gatsby mdx页面放置在src/pages的子文件夹中时未完全呈现

Question

我一直在将一个WordPress网站转换为Gatsby，使用gatsby develop一切都很好，但在使用gatsby build构建之后，一些页面似乎只呈现了页面主体，没有包装布局或样式。我使用的是带有mdx的markdown页面，我将所有的markdown文件都放在src/pages目录的子文件夹下，如下所示：

src/pages/
--project/
--contact.md
--outputs.md
--project.md
--sources.md
--software/
--apps.md
--frontend.md
--system.md

上述结构更多的是出于组织原因，而不是其他原因(实际上有更多的mdx文件(。然而，它也与网站的整体路径结构相对应。在我构建的网站中，当我访问http://localhost:9000/contact时，页面呈现得很完美，但当我访问http://localhost:9000/project或与该文件夹相关的任何其他页面时，我只看到页面主体(文本内容(，没有布局组件包装或样式。软件文件夹下的所有内容都显示良好。

每个markdown文件都有一个以通常方式在frontmatter中定义的slug。在src/project/project.md中定义的段塞就是'/project'。src/project/contact.md的段塞为'/project/contact'。

很明显，src/pages/project/project.md的存在造成了问题，但我不知道确切的原因。我试着将其重命名为src/pages/project/index.md，但没有成功。有趣的是，当我查看public/project时，我看到顶层有一个index.html，每个子页面都有子文件夹，每个子文件夹都包含它的index.html。对于public/software，顶层没有index.html。

我的gatsby-config.js(相关部分(：

{
resolve: `gatsby-source-filesystem`,
options: {
name: `pages`,
path: `${__dirname}/src/pages`,
},
},
{
resolve: `gatsby-plugin-mdx`,
options: {
extensions: [`.md`, `.mdx`, `.markdown`],
gatsbyRemarkPlugins: [
{
resolve: `gatsby-remark-images`,
options: {
maxWidth: 1024,
},
},
],
},
},

我的模板(在templates/page.js下-我使用了一些MUI组件(：

export default function SitePageTemplate({ data: { mdx } }) {
const { frontmatter, body } = mdx;
const { title } = frontmatter;
return (
<Layout>
<Seo title={title} />
<Container fixed>
<Stack direction="row" justifyContent="space-between">
<SideBar/>
<div style={ { padding: "0 0 0 3.5%", width: "75%" } }>
<MDXRenderer>{body}</MDXRenderer>
</div>
</Stack>
</Container>
</Layout>
);
}
export const pageQuery = graphql`
query ($id: String!) {
mdx(id: { eq: $id }) {
body
frontmatter {
date(formatString: "MMMM DD, YYYY")
slug
title
}
}
}`

我的gatsby-node.js:

const path = require("path");
exports.createPages = async ({ graphql, actions, reporter }) => {
const { createPage } = actions
createPage({
path: "/using-dsg",
component: require.resolve("./src/templates/using-dsg.js"),
context: {},
defer: true,
})
const result = await graphql(`
query MARKDOWN {
allMdx {
edges {
node {
id
frontmatter {
date(formatString: "MMMM DD, YYYY")
slug
title
}
}
}
}
}
`);
if (result.errors) {
reporter.panicOnBuild("🚨  ERROR: Loading "createPages" query");
}
const md = result.data.allMdx.edges;
md.forEach(({ node }, index) => {
createPage({
// This component will wrap our MDX content
component: path.resolve("./src/templates/page.js"),
// Pass any value you want to access inside the template. They'll be available via `props`.
context: {
id: node.id
},
// Slug defined with frontmatter in each MDX file.
path: node.frontmatter.slug
});
});
}

如果我把所有的markdown文件都放在src/pages目录下，问题就解决了。但我想保留上面的文件夹布局，以便正确组织标记。如何在避免这个问题的同时做到这一点？

Answer 1

好吧，几个月后回到这个问题，我想我终于解决了它。我得到的警告也被证明是真正的线索-起初我认为它与这个问题无关。在develop和build时，我收到了以下格式的警告：

warn Non-deterministic routing danger: Attempting to create page: "/project/contact/", but page
"/project/contact" already exists

其他人也报告了这一警告，但似乎没有任何原因或建议的解决方案与我的问题有关。然而，查看我的gatsby-config.js，我注意到我曾经包含过gatsby-plugin-page-creator插件。我怀疑这可能是在生成mdx插件之外的页面。这似乎是正确的——删除插件删除了关于重复页面创建的警告，也解决了我的渲染问题。对于我的网站的开发和生产版本来说，现在一切看起来都很好。

我不记得为什么我最初包含这个插件了——我最初使用的是mdx扩展名作为我的markdown文件，我想我需要gatsby-plugin-page-creator，这样具有该扩展名的文件才能被正确地解释为markdown。我现在使用标准的md扩展，删除gatsby-plugin-page-creator不会引起任何问题。