Гэтсби: в чем разница между базовым путем и префиксом пути?

Question

Я не понимаю разницы между basepath а также path prefixв Гэтсби, и когда использовать каждую функцию

Базовый путь: https://www.gatsbyjs.org/tutorial/part-seven/

Префикс пути: https://www.gatsbyjs.org/docs/path-prefix/

Answer 1

Понимание генерации пути в Гэтсби непросто, потому что здесь задействовано множество факторов:

• как создать каталог проекта?
• как вы настраиваете gatsby-source-filesystem?
• если вы создаете страницы программно в gatsby-node.js, что ты передал path поле createPages API?

Поскольку OP сказал, что все URL-адреса их сайтов имеют префикс blog/, это означает, что они создали path prefix для обслуживания всего сайта на blog/ путь относительно корня своего домена. basePath не имеет к этому никакого отношения.

Если вы не уверены, что хотите обслуживать весь сайт Gatsby по другому пути, кроме корневого. / домена, я предлагаю вам ничего не делать с path prefix.

Продолжая пример Дерека Нгуена:

module.exports = {
  plugins: [
    {
      resolve: 'gatsby-source-filesystem',
      options: {
        path: `${__dirname}/content`,
        name: 'content'
      }
    }
  ]
}

В gatsby-node.js, когда вы вызываете функцию createFilePath из gatsby-source-filesystem, вы получите относительные пути к двум файлам Markdown, как показано ниже:

• /writing/page1
• /images/cat

Затем, если вы создаете страницы, следуя этому руководству по Гэтсби, эти файлы должны быть сгенерированы в две HTML-страницы по адресу:

• localhost:8000/blog/writing/page1
• localhost:8000/blog/images/cat

В этом случае, используете ли вы basePathили нет не имеет значения. Это просто вспомогательная функция для удаления общего пути из пути к файлу. Вы не можете удалить /blog потому что он создан path prefix.

Однако предположим, что вы решили переехать cat.md из /images каталог для /writing, basePath может пригодиться. На самом деле вы должны, потому что нет причин, почему cat.md должен быть под /images каталог.

<root>
  |--content
  |     |--writing
  |     |    `--page1.md
             `--cat.md
  |
  |--gatsby-config.js
 ...

Теперь путь, созданный для каждого файла Markdown, будет изменен:

• /writing/page1/
• /writing/cat/

Вы можете удалить writing из URL-адресов, передав его в basePath как следует.

const { createFilePath } = require('gatsby-source-filesystem')
exports.onCreateNode({ node, getNode }) => {
  if (node.internal.type === 'MarkdownRemark') {
    console.log(createFilePath({ node, getNode, basePath: 'writing' }))
  }
}

Перезапустите сервер разработки, и вы увидите, что ваши страницы уценки будут обслуживаться по адресу:

• localhost:8000/blog/page1
• localhost:8000/blog/cat

Answer 2

TL:DR

pathPrefix оказывает гораздо большее влияние на ваш сайт - он добавляет префикс к сгенерированным URL-адресам всех ваших страниц и ресурсов. basePath это просто помощник для создания ярлыка из вашей файловой системы. По моему опыту работы с Gatsby, я вообще редко его использую.

---

pathPrefix

Он добавляет префикс к URL-адресам всех ваших страниц и ресурсов. Таким образом, вы можете развернуть сайт Gatsby как подкаталог другого сайта.

Without Prefix             | With 'blog' Prefix
---------------------------|--------------------------------
myblog.com/                | myblog.com/blog
myblog.com/hello/          | myblog.com/blog/hello
myblog.com/image-123.png   | myblog.com/blog/image-123.png

---

basePath

Это вариант createFilePathкоторый помогает вам создать слаг из структуры вашего проекта. Это не влияет на то, обслуживаете ли вы свой Gatsby от root или нет.

Если ваш каталог проекта выглядит так:

<root>
  |--content
  |     |--writing
  |     |    `--page1.md
  |     `--images
  |          `--cat.md
  |
  |--gatsby-config.js
 ...

И вы устанавливаете это в своем gatsby-config.js

module.exports = {
  plugins: [
    {
      resolve: 'gatsby-source-filesystem',
      options: {
        path: `${__dirname}/content`,
        name: 'content'
      }
    }
  ]
}

потом createFilePath вернет этот слаг для вашего файла: writing/page1/, что, возможно, не то, что вы хотите. Может ты хочешь, чтобы это было/page1/. В этом случае установкаbasePath к writing вернусь /page1/.