如何在 Gatsby.js 中更改移动浏览器上的地址栏颜色

Question

我想更改使用 Gatsby.js 构建的网站的地址栏颜色。

我想出的只是修改“gatsby-config.js”中的“siteMetadata”部分。 这有意义吗？enter image description here

Answer 1

您可以使用页面head 中的meta 标签theme-color 在移动Android 上更改颜色，例如

<meta name="theme-color" content="#123456">

有关其他浏览器的更详细讨论，请参阅https://stackoverflow.com/a/33193739/1247853。

如果您使用gatsby-starter-blog 或gatsby-starter-default，您可以在gatsby-config.js 中设置此元标记：

    {
      resolve: `gatsby-plugin-manifest`,
      options: {
        ...
        theme_color: `#123456`,
        ...
      },

如果你不使用这些启动器，你可以使用 React Helmet。按照https://www.gatsbyjs.org/docs/add-page-metadata/ 上的说明安装它，然后将以下代码放置在每个页面上执行的某个位置，例如在src/components/layout.js

  import { Helmet } from "react-helmet"

  return (
    <Helmet
      meta={[
        {
          name: `theme-color`,
          content: '#123456',
        },
      ]}>
   // ... rest of the page ...
   </Helmet>
 )