Gatsby设置HTML的lang属性

Question

Gatsby设置HTML的lang属性

htmlgatsbylang

20

你会怎么做？修改公共文件夹似乎行不通...你是否需要自己构建和托管它？或许有一些函数我还不知道。感激任何帮助。

- Vincenzo

5个回答

7

根据新的 Head Api 文档（在 gatsby@4.19.0 版本中添加），您可以使用 setHtmlAttributes 函数避免在 gatsby-ssr.js 或 gatsby-ssr.ts 文件中包含 Helmet 依赖。

exports.onRenderBody = ({ setHtmlAttributes }) => {
  setHtmlAttributes({ lang: "en" })
}

- Arthur Violy

2

使用 Gatsby Head API 和 ES6 的 Arthur Violy 答案的替代方案：

export const onRenderBody = ({ setHtmlAttributes }) => {
  setHtmlAttributes({ lang: "en" });
};

- Lucy Mac

-1

如果使用 Gatsby v5，

只需将以下代码放置在 Header 函数中：

```jsx return ( <> ); ```

- Viktor Hardubej

-1

仅是@Andre's answer的一个补充，如果您想使用Open Graph协议属性，例如：xmlns:og，xmlns:fb...只需用单引号'将键包装起来即可。

<Helmet htmlAttributes={
    {
    lang: 'en',
    'xmlns:og': 'http://ogp.me/ns#',
    'xmlns:fb': 'http://ogp.me/ns/fb#'
    }
  }>

    <meta charSet="utf-8" />
    <meta content="width=device-width, initial-scale=1.0" name="viewport" />
    ....
</Helmet>

- ThangLeQuoc

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Andre · Accepted Answer

Gatsby v5

Gatsby现在拥有自己的Head API: https://www.gatsbyjs.com/docs/reference/built-in-components/gatsby-head/

从您的页面文件中导出一个包含HTML元素的head组件：

export function Head() {
  return (
    <>
      <html lang="en" />
    </>
  )
}

过时的：

Gatsby建议使用react helmet来完成这个任务。如果你查看Gatsby文档 - 如何添加元数据，你会找到很多关于这个主题的最佳实践。

按照文档中的逐步指南进行操作。React helmet非常强大。回到你的问题，这就是你可以修改HTML语言属性的方法：

<Helmet
  htmlAttributes={{
    lang: 'en',
  }}
/>