Gatsby Head API

示例

Gatsby Head API 的支持是在 gatsby@4.19.0 中添加的。

Gatsby 包含一个内置的 Head 导出，允许您向页面的文档 head 添加元素。

与 react-helmet 或其他类似解决方案相比，Gatsby Head 更易于使用，性能更好，包体积更小，并且支持最新的 React 功能。

通过导出名为 Head 的函数，您可以为页面设置元数据

箭头函数语法也是有效的

定义多个 meta 标签时，请使用 React Fragments

您也可以在页面中从另一个文件重新导出 Head 函数

编辑 <html> 和 <body> 的支持是在 gatsby@5.5.0 中添加的。

您可以设置 <html> 和 <body> 属性

Gatsby 将使用提供的属性并将它们注入到生成的 HTML 中。

为了避免在您的 <head> 中出现重复的标签，您可以使用标签上的 id 属性来确保只渲染一个。以下面的例子为例

在这种情况下，只有第二个 <link id="icon" rel="icon" href="icon-specific-for-this-page" /> 被渲染。在具有相同 id 的项目列表中，最后一个项目将生效并用于 HTML。

在使用 Gatsby Head 时，您需要注意以下几点

您只能在页面（包括 createPage 的模板）中定义 Head 导出，而不能在组件中定义。
Gatsby Head 的内容会在页面卸载时被清除，因此请确保每个页面都定义了它在 <head> 中所需的内容。
Head 函数需要返回有效的 JSX。
Head 函数中有效的标签是： link、meta、style、title、base、script 和 noscript。
Head 中定义的 html 和 body 标签会覆盖在 onRenderBody (setHtmlAttributes 和 setBodyAttributes) 中定义的属性。
数据块 <script> 标签，例如 <script type="application/ld+json">，可以放在 Head 函数中，但动态脚本最好使用页面或组件中的 Gatsby Script Component 来加载。
截至 gatsby@5.6.0，Head 可以访问您在 wrapRootElement API 中定义的 React Context。需要注意的是，wrapRootElement 应该只用于设置上下文提供者。UI 组件应在 wrapPageElement API 中定义。

Head 函数接收这些属性