时间戳

首页 > 解决方案 > 在 GatsbyJS 中更新元标记

reactjs - 在 GatsbyJS 中更新元标记

问题描述

我想在Gatsby中使用Material-UI 。在使用页面上，它说我必须添加以下响应式元标记：

<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>

但这样做是给了我两个元视口标签——盖茨比开始使用的一个和我通过 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.

关于如何做到这一点的任何想法？

谢谢。

标签： reactjsgatsbyreact-helmet

解决方案

如果您确实需要更改视口元数据，则需要覆盖 Gatsby 使用的默认 html 模板。只需复制并根据自己的喜好对其进行自定义.cache/default-html.js。src/html.js

作为旁注，我真的怀疑将 Gatsby 的默认视口元数据与 Material-UI 一起使用会不会有任何问题。

推荐阅读