Question

我正在尝试将Bookalet第三方小部件添加到我的盖茨比索引页面。我尝试过仅包含在页面中并通过头盔。两种方法都不可悲。有什么想法吗？

有问题的脚本

<div><script src="https://widgets.bookalet.co.uk/publish.js" data-bookalet="da8ebdf5-2f4a-47cb-8c92-f84032b16f5b" data-property="17263" data-monthcount="1"></script></div>

示例1：只需将其放置在页面中：

          <TextBlock>
        <Heading>
          <h2>Availability</h2>
        </Heading>
        <RichText>
          You can check availabilty below. Please note the minimum booking
          is seven nights. Short breaks may be considered out of season,
          please contact us.
        </RichText>
        <Spacer></Spacer>
        <div>
          <script
            src="https://widgets.bookalet.co.uk/publish.js"
            data-bookalet="da8ebdf5-2f4a-47cb-8c92-f84032b16f5b"
            data-property="17263"
            data-monthcount="1"
          ></script>
        </div>
      </TextBlock>

示例2：使用头盔添加到页面中。

            <Helmet>
          <script
            src="https://widgets.bookalet.co.uk/publish.js"
            data-bookalet="da8ebdf5-2f4a-47cb-8c92-f84032b16f5b"
            data-property="17263"
            data-monthcount="1"
          ></script>
        </Helmet>

Answer 1

我已经使用了<Helmet>方法，它正在工作。这是代码段：

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

const Index = props => {
  return <Layout>
    <Helmet>
      <script src="https://widgets.bookalet.co.uk/publish.js"
              data-bookalet="da8ebdf5-2f4a-47cb-8c92-f84032b16f5b"
              data-property="17263"
              data-monthcount="1"/>
    </Helmet>
    <h1>Hi people</h1>
  </Layout>;
};


export default Index;

200响应（成功）的屏幕截图：

在Gatsby网站中添加Javascript脚本

1 个答案: