React头盔：掌握您的React站点的头
直接操纵 document.title 很麻烦且容易出错。 React头盔提供了简化的解决方案。 但是，为了完全利用其功能，尤其是对于SEO（搜索引擎与客户端渲染 content）的努力，SSR是必不可少的。 因此，我们将使用基于React的静态站点生成器Gatsby提供内置的SSR。
设置盖茨比和react头盔
[2
创建一个新的盖茨比项目：
gatsby新的my-gatsby-site https://github.com/gatsbyjs/gatsby-starter-hello-world
[2
configure gatsby：
将插件添加到- ：
module.exports = {
插件：['gatsby-plugin-react-helmet`]，
};
npm i -g gatsby-cli
构建动态布局组件
[2
- 从“反应”中导入react;
从“反应螺旋中心”进口头盔；
从“ gatsby”导入{link};
导入“ ../css/main.css”;
导出默认（{pagemeta，children}）=>（
{`cars4all | $ {pagemeta.title}`}
gatsby new my-gatsby-site https://github.com/gatsbyjs/gatsby-starter-hello-world
-
{/ *添加语言支持 */}
{/ *添加自定义类 */}
{/ *示例结构化数据（JSON-LD） */}
{
{
“ @context”：“ http：//schema.org”，
“ @Type”：“ LocalBusiness”，
// ...您的结构化数据
}
`}
npm i --save react-helmet gatsby-plugin-react-helmet
[2
-
家
[2
{孩子们}
[2
module.exports = {
plugins: [`gatsby-plugin-react-helmet`],
};
创建
：
。
背景色：黄色；
颜色：limegreen;
字体家庭：“ Comic Sans MS”，草书，Sans-Serif；
}
创建页面
[2
从“反应”中导入react;
从“ ../components/layout”导入布局;
导出默认（）=>（
欢迎来到Cars4All！
）;
[2
从“反应”中导入react;
从“ ../components/layout”导入布局;
导出默认（）=>（
我们的汽车
{/ * ...汽车清单... */}
）;
gatsby build
，然后
与ssr一起查看结果。检查源代码以验证React Helmet的内容是否正确渲染。
lang