Question

我关注Gatsby网站上的directions here以自定义<head>标记。我想添加Modernizr和Google的WebFont库。我复制了.cache/default-html.js并将其放入src/html.js，然后我添加了脚本标记库，但它们没有显示在我的localhost：8000上。

尝试执行自定义html.js时是否需要清除某些Gatsby缓存？或者是否有其他方法可以将这些添加到<head>代码？

编辑：事实证明我试图在html.js的JSX中放置一个<script></script>标签。

Answer 1

使用React Helmet自定义<head>标记。查看他们的文档以获取更多示例。

import React from "react";
import {Helmet} from "react-helmet";

class Application extends React.Component {
  render () {
    return (
        <div className="application">
            <Helmet>
                <meta charSet="utf-8" />
                <title>My Title</title>
                <link rel="canonical" href="http://example.com/example" />
            </Helmet>
            ...
        </div>
    );
  }
};

安装： npm i --save gatsby-plugin-react-helmet react-helmet

更新gatsby-config.js plugins: [盖茨比-插件反应的头盔];

对于一个工作示例，使用gatsby new gatsby-site创建一个新版本看看src/layouts/index.js

中的组件

 <Helmet
      title="Gatsby Default Starter"
      meta={[
        { name: 'description', content: 'Sample' },
        { name: 'keywords', content: 'sample, something' },
      ]}
    />

覆盖html.js无法在GatsbyJS中运行

1 个答案: