gatsby

In the modern JavaScript Web Development workflow it’s quite common to install JavaScript via npm packages.

在现代JavaScript Web开发工作流程中，通过npm软件包安装JavaScript是很常见的。

Sometimes however we must include an external JavaScript file, and modern tools might make this a little difficult.

但是有时我们必须包括一个外部JavaScript文件，而现代工具可能会使此操作有些困难。

In particular I had the need to include a video from Wistia in my site, and after a quick look everything looked quite more complicated than I wanted.

特别是，我需要在我的网站中包含来自Wistia的视频，快速浏览后，所有内容看起来都比我想要的复杂得多。

Wistia gave me this HTML snippet to embed:

Wistia给了我这个要嵌入HTML代码段：

On a “normal” HTML site, maybe built with Hugo like I usually do, it would be dead simple.

在一个“正常的” HTML网站上，也许像我通常使用Hugo构建的那样，这简直太简单了。

I’d just add this code to my page.

我只是将此代码添加到我的页面。

But in a Gatsby page, which is a React component?

但是在Gatsby页面中，哪个是React组件？

I looked at some plugins but no one really did what I wanted.

我看了一些插件，但没人真正做到我想要的。

The solution is perhaps a bit “hacky”, but worked like a charm and I still feel I have control over what’s happening.

该解决方案可能有点“棘手”，但是却像个魅力一样发挥着作用，我仍然觉得自己可以控制正在发生的事情。

I added the HTML code as JSX, properly converting all the HTML attributes: class -> className, aria-hidden -> ariaHidden, and the styles - use a tool like to make it quick.

我将HTML代码添加为JSX，正确转换了所有HTML属性： aria-hidden -> ariaHidden class -> className ， aria-hidden -> ariaHidden和样式-使用类似的工具快速。

Then I added this code to the gatsby-browser.js file to add the scripts I needed, on page load:

然后，我将此代码添加到gatsby-browser.js文件中，以在页面加载时添加所需的脚本：

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://fast.wistia.com/embed/medias/9rvl8vgrzg.jsonp")    addScript("https://fast.wistia.com/assets/external/E-v1.js")  }}

翻译自:

gatsby