Gatsby 站点未按预期生成 slug

Question

我一直在关注 Gatsby 教程，但在为 src/pages 的子目录中的 mdx 文件生成 slug 时，我没有看到他们看到了什么。例如，当我有一个像 src/pages/projects/devmarks/index.md 这样的文件时，根据教程，我希望 slug 是 devmarks，因此能够到达 localhost:8000/projects/devmarks 处的页面。但是，slug 最终变成了 projects/devmarks，我只能在 localhost:8000/projects/projects/devmarks 访问完全呈现的页面。有趣的是，如果我转到 localhost:8000/projects/devmarks，我确实得到了渲染的 mdx 文件的主体，但没有别的。我知道我可以通过 gatsby-node.js 文件中的 createPages 函数或将我的 {mdx.slug}.tsx 文件上移一个级别来解决这个问题，但我不明白为什么我的代码不是像教程一样工作。

Full Source Code

盖茨比-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 中的投资组合项目。这可能与我的鼻涕虫产生不同的原因有关吗？

Answer 1

您的 gatsby-source-filesystem 未指向有效路径。只需使用：

{
   "resolve": "gatsby-source-filesystem",
   "options": {
      "name": "portfolio",
      "path": `${__dirname}/portfolio/`
   }
}

关键部分是 path: `${__dirname}/portfolio/` ，因为 Gatsby 的文件系统需要知道内容源文件夹的位置。

Answer 2

原来我看错教程了。在将 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 文件并为实际页面生成错误的 slug，因为从我的页面目录获取它们所用的路径。

同时提醒所有阅读本文的人，出于某种原因，如果您使用的是打字稿，__dirname 变量 returns 是 .cache 文件夹中的一个文件夹。 __dirname 不适用于打字稿，请参阅：没关系，我在文档中发现 __dirname 无法与打字稿一起正常工作。 https://www.gatsbyjs.com/docs/how-to/custom-configuration/typescript/#__dirname

Gatsby 站点未按预期生成 slug

Gatsby site not generating slugs as expected

slug

typescript

gatsby

gatsby-plugin-mdx