Gatsby 盖茨比：什么；基本路径和路径前缀之间的区别是什么？

我不理解Gatsby中

basepath

和

path prefix

之间的区别，以及何时使用每个功能

基本路径：

路径前缀：

TL:DR

pathPrefix

对您的站点影响更大-它会在生成的所有页面和资源的url中添加前缀

basePath

只是从文件系统生成slug的一个助手——以我与盖茨比的经验，我很少使用它

---

路径前缀 它会在所有页面和资源的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

---

基本路径 它是

createFilePath

的一个选项，可以帮助您从项目结构中创建slug。这并不影响你是否从根本上为盖茨比服务

如果项目目录如下所示：

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

---

然后，

createFilePath

将为您的文件返回这个slug:

writing/page1/

，这可能不是您想要的。也许您希望它是

/page1/

。在这种情况下，将

basePath

设置为

writing

将返回

/page1/

理解盖茨比中的路径生成是很棘手的，因为有许多因素在起作用：

• 如何设置项目目录
• 如何配置盖茨比源文件系统

  gatsby

• 如果您在

  gatsby node.js

  中以编程方式创建页面，您向

  createPages

  API的

  path

  字段传递了什么

由于OP表示他们所有的站点URL都以

blog/

为前缀，这意味着他们已经设置了

路径前缀

，以便在

blog/

路径上相对于其域根为整个站点提供服务<代码>基本路径与此无关

除非您非常确定您希望在域的根

/

之外的其他路径上为整个盖茨比站点提供服务，否则我建议您不要对

路径前缀

做任何事情

继续Derek Nguyen的例子：

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

在

gatsby node.js

中，当您调用

gatsby源文件系统的
createFilePath
函数时，您将获得两个标记文件的相对路径，如下所示：


/writing/page1
/images/cat

然后，如果按照以下步骤创建页面，则应在以下位置将这些文件生成为两个HTML页面：


localhost:8000/博客/写作/page1
localhost:8000/blog/images/cat

在这种情况下，是否使用
basePath
并不重要。它只是一个帮助函数，用于从文件路径中删除公共路径。无法删除
/blog
，因为它是由
路径前缀设置的

但是，假设您决定将
cat.md
从
/images
目录移动到
/writing
，则basePath可以派上用场。实际上，您应该这样做，因为没有理由将
cat.md
放在
/images
目录下

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

重新启动开发服务器，您将看到您的降价页面将在以下位置提供：


localhost:8000/blog/page1
localhost:8000/blog/cat
这不是我使用
basePath
的经验：它将“blog/”添加到所有URL，包括生活在
blog
文件夹中的博客帖子。
<root>
  |--content
  |     |--writing
  |     |    `--page1.md
             `--cat.md
  |
  |--gatsby-config.js
 ...

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