盖茨比：如何在 head 标签中注入原始 html答案

【问题标题】：Gatsby: How to inject raw html inside head tag盖茨比：如何在 head 标签中注入原始 html
【发布时间】：2021-09-09 18:10:37
【问题描述】：

在 Gatsby.js 项目中，有没有办法在每个页面的 <head></head> 标签内注入原始 html？我收到了一个用于跟踪的 html 字符串（内联和外部脚本标签、链接标签和元标签），我只需要将其转储到 head 标签中。

编辑：这是我将收到的 html 的示例（由于我工作环境的限制，我无法编辑 html 字符串）：

<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" />
..

我尝试过使用 react-helmet（需要 a: 传递给 meta 属性的属性或 b: script/meta/link 标签作为子 JSX）

我尝试在 gatsby-ssr.js 中使用 onPreRenderHTML API。（类似的问题，它需要 jsx 而不是字符串）

  // THIS RENDERS THE HTML AS TEXT IN THE BODY TAG

  const headScripts = `<script type="text/javascript">alert("tracking stuff");</script>`;
  exports.onPreRenderHTML = ({ getHeadComponents, replaceHeadComponents }) => {
      replaceHeadComponents([...getHeadComponents(), headScripts]);
  };

像 gatsby-plugin-google-tagmanager 这样的插件不是一个选项，因为跟踪 html 作为一个大字符串出现

任何见解将不胜感激！

【问题讨论】：

尝试Helmet 方法时有什么问题？
问题是给我的跟踪字符串已经包含了开始和结束脚本/元/链接标签。
我在原始帖子中添加了一个编辑，以显示我必须放入的 html 示例。将其转储到 <Helmet></Helmet> 标记内不起作用。
这能回答你的问题吗？ Adding script tag to React/JSX
也就是说，没有“转储代码”的正确方法是使用正确的插件，例如gatsby-plugin-google-tagmanager

标签： javascript html reactjs gatsby tracking

【解决方案1】：

我通过创建自定义 html.js 文件（Gatsby 文档 here）并使用 html-react-parser 解决了这个问题。

首先我将.cache/default-html.js 复制到src/html.js 以修改Gatsby 使用的根html 文档。然后我使用html-react-parser 包将提供给我的跟踪html放入头部。

我对@987654326@ 文件的修改由下面的ADDED cmets 表示

import React from "react";
import PropTypes from "prop-types";
import parse from "html-react-parser"; // ADDED
import getTrackingHtml = from './myCustomUtils'; // ADDED

export default function HTML(props) {
    const trackingHtml = getTrackingHtml(); // ADDED

    return (

        <html {...props.htmlAttributes}>
            <head>
                <meta charSet="utf-8" />
                <meta httpEquiv="x-ua-compatible" content="ie=edge" />
                <meta
                    name="viewport"
                    content="width=device-width, initial-scale=1, shrink-to-fit=no"
                />
                {props.headComponents}
                {parse(trackingHtml)} {/* ADDED */}
            </head>
            <body {...props.bodyAttributes}>
                {props.preBodyComponents}
                <div
                    key={"body"}
                    id="___gatsby"
                    dangerouslySetInnerHTML={{ __html: props.body }}
                />
                {props.postBodyComponents}
            </body>
        </html>
    );
}

HTML.propTypes = {
    htmlAttributes: PropTypes.object,
    headComponents: PropTypes.array,
    bodyAttributes: PropTypes.object,
    preBodyComponents: PropTypes.array,
    body: PropTypes.string,
    postBodyComponents: PropTypes.array,
};

（注意：“您在 html.js 组件中呈现的任何内容都不会像其他组件一样在客户端中“生效”-Gatsby 文档）

【讨论】：