嵌入到第三方平台

在Baklib上创建的站点应用，都可以嵌入到其他网站/APP/小程序平台中。Baklib 具有严格的 CSP 安全策略，如果要嵌入到其他平台，则需要在“应用设置”--“域名管理”--“配置”中配置对应的内容安全策略。

关于 CSP 请见官方标准说明： Content Security Policy。

目前支持的的配置选项：

案例：

1. 在网站中嵌入

本案例演示如何做 www.baklib.cn 网站上嵌入 release.baklib.cn。

1. 做 release.baklib.cn 站点中，“应用设置”--“域名管理”--“配置”，添加以下配置：

frame-ancestors:
www.baklib.cn self //允许 www.baklib.cn 嵌入本站内容

1. 在 www.baklib.cn 中台添加左侧弹窗，通过iframe调取 realease.baklib.cn：

   snippets/_footer.liquid:

   {% comment %} What's new 侧边栏弹窗 {% endcomment %}
   <div  @keydown.window.escape="overlay_open = false" x-show="overlay_open" class="relative z-50" aria-labelledby="slide-over-title" x-ref="dialog" aria-modal="true">
     <div class="fixed inset-0 overflow-hidden">
       <div class="absolute inset-0 z-50 overflow-hidden">
         <div class="fixed inset-y-0 right-0 flex max-w-full pl-10 pointer-events-none">
             <div x-show="overlay_open" x-transition:enter="transform transition ease-in-out duration-500 sm:duration-700" x-transition:enter-start="translate-x-full" x-transition:enter-end="translate-x-0" x-transition:leave="transform transition ease-in-out duration-500 sm:duration-700" x-transition:leave-start="translate-x-0" x-transition:leave-end="translate-x-full" class="w-screen max-w-md pointer-events-auto" x-description="Slide-over panel, show/hide based on slide-over state." @click.away="overlay_open = false">
               <div class="pl-0.5 bg-slate-200">
                 <turbo-frame id="release_iframe" src="/s/release" loading="lazy" class="z-50 w-full h-screen overflow-hidden bg-white dark:bg-gray-800">
                   loading...
                 </turbo-frame>
               </div>
             </div>
         </div>
       </div>
     </div>
   </div>

statics/release.liquid

{% layout none %}
<!--
通过 iframe 加载第三方URL
1. 通过 turbo frame 的好处是只有 lazy load 本页面时候才会访问第三方 URL
2. 需要在域名管理中配置IFrame跨域
3. 见：statics/release.liquid
4. 见：_footer.liquid
-->
<turbo-frame id="release_iframe" loading="lazy">
  <iframe src="{{ site.settings.overlay_url }}" frameborder="0" class="z-50 w-full h-screen overflow-hidden bg-white dark:bg-gray-800"></iframe>
</turbo-frame>

效果展示：

2.在聊天窗口中嵌入

在客服聊天窗口嵌入知识库，实现不离开聊天平台即可在线调用知识库。