在 GatsbyJS 中更新元标记
Updating Meta Tag in GatsbyJS
我想使用 Material-UI with Gatsby. On the usage page,它说我必须添加以下响应式元标记:
<meta
name="viewport"
content="minimum-scale=1, initial-scale=1, width=device-width, shrink-to-fit=no"
/>
现在,如果我看一下 Gatsby 开始时使用的元标记,它们 几乎 相同:
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
基本上,唯一的区别是 material-ui
要我添加 minimum-scale=1
。
我的问题是如何更新 或替换元视口标签以包含此值。我尝试在基本布局中使用 react-helmelt,如下所示:
<Helmet>
<meta
name='viewport'
content='minimum-scale=1, initial-scale=1, width=device-width, shrink-to-fit=no'
/>
</Helmet>
但是它的作用是给我 两个 元视口标签——一个是 Gatsby 开始的标签,另一个是我通过 Helmet 添加的标签:
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name='viewport' content='minimum-scale=1, initial-scale=1, width=device-width, shrink-to-fit=no' />
我想要的只是一个元视口标签 -- 包含 minimum-scale=1
.
的标签
关于如何做到这一点有什么想法吗?
谢谢。
如果您确实需要更改视口元数据,则需要覆盖 Gatsby 使用的默认 html 模板。只需将 .cache/default-html.js
复制到 src/html.js
并根据您的喜好对其进行自定义。
附带说明一下,我真的怀疑将 Gatsby 的默认视口元与 Material-UI.
一起使用会不会有任何问题
我想使用 Material-UI with Gatsby. On the usage page,它说我必须添加以下响应式元标记:
<meta
name="viewport"
content="minimum-scale=1, initial-scale=1, width=device-width, shrink-to-fit=no"
/>
现在,如果我看一下 Gatsby 开始时使用的元标记,它们 几乎 相同:
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
基本上,唯一的区别是 material-ui
要我添加 minimum-scale=1
。
我的问题是如何更新 或替换元视口标签以包含此值。我尝试在基本布局中使用 react-helmelt,如下所示:
<Helmet>
<meta
name='viewport'
content='minimum-scale=1, initial-scale=1, width=device-width, shrink-to-fit=no'
/>
</Helmet>
但是它的作用是给我 两个 元视口标签——一个是 Gatsby 开始的标签,另一个是我通过 Helmet 添加的标签:
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name='viewport' content='minimum-scale=1, initial-scale=1, width=device-width, shrink-to-fit=no' />
我想要的只是一个元视口标签 -- 包含 minimum-scale=1
.
关于如何做到这一点有什么想法吗?
谢谢。
如果您确实需要更改视口元数据,则需要覆盖 Gatsby 使用的默认 html 模板。只需将 .cache/default-html.js
复制到 src/html.js
并根据您的喜好对其进行自定义。
附带说明一下,我真的怀疑将 Gatsby 的默认视口元与 Material-UI.
一起使用会不会有任何问题