在 Gatsby 网站上为 Neatcal 嵌入 <script> 标签

Question

我想将此代码嵌入我的 Gatsby 网站，最佳做法是什么？我还在学习，任何帮助将不胜感激。谢谢

<script 
            id="nc-booking-widget-script" 
            src="https://www.neatcal.com/app/services/booking/assets/js/integrate.js?v=21.04.26.5" 
            data-access-key="fcd3a2ae209d9ccae0d5fb3e66e9dabc" 
            data-nc-root="https://www.neatcal.com/app" 
            data-booking-url="https://www.neatcal.com/app/services/booking/book?u=fcd3a2ae209d9ccae0d5fb3e66e9dabc&widget_order=all_services,time&photo_mode=0&click_and_go=1&class_list_tmpl=list-1"></script>

Answer 1

最简单和原生的方法，不仅在 Gatsby 中，而且在 React 中通常使用 Helmet component。基本上，无论原始组件是什么，包装在该组件内的任何内容都会在 <head> 标签中输出。

要使用它，只需安装（通过 yarn add react-helmet 或 npm install --save react-helmet）并像这样使用：

import React from "react";
import {Helmet} from "react-helmet";

const HomePage = (props)=> {
    return (
        <div className="application">
            <Helmet>
                <meta charSet="utf-8" />
                <title>My Title</title>
                <link rel="canonical" href="http://someSite.net/example" />
                <script id="nc-booking-widget-script" src="https://www.neatcal.com/app/services/booking/assets/js/integrate.js?v=21.04.26.5" data-access-key="fcd3a2ae209d9ccae0d5fb3e66e9dabc" data-nc-root="https://www.neatcal.com/app"  data-booking-url="https://www.neatcal.com/app/services/booking/book?u=fcd3a2ae209d9ccae0d5fb3e66e9dabc&widget_order=all_services,time&photo_mode=0&click_and_go=1&class_list_tmpl=list-1"/>
            </Helmet>
            ...
        </div>
    );
};

此外，在 Gatsby 中，您可以通过以下方式customize the resultant HTML（创建一次构建）：

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

这会将 default-html.js 文件从 .cache 复制到 src/html.js。在那里，您可以像这样嵌入您的脚本：

import React from "react"
import PropTypes from "prop-types"
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"
        />
        <script
          id="nc-booking-widget-script"
          src="https://www.neatcal.com/app/services/booking/assets/js/integrate.js?v=21.04.26.5"
          data-access-key="fcd3a2ae209d9ccae0d5fb3e66e9dabc"
          data-nc-root="https://www.neatcal.com/app"
          data-booking-url="https://www.neatcal.com/app/services/booking/book?u=fcd3a2ae209d9ccae0d5fb3e66e9dabc&widget_order=all_services,time&photo_mode=0&click_and_go=1&class_list_tmpl=list-1"></script>
        {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,
}

两者都是有效且最简洁的方法。

在 Gatsby 网站上为 Neatcal 嵌入 <script> 标签

Embedding <script> tag for Neatcal on Gatsby site

reactjs

gatsby