将 clutch.co 小部件嵌入到 Gatsby.js 网站

Embedding clutch.co widget to Gatsby.js website

我正在尝试将 clucth.co 小部件添加到 Gatsby 站点，但它没有呈现。我已经尝试在 <script> 部分使用 React Helmet，但它仍然不起作用。

希望我在这里遗漏了一些简单的东西，但查看其他解决方案我找不到任何有效的方法。

供参考：https://clutch.co/content/add-review-widget-your-website

<script type="text/javascript" src="https://widget.clutch.co/static/js/widget.js"></script>
    <div className="clutch-widget" data-url="https://widget.clutch.co" data-widget-type="7" data-height="65" data-clutchcompany-id="XXXXXXX"></div>

您可以通过多种方式在 Gatsby 中插入第三方脚本。你将面临的所有问题是你需要等待你的 div:

<div className="clutch-widget" data-url="https://widget.clutch.co" data-widget-type="7" data-height="65" data-clutchcompany-id="XXXXXXX"></div>

需要渲染您的脚本将无法加载。

使用Helmet：

你说你已经尝试过但它应该。您可能需要尝试添加 gatsby-plugin-react-helmet 的嵌入式支持。那么：

<Layout>
  <SEO title="Live" />
  <Helmet>
    <script src="https://tlk.io/embed.js" type="text/javascript"/>
  </Helmet>
</Layout>

检查 compatibility issues 与钩子一起使用时。

使用 onRenderBody API 来自 gatsby-ssr.js:

Gatsby 在 onRenderBodyAPI 中公开了一个 setHeadComponents 函数，您可以利用它：

import React from "react"

export const onRenderBody = ({ setHeadComponents }, pluginOptions) => {
  setHeadComponents([
    <script key="tracking"
      src="https://widget.clutch.co/static/js/widget.js
      type="text/javascript"
      async
    />,
  ])
}

上面的代码片段会将 <script> 插入已编译 HTML 的 <head> 标记中。

这里有另一种使用 dangerouslySetInner 的方法HTML:

setHeadComponents([
    <script dangerouslySetInnerHTML={{whateveryouneedtoset}}>
])

摘自Unable to Inject 3rd Party Scripts in Gatsby

直接修改html.js:

您可以通过 modifying the html.js 自定义更多结果 HTML 的输出，这是使用 Gatsby 构建整个网站的样板文件。

运行:

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

或者，将 default-html.js 从 .cache 文件夹复制到 /src 并将其重命名为 html.js。编译时，如果 html.js 存在，Gatsby 将使用它来基于该骨架构建您的站点。

你会得到类似的东西：

import React from "react"
import PropTypes from "prop-types"

export default function HTML(props) {
  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}
      </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,
}

在那里你可以直接添加你的<script>：

  <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"
    />
    <script type="text/javascript" src="https://widget.clutch.co/static/js/widget.js"></script>
    {props.headComponents}
  </head>

使用gatsby-plugin-load-script:

只需安装并使用插件：

{
  resolve: 'gatsby-plugin-load-script',
  options: {
    src: 'https://widget.clutch.co/static/js/widget.js',
  },
},

破解 gatsby-browser.js API:

如果上述 none 适合您，您仍然可以使用 gatsby-browser.js API 之一 (onClientEntry) 手动添加给定源的脚本 URL:

const addScript = url => {
  const script = document.createElement("script")
  script.src = url
  script.async = true
  document.body.appendChild(script)
}

export const onClientEntry = () => {
  window.onload = () => {
    addScript("https://widget.clutch.co/static/js/widget.js")
  }
}