Gatsby 如何在 React 组件和之前生成的静态 HTML 内容之间共享 React 标头

IT技术 reactjs gatsby
2021-05-21 08:18:11

我正在建立一个盖茨比网站。该站点由多个 React “页面组件”组成,所有这些组件都包含在一个 React 标头组件和一个 React 页脚组件中。

我有一些预先存在的静态 HTML(想想隐私政策等)。我打算将它们发布在 /public gatsby 文件夹中。但是随后不会有 React 页眉组件和页脚组件。

如何发布我的静态 HTML 内容并为它们提供 React 页眉/页脚?

我想,如果我将我的静态 HTML“翻译”为 JSX,那当然可以。只是想了解这是唯一的方法,正确的方法,或者是否有更简单的方法?

2个回答

您可以添加页眉/页脚组件,src/layouts/index.js而页面内容将通过<div>{children()}</div>基于您添加到的页面呈现src/pages

Gatsby 将在构建时为您创建静态公共文件(我推荐 Netlify)。您“应该”创建 react 组件,这意味着在 pages 文件夹或 components 文件夹中使用 JSX。标题实际上已经是 layouts 文件夹的一部分,因此您不必为此做任何事情。

根据我的理解,如果您只是创建新的页面文件或修改现有的页面文件以显示您的内容,您将获得您所追求的行为。然后只需根据自己的喜好自定义内容,即页面和标题内容和样式。