如何在 gatsby 中添加外部 Javascript？

Question

我想知道如何将外部 javascript 文件添加到 gatsby，我应该将这些标签放在哪个文件中？ 以及如何将文件正确导入 DOM。

谢谢

Answer 1

你可以在 gatsby-ssr.js 中添加这部分代码，这在你的 balise 中添加代码。

export const onRenderBody = ({ setHeadComponents }) => {
  setHeadComponents([
    <link
      rel="stylesheet"
      href="/style.css"
    />
  ])
}

你有同样的身体

export const onRenderBody = ({ setHeadComponents, setPostBodyComponents }) => {
      setHeadComponents([
        <link
          rel="stylesheet"
          href="/style.css"
        />
      ]),
setPostBodyComponents([
       <script></script>,
      ]),
    }

Answer 2

您可以选择以下任何一种方式：

一种。 使用插件您可以使用 gatsby-plugins 添加外部脚本，例如 Google Tracking Code、Google Tag Manager、Hubspot 代码等。

要在您的网站上使用 gatsby 插件，请在 gatsby org 网站https://www.gatsbyjs.org/plugins/ 中搜索该插件，然后按照步骤将其添加到您的网站中。

湾使用 gatsby-ssr.js 假设您想添加脚本或脚本列表，但 gatsbyjs 中没有插件。 不过，您可以添加外部脚本。

为此，您需要使用 gatsby SSR API https://www.gatsbyjs.org/docs/ssr-apis/ 。

Answer 3

您始终可以使用 html.js 添加 HTML 标签，但最好使用 npm 包添加库。 以下是有关如何使用 html.js 执行此操作的文档： https ://www.gatsbyjs.org/docs/custom-html/