Я следил за учебником Гэтсби, но я не вижу того, что видят они, когда дело доходит до создания слагов для файлов 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. Может ли это иметь какое-то отношение к тому, почему мои слаги генерируются по-разному?






Ваш 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, я неправильно понял, что он делает, и подумал, что он также перемещает туда содержимое блога. Таким образом, папка корневого блога (или, в моем случае, портфолио) по-прежнему должна быть там и должна быть настроена с помощью 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/#__имя_каталога
Оказывается, я просто не читал его достаточно внимательно, лол. Этот файл конфигурации был наполовину моей проблемой, я упустил то, что корневая папка портфолио вообще должна была быть там. В той части, когда он перемещал файлы blog.js и {mdx.slug}.js в папку src/pages/blog, я неправильно понял, что он делает, и подумал, что он также перемещает туда содержимое блога. Если бы я следил за руководством более внимательно, а не просматривал его и адаптировал под свои нужды, я бы это заметил.