如何在 GatsbyJS 中使用 Adobe Embed API答案

【问题标题】：How to use the Adobe Embed API in GatsbyJS如何在 GatsbyJS 中使用 Adobe Embed API
【发布时间】：2021-10-26 09:50:24
【问题描述】：

我正在尝试为我的网站使用 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 没有定义，我很新，哪里出错了？

【问题讨论】：

标签： gatsby

【解决方案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 sn-p 应该适合您：

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>
  )
}

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

【讨论】：

抱歉再次询问，但是修改 html.js 会改变我所有的页面，不是吗？如果是这样，那么使用会更好吗？抱歉，我对 Gatsby 很陌生
是的，它会，但你的脚本只会被插入一次，不像你使用Helmet（因为补液），每次页面呈现时都会插入它
我试过了，但不知何故没用。当我填写它时，它给出了错误，所以我尝试使用 useEffect，但它仍然没有出现在我的页面中。另外，如果它正在修改我的所有页面，我可以将其限制为仅显示在我的一个页面中吗？
您将需要使用 Helmet 方法而不是 html.js。如果没有看到您尝试过的代码和结果，就无法猜测发生了什么。
我更新了仍然无法工作的代码，我不知道为什么没有定义 AdobeDC