覆盖html.js在GatsbyJS中不起作用

Eri*_*son 5 javascript gatsby

我按照这里的方向上盖茨比的网站自定义<head>标签。我想添加Modernizr和Google的WebFont库。我.cache/default-html.js将其复制并放入src/html.js,然后添加了脚本标记库,但是它们未显示在我的localhost:8000上。

尝试进行自定义时,是否需要清除一些Gatsby缓存html.js?还是有其他方法可以将这些添加到<head>标签中?

编辑:原来我试图将<script></script>标记放在html.js的JSX中。

jae*_*egs 3

使用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>
    );
  }
};
Run Code Online (Sandbox Code Playgroud)

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

更新 gatsby-config.js: plugins: ['gatsby-plugin-react-helmet']

对于一个工作示例,请使用以下命令创建一个新版本gatsby new gatsby-site并查看其中的组件src/layouts/index.js

 <Helmet
      title="Gatsby Default Starter"
      meta={[
        { name: 'description', content: 'Sample' },
        { name: 'keywords', content: 'sample, something' },
      ]}
    />
Run Code Online (Sandbox Code Playgroud)