我按照这里的方向上盖茨比的网站自定义<head>标签。我想添加Modernizr和Google的WebFont库。我.cache/default-html.js将其复制并放入src/html.js,然后添加了脚本标记库,但是它们未显示在我的localhost:8000上。
尝试进行自定义时,是否需要清除一些Gatsby缓存html.js?还是有其他方法可以将这些添加到<head>标签中?
编辑:原来我试图将<script></script>标记放在html.js的JSX中。
使用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)
| 归档时间: |
|
| 查看次数: |
1524 次 |
| 最近记录: |