我一直在学习Gatsby教程，但在src/pages的子目录中为mdx文件生成slug时，我看不到他们看到了什么。例如，当我有一个像src/pages/projects/devmarks/index.md这样的文件时，根据教程，我希望段塞是devmarks，从而能够到达localhost:8000/projects/devmarks的页面。然而，段塞最终是projects/devmarks，并且我只能在localhost:8000/projects/projects/devmarks访问完全呈现的页面。有趣的是，如果我转到localhost:8000/projects/devmarks，我确实得到了mdx文件的主体，但没有其他内容。我知道我可能可以在gatsby-node.js文件中使用createPages函数来解决这个问题，或者将我的{mdx.slug}.tsx文件上移一级，但我不明白为什么我的代码不能像教程中那样工作。
完整源代码
gatsby-config.ts
import type { GatsbyConfig } from "gatsby";
const config: GatsbyConfig = {
siteMetadata: {
title: `Christopher Leggett's Portfolio and Blog`,
description: `The Portfolio and Blog for the aspiring software developer Christopher Leggett`,
siteUrl: `https://chrisleggett.me`,
twitterUsername: `@leggettc18`
},
plugins: ["gatsby-plugin-image", "gatsby-plugin-react-helmet", "gatsby-plugin-postcss", {
resolve: 'gatsby-plugin-manifest',
options: {
"icon": "src/images/icon.png"
}
}, "gatsby-plugin-mdx", "gatsby-plugin-sharp", "gatsby-transformer-sharp", {
resolve: 'gatsby-source-filesystem',
options: {
"name": "images",
"path": "./src/images/"
},
__key: "images"
}, {
resolve: 'gatsby-source-filesystem',
options: {
"name": "pages",
"path": "./src/pages/"
},
__key: "pages"
}]
};
export default config;
文件夹结构
- src
- images
- components
- layout.tsx
- css
- index.css //contains tailwind stuff
- pages
- index.tsx
- about.tsx
- 404.tsx
- projects
- {mdx.slug}.tsx
- devmarks
- index.mdx
该教程的gatsby-config.js中有一个配置，将源文件系统插件指向src/blog目录，但除非我错过了什么，否则当他们将所有内容移动到src/pages/blog时，它不会更新。在尝试构建网站之前，我已经阅读了教程，所以我直接跳过了将我的投资组合项目放在src/pages/projects中。这和为什么我的蛞蝓产生的不同有关系吗？
所以我误读了教程。在将blog.js和{mdx.slug}.js文件移动到src/pages/blog文件夹的部分，我误解了它在做什么，认为它也在移动其中的博客内容。所以根博客(或者在我的案例中是公文包(文件夹仍然需要在那里，并且仍然需要像这样由gatsby-source-filesystem配置
{
"resolve": "gatsby-source-filesystem",
"options": {
"name": "portfolio",
"path": `${__dirname}/content/portfolio/`
}
}
我把公文包文件夹放在内容文件夹下面，因为我将来可能想要其他类型的内容。
文件系统
- content
- portfolio
- devmarks
- index.mdx
- src
- images
- components
- layout.tsx
- css
- index.css //contains tailwind stuff
- pages
- index.tsx
- about.tsx
- 404.tsx
- projects
- index.tsx
- {mdx.slug}.tsx
我在.src/pages/portfolio中有公文包内容，这导致文件系统路由API为.mdx文件创建了一个路由，在这个路由上你只能看到mdx文件的主体，并为实际页面生成了错误的段塞，因为从我的pages目录获取这些页面所需的路径。
同样，为了提醒阅读本文的人，出于某种原因，如果您使用的是typescript，__dirname变量会返回.cache文件夹中的一个文件夹。__dirname不适用于typescript，请参阅：Nevermind我在文档中发现__dirname不能正确使用typescript。https://www.gatsbyjs.com/docs/how-to/custom-configuration/typescript/#__dirname
您的gatsby-source-filesystem没有指向有效路径。只需使用：
{
"resolve": "gatsby-source-filesystem",
"options": {
"name": "portfolio",
"path": `${__dirname}/portfolio/`
}
}
关键部分是path: `${__dirname}/portfolio/`，因为Gatsby的文件系统需要知道内容源文件夹的位置。