如何在 Gatsby 站点的正文中包含带有外部脚本的嵌入代码？

Question

我正在开发我的第一个 Gatsby 网站，除了需要放置在其中一个页面的主体中的嵌入代码外，一切顺利。我查看了 SSR API 的文档，但似乎找不到关于如何完成的任何明确文档。需要嵌入的代码如下。任何帮助将不胜感激。

下面的嵌入代码只需要放在一页的正文中（而不是网站上的每个页面）？

<style>.vagaro a {font-size:10px; color:#AAA; text-decoration:none;}</style>
<script type="text/javascript" src="https://www.vagaro.com//resources/WidgetEmbeddedLoader/OZqnC30tDZCcT3q"></script>
</div>

Answer 1

如果您需要将这些内容添加到每个页面，您可以使用 html.js 来完成。

首先复制现有的 html.js 以便您可以进行持久更改：

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

然后清除缓存和 public 文件夹：盖茨比干净

然后在 <head>.

结束前用您需要的代码编辑 src/html.js

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}
        <style>{`.vagaro a {font-size:10px; color:#AAA; text-decoration:none;}`}</style>
        <script type="text/javascript" src="https://www.vagaro.com//resources/WidgetEmbeddedLoader/OZqnC30tDZCcT3q"></script>
      </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,
}

如果只需要添加到单个页面，使用react-helmet

import React from 'react';
import Helmet from 'react-helmet';

const SecondPage = () => {
  return (
    <>
      <Helmet>
        <title>Page Two</title>
        <style>{`.vagaro a {font-size:10px; color:#AAA; text-decoration:none;}`}</style>
        <script type="text/javascript" src="https://www.vagaro.com//resources/WidgetEmbeddedLoader/OZqnC30tDZCcT3q"></script>
      </Helmet>
      <h1>Page Two</h1>
      <p>Welcome to page 2</p>
    </>
  );
};

export default SecondPage;

如何在 Gatsby 站点的正文中包含带有外部脚本的嵌入代码？

How do I include embed code with an external script in the body of a Gatsby site?

reactjs

server-side-rendering

gatsby