Gatsby如何向所有页面的head标签内注入原生HTML字符串？

方案一：HTML转JSX注入（推荐） #

无需修改原始HTML字符串，也不会覆盖Gatsby默认生成的head内容，适配所有场景。

操作步骤 #

1. 安装HTML解析依赖

npm install html-react-parser

2. 在项目根目录新建/编辑gatsby-ssr.js，写入如下代码：

const parse = require('html-react-parser')

// 直接粘贴你拿到的完整跟踪HTML字符串即可，不需要做任何修改
const customHeadHtml = `
<script src="//sometracking.com/script.js" async></script>
<!-- Google Tag Manager -->
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','TAGID');</script>
<!-- End Google Tag Manager -->
<link rel="stylesheet" type="text/css" href="https://somefont.com/stylesheet.css" />
<link href="~/another/stylesheet.css" type="text/css" rel="stylesheet" />
<link href="~/more/styles.css" type="text/css" rel="stylesheet" />
<script language="javascript" type="text/javascript" src="~/vendor/javascript.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="format-detection" content="telephone=no">
<meta name="apple-itunes-app" content="app-id=123456789">
<meta name="google-play-app" content="app-id=com.blah.blah">
<link rel="apple-touch-icon" sizes="180x180" href="~/icon.png" />
`

exports.onPreRenderHTML = ({ getHeadComponents, replaceHeadComponents }) => {
  const parsedElements = parse(customHeadHtml)
  replaceHeadComponents([
    ...getHeadComponents(),
    ...(Array.isArray(parsedElements) ? parsedElements : [parsedElements])
  ])
}

3. 重启gatsby develop服务即可生效，生产构建会自动注入到所有页面的head标签中。

方案二：自定义HTML模板（无额外依赖） #

如果不想安装第三方依赖，可以直接修改Gatsby全局HTML模板。

操作步骤 #

1. 复制默认模板到源目录
   执行命令（Windows可手动复制.cache/default-html.js到src目录，重命名为html.js）：

cp .cache/default-html.js src/html.js

2. 编辑src/html.js，直接在head标签末尾插入你的HTML片段即可，如需保持原始字符串格式，可配合dangerouslySetInnerHTML使用：

<head>
  {/* 原有默认内容保持不动 */}
  <noscript dangerouslySetInnerHTML={{ __html: `你的完整HTML字符串` }} />
</head>

注意事项 #

• 修改gatsby-ssr.js或html.js后必须重启Gatsby开发服务才能生效
• 两种方案都不会修改你传入的原始HTML字符串内容，完全符合需求

内容的提问来源于stack exchange，提问作者ksb1986