如何在 GatsbyJS 中使用 Adobe Embed API

Question

我正在尝试为我的网站使用 Adobe Embed API。我正在使用 GatsbyJS，但我不知道如何将它包含在我的 Gatbsy 文件中。以下是我要包含的内容，但由于我没有使用任何 .html 文件，我该如何将其包含在我的代码中？

<script src="https://documentcloud.adobe.com/view-sdk/main.js"></script>
<script type="text/javascript">
    document.addEventListener("adobe_dc_view_sdk.ready", function(){ 
        var adobeDCView = new AdobeDC.View({clientId: "<YOUR_CLIENT_ID>"});
        adobeDCView.previewFile({
            content:{promise: "<FILE_BLOB_PROMISE>"},
            metaData:{fileName: "<FILE_NAME>"}
        }, {embedMode: "LIGHT_BOX"});
    });
</script>

更新：现在我的一个文件中有这个：

<Helmet>
      <script src="https://documentcloud.adobe.com/view-sdk/main.js"></script>
      <script type="text/javascript">
      document.addEventListener("adobe_dc_view_sdk.ready", function(){ 
      useEffect(() => {
        var adobeDCView = new AdobeDC.View({clientId: "<CLIENT_ID>"});
        adobeDCView.previewFile({
        content:{location: {url: "https://documentcloud.adobe.com/view- 
        sdk-demo/PDFs/Bodea Brochure.pdf"}},  
        metaData:{fileName: "Bodea.pdf"}
  }, {embedMode: "LIGHT_BOX"});}
  )});
  </script>
</Helmet>

它说 AdobeDC 没有定义，我很新，哪里出错了？

Answer 1

您没有使用任何 HTML 文件，但最终，Gatsby 构建了您的 HTML。

您可以通过多种方式在源代码中包含外部脚本。对于您的情况，最直接的方法是 customize the HTML.

运行:

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

或者从.cache文件夹中手动复制default-html.js，将其放入/src并将文件重命名为html.js。

完成后，如果在构建站点时，Gatsby 在 /src 中找到 html.js，它将用作您的代码样板，因此在此处添加 Adobe 片段应该适合您:

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}
      </head>
      <body {...props.bodyAttributes}>
        {props.preBodyComponents}
        <div
          key={`body`}
          id="___gatsby"
          dangerouslySetInnerHTML={{ __html: props.body }}
        />
        {/* Add your scripts here */}
        {props.postBodyComponents}
      </body>
    </html>
  )
}

其他添加第三方脚本的方法：

How to load script in specific page in gatsby

如何在 GatsbyJS 中使用 Adob​​e Embed API

How to use the Adobe Embed API in GatsbyJS

gatsby

如何在 GatsbyJS 中使用 Adobe Embed API