Cal*_*alH 6 javascript widget reactjs gatsby
我正在尝试将 clucth.co 小部件添加到 Gatsby 网站，但它无法呈现。我尝试过使用 React Helmet 来实现该<script>部分，但它仍然不起作用。
希望我在这里遗漏了一些简单的东西，但是看看其他解决方案，我找不到任何有效的东西。
供参考： 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>
需要渲染您的脚本将无法加载。
Script组件（2022 更新）Script自从Gatsby 组件（由 Partytown 提供支持）发布以来，添加第三方脚本变得更加容易。只是：
import React from "react"
import { Script } from "gatsby"
function YourPage() {
return <Script src="https://my-example-script" />
}
export default YourPage
Helmet：你说你已经尝试过了，但应该这样做。您可能需要尝试添加gatsby-plugin-react-helmet. 然后：
<Layout>
<SEO title="Live" />
<Helmet>
<script src="https://tlk.io/embed.js" type="text/javascript"/>
</Helmet>
</Layout>
检查与钩子一起使用时的兼容性问题。
onRenderBodyAPI gatsby-ssr.js：GatsbysetHeadComponents在onRenderBodyAPI 中公开了一个您可以利用的函数：
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
/>,
])
}
上面的代码片段将在编译后的 HTML 标签<script>中插入。<head>
在这里，您有另一种使用angerlySetInnerHTML的方法：
setHeadComponents([
<script dangerouslySetInnerHTML={{whateveryouneedtoset}}>
])
html.js：您可以通过修改html.js使用 Gatsby 构建整个站点的样板来自定义生成的 HTML 的输出。
跑步：
cp .cache/default-html.js src/html.js
或者，将default-html.jsfrom.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.jsAPI：如果以上都不适合您，您仍然可以使用gatsby-browser.jsAPI 之一 ( 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")
}
}
| 归档时间： |
|
| 查看次数： |
1995 次 |
| 最近记录： |