阿波罗嵌入

阿波罗回放 Embeds 是预建的,可再使用的组件,旨在无缝地整合入Webflow等第三方网站. 这些部件为认证、内容输入和搜索功能提供了功能,创造了跨平台的统一和互动的用户经验.

从阿波罗嵌入开始

1. 在您的网站上添加脚本标记

为了启用"阿波罗之嵌入",在您的网站代码中包含以下脚本和样式表. 对于Webflow用户,请将其添加到 自定义代码 下一节 页脚代码数字 :

<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/@apollosproject/canvas-embeds@latest/widget/index.css"
/>
<script
  defer
  src="https://cdn.jsdelivr.net/npm/@apollosproject/canvas-embeds@latest/widget/index.min.js"
></script>

3. 了解嵌入模式

阿波罗嵌入式有三种主要模式:

• 阿波罗站点模式
• 容器模式
• 遗留模式

阿波罗站点模式

在阿波罗斯站点模式中,所有站点都嵌入了外部阿波罗站点的链接. 该模式被推荐给希望保持跨平台的一致用户体验的用户,它是所有嵌入的默认模式.

容器模式

在集装箱模式中,在主机网站的集装箱内显示嵌入层. 这个模式被推荐给那些想要在提供阿波罗函数的同时将用户保留在自己网站上的用户. 该模式还使用户能够将阿波罗斯的内容清理地整合到他们的网站上,同时应用自定义风格.

为启用容器模式,添加 data-apollos-path="/apollos" 脚本标签属性 :

<script
  defer
  src="https://cdn.jsdelivr.net/npm/@apollosproject/canvas-embeds@latest/widget/index.min.js"
  data-apollos-route="/apollos"
></script>

在主机网站上,浏览任何种子或内容将导航到 /apollos 路径。 此路径( 可自定义) 应包含 div 带身份证 apollos-widget-container 以显示嵌入内容。 这个容器的样式应与主机网站的设计相匹配.

遗留模式

在"遗产模式"(Legacy Modal Mode)中,嵌入在主机网站上的模式窗口中显示. 这个模式被推荐给那些想要在提供阿波罗函数的同时将用户保留在自己网站上的用户. 所有嵌入将显示在一个模式窗口中,通过URL搜索参数跟踪导航状态.

要启用遗留模式,请添加 data-apollos-modal="true" 脚本标签属性 :

<script
  defer
  src="https://cdn.jsdelivr.net/npm/@apollosproject/canvas-embeds@latest/widget/index.min.js"
  data-apollos-modal="true"
></script>

4. 添加嵌入式集装箱

导航到您的站点构建器( 如 Webflow)并添加一个 div 用于您计划使用的每个嵌入的元素。 支持嵌入 :

• Auth – 用户认证
• 特色Feed——配乐内容素材
• 搜索 — 经典 Algolia 搜索和配置 UI

每个 div 必须包括 apollos-widget 课.

示例

<!-- Auth -->
<div class="apollos-widget" data-type="Auth" data-church="example_church"></div>

<!-- FeatureFeed -->
<div
  class="apollos-widget"
  data-type="FeatureFeed"
  data-church="example_church"
></div>

<!-- Search (Algolia) -->
<div
  class="apollos-widget"
  data-type="Search"
  data-hide-apollos-auth="true"
  data-church="example_church"
  data-search-profile-size="365px"
></div>

5. 自定义带有属性的嵌入物

使用 data-attributes (或 自定义属性 在Webflow中),以自定义每个嵌入体的行为和外观.

嵌入的地物示例:

<div
  class="apollos-widget"
  data-type="FeatureFeed"
  data-church="example_church"
  data-feature-feed="FeatureFeed:unique-id"
  data-modal="true"
></div>

6. 理解教会障碍

教堂的弹壳独有地识别显示内容的组织. 如果你不确定你的弹壳,请联系开发商或管理员.

[注] 替换 [INSERT_CHURCH_SLUG_HERE] 与您的教堂的独特标识(或 弹片) (中文(简体) ). 需要帮助获得教堂涕丸的,联系开发商.

对于开发者

背景情况

这个软件包原本是 apollos-embeds 数据库,涉及前端代码、组件和GraphQL查询的重大重复。 为了统一我们的网络前端开发,我们创造了 canvas-ui-web 作为 组件库编辑 apollos-embeds 项目已移入此存储库,以便与我们的其他网络平台共存.

原始版本为 web-embeds 在很大程度上依赖于模式表述。 这个新软件包保留了模式的选择性使用,同时鼓励用户导航到运行于此的阿波罗微站点 新网页。 。 。 .

如何运作

嵌入被捆绑为 index.js 财务报告和审定财务报表 index.css 输入 /widget 文件夹,并通过 jsDelivr 分发。 通过将这些内容纳入网页,用户可以访问这些嵌入地. 设置 apollos-widget 页面上的 div 触发了网络嵌入功能.

地方发展

要在本地操作此软件包, 请确保您有有效的 特性种子标识启用 index.html 以实例进行测试。 记住在同一页上嵌入来自不同教堂的会引发冲突,所以确保每页只使用一所教堂. 你应该跑 apollos-cluster 以及这整个回放 通过运行 yarn dev。 。 。 .

本地测试嵌入

使用 index.html 用于测试的文件。 打开 http://localhost:5174 在浏览器中查看更改.

嵌入测试的示例 :

<div
  data-type="FeatureFeed"
  data-church="apollos_demo"
  data-feature-feed="FeatureFeed:caf294f0-cd0e-4486-95e7-fa11bd5fb1c5"
  data-modal="true"
  class="apollos-widget"
></div>

要测试更改, 打开 http://localhost:5174 在您的浏览器中.

发布更新/ 快取缓存

此软件包在合并到主机时自动部署. 如果您希望手动部署:

1. cd apps/web-embeds
2. 跳出版本( 默认 patch ) : yarn bump (或 yarn bump:minor 编号 : yarn bump:major) (中文(简体) ). 您可能想咨询国家防范机制,以检查上一个部署的版本(它将与软件包.json中的版本不同).
3. 发布软件包 : npm publish --access public (自动运行) prepublishOnly/建设)
4. Npm 显示新版本后, 清洗 jsDelivr so @latest 立即更新 : yarn flush
5. (可选)点击 https://cdn.jsdelivr.net/npm/@apollosproject/canvas-embeds@latest/widget/index.js 以验证新捆绑已送达

跳过发布步骤意味着即使repo包含更新的代码,用户仍然会下载上个版本,并跳过冲洗步骤会延迟传播直到jsDelivr的缓存到期.

缓存

为了在本地开发中测试缓存,请通过注释 : x-cache-me-not 标题在 :

src/客户/apolos ApiLink.js (中文(简体) )

'x-cache-me-not': 1,

jsDelivr 缓存中断

如果您需要强制 jsDelivr 获取文件的最新版本, 您可以通过访问文件 URL 的子域来手动清除缓存 。 此命令从 jsDelivr 的 CDN 中清除文件的缓存版本 .

yarn flush

高级配置

支持的嵌入和属性

路径运行

对于高级路由选项,使用:

• data-use-path-router="true" 用于启用基于路径的路由.
• data-apollos-id-param="true" 用于自定义的ID处理.