Сайт Gatsby не генерирует слаги, как ожидалось

Я следил за учебником Гэтсби, но я не вижу того, что видят они, когда дело доходит до создания слагов для файлов mdx в подкаталоге src/pages. Например, когда у меня есть такой файл, как src/pages/projects/devmarks/index.md, согласно руководству я ожидаю, что слаг будет devmarks и, таким образом, сможет добраться до страницы по адресу localhost:8000/projects/devmarks. Однако слаг оказывается projects/devmarks, и я могу получить доступ только к полностью отрендеренной странице в localhost:8000/projects/projects/devmarks. Интересно, что если я перехожу к localhost:8000/projects/devmarks, я получаю визуализацию тела файла mdx, но больше ничего. Я знаю, что, вероятно, мог бы исправить это с помощью функции createPages в файле gatsby-node.js или переместить мой файл {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. Может ли это иметь какое-то отношение к тому, почему мои слаги генерируются по-разному?

Зод: сила проверки и преобразования данных
Зод: сила проверки и преобразования данных
Сегодня я хочу познакомить вас с библиотекой Zod и раскрыть некоторые ее особенности, например, возможности валидации и трансформации данных, а также...
Как заставить Remix работать с Mantine и Cloudflare Pages/Workers
Как заставить Remix работать с Mantine и Cloudflare Pages/Workers
Мне нравится библиотека Mantine Component , но заставить ее работать без проблем с Remix бывает непросто.
Угловой продивер
Угловой продивер
Оригинал этой статьи на турецком языке. ChatGPT используется только для перевода на английский язык.
TypeScript против JavaScript
TypeScript против JavaScript
TypeScript vs JavaScript - в чем различия и какой из них выбрать?
Синхронизация localStorage в масштабах всего приложения с помощью пользовательского реактивного хука useLocalStorage
Синхронизация localStorage в масштабах всего приложения с помощью пользовательского реактивного хука useLocalStorage
Не все нужно хранить на стороне сервера. Иногда все, что вам нужно, это постоянное хранилище на стороне клиента для хранения уникальных для клиента...
Что такое ленивая загрузка в Angular и как ее применять
Что такое ленивая загрузка в Angular и как ее применять
Ленивая загрузка - это техника, используемая в Angular для повышения производительности приложения путем загрузки модулей только тогда, когда они...
0
0
29
2
Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Ответ принят как подходящий

Ваш gatsby-source-filesystem не указывал на правильный путь. Просто используйте:

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

Ключевой частью является path: `${__dirname}/portfolio/` , так как файловая система Gatsby должна знать, где находится исходная папка контента.

Оказывается, я просто не читал его достаточно внимательно, лол. Этот файл конфигурации был наполовину моей проблемой, я упустил то, что корневая папка портфолио вообще должна была быть там. В той части, когда он перемещал файлы blog.js и {mdx.slug}.js в папку src/pages/blog, я неправильно понял, что он делает, и подумал, что он также перемещает туда содержимое блога. Если бы я следил за руководством более внимательно, а не просматривал его и адаптировал под свои нужды, я бы это заметил.

Christopher Leggett 30.03.2022 18:37

Так получается, я неправильно прочитал учебник. В той части, когда он перемещал файлы 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, и генерировал неправильный слаг для фактических страниц, потому что пути, который потребовался, чтобы добраться до них из каталога моих страниц.

Также в качестве предупреждения для тех, кто читает это, по какой-то причине, если вы используете машинописный текст, переменная __dirname возвращает папку внутри папки .cache. __dirname не работает с машинописным текстом, см.: Nevermind Я нашел в документации, что __dirname неправильно работает с машинописным текстом. https://www.gatsbyjs.com/docs/how-to/custom-configuration/typescript/#__имя_каталога

Другие вопросы по теме