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