在正文中添加脚本时 Gatsby 出错

Question

当我尝试在 Gatsby 主体上添加脚本时，我将以下代码添加到名为 gatsby-ssr.js

的文件中

const React = require("react")

exports.onRenderBody = ({ setPostBodyComponents }) => {
    setPostBodyComponents([
        <script type="text/javascript"> 
        {`
        (function() {
          var envolveChatWidgetScript = document.createElement('script');
          envolveChatWidgetScript.setAttribute('data-wg-publisher', '222222');
          envolveChatWidgetScript.setAttribute('data-wg-campaign', '333333');
          envolveChatWidgetScript.setAttribute('src', 'https://widget.envolvetech.com/static/js/app.js');
          envolveChatWidgetScript.setAttribute('data-identifier', 'my_identifier');
          envolveChatWidgetScript.setAttribute('data-backend', 'https://bot-dot-envolvetech-001.appspot.com');
          document.body.appendChild(envolveChatWidgetScript);
          })();
          `}
          </script>
    ]);
};

但不知何故标记中的实际内容是这个

        <script type="text/javascript"> 
        (function() {
          var envolveChatWidgetScript = document.createElement(&#x27;script&#x27;);
          envolveChatWidgetScript.setAttribute(&#x27;data-wg-publisher&#x27;, &#x27;222222&#x27;);
          envolveChatWidgetScript.setAttribute(&#x27;data-wg-campaign&#x27;, &#x27;3333333&#x27;);
          envolveChatWidgetScript.setAttribute(&#x27;src&#x27;, &#x27;https://widget.envolvetech.com/static/js/app.js&#x27;);
          envolveChatWidgetScript.setAttribute(&#x27;data-identifier&#x27;, &#x27;my_identifier#x27;);
          envolveChatWidgetScript.setAttribute(&#x27;data-backend&#x27;, &#x27;https://bot-dot-envolvetech-001.appspot.com&#x27;);
          document.body.appendChild(envolveChatWidgetScript);
          })();
          </script>

知道为什么它被翻译成那样吗？

Answer 1

你试过了吗customizing the html.js？

运行:

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

或者手动复制default-html.js（放在.cache里面）到/src

并将您的脚本放在那里。

当 Gatsby 构建您的站点时，如果 /src 中有一个 html.js，它会将其用作您站点的样板文件

在 html.js 中，您将看到所有 postBodyComponents、onPreRenderHTML 和其他自定义 API。但是，在这种情况下，您将插入原始脚本而不是让 Gatsby 解析它。

Answer 2

在阅读了一些 GH 线程后，我发现使用 dangerouslySetInnerHTML 添加脚本确实有效 https://github.com/gatsbyjs/gatsby/issues/11108

const React = require("react")

exports.onRenderBody = ({ setPostBodyComponents }) => {
    setPostBodyComponents([
        <script
     dangerouslySetInnerHTML={{
        __html:`
        (function() {
            var envolveChatWidgetScript = document.createElement("script");
            envolveChatWidgetScript.setAttribute("data-wg-publisher", "222222");
            envolveChatWidgetScript.setAttribute("data-wg-campaign", "333333");
            envolveChatWidgetScript.setAttribute("src","https://widget.envolvetech.com/static/js/app.js");
            envolveChatWidgetScript.setAttribute("data-identifier", "my_identifier");
            envolveChatWidgetScript.setAttribute("data-backend", "https://bot-dot-envolvetech-001.appspot.com");
            document.body.appendChild(envolveChatWidgetScript);
            })();
     `
     }}
     />,
    ]);
};

在正文中添加脚本时 Gatsby 出错

Error on Gatsby when adding a script in the body

javascript

reactjs

gatsby