使用 Gatsby 创建 React App index.html 问题

Question

我有一个想要转换为 Gatsby 的 Create-React-App 项目。它拥有一切，src 文件夹，index.js 等，还有一个公共文件夹。然而，这个公用文件夹随后被 Gatsby 用来做他们所做的任何事情。

不幸的是，当他们将文件放入公共文件夹时，它会删除我的。

我的问题很简单：我可以将我的 index.html 文件放在哪里，这样它就不会被 Gatsby 删除。我无法摆脱它，因为 React 不知道将代码放在哪里，而且我无法为我的 Favicon 充电。

我在学习 Gatsby 和一切方面感到迷茫，这是阻止我创建第一个 Gatsby 应用程序的最后一个障碍。

Answer 1

任何 Gatsby 项目中的典型结构如下所示：

/
|-- /.cache
|-- /plugins
|-- /public
|-- /src
    |-- /pages
    |-- /templates
    |-- html.js
|-- /static
|-- gatsby-config.js
|-- gatsby-node.js
|-- gatsby-ssr.js
|-- gatsby-browser.js

/src 中的所有内容都编译为/public。公共文件夹在每次构建/编译中都会被覆盖，因此您的代码不能在那里，这就是在您的场景中被删除的原因。您的逻辑必须保留在/src 之下。综上所述，你必须部署你的/public文件夹并在/src进行开发。

回答您的问题后，您的index.html 将位于/src/index.js 之下。由于 Gatsby 默认采用 /pages 结构并将其复制到 /public 的页面中。因此，/pages 第一层下的所有内容都将转换为domain.com/page-name。如果您在/src 中放置一个文件夹，例如/blog（第二级），则其中的所有内容都将转换为domain.com/blog/page-name，以此类推，并带有嵌套文件夹。

关于 favicon，Gatsby 是一个基于插件的框架，您可以手动完成，也可以使用其中一个有用的插件，例如 gatsby-plugin-manifest。

我建议您开始阅读 this documentation 以了解 Gatsby 的工作原理。