集成/HTML/JS/CSS

WebAcappella Fusion支持多层级代码/脚本的嵌入。

WebAcappella FUSION 完全独立于 JQuery 库，便于集成第三方代码（无冲突）。

在组件中

• HTML组件允许在页面任意位置放置代码。

• 在每个组件中，您可以填写一个或多个 CSS 类名称。这些类的定义可以在页面属性甚至网站属性中进行。

“神奇”选择器

WebAcappella 的“神奇”选择器 .$ 可帮助您轻松为元素编写 CSS 规则。该选择器将自动替换为与当前组件相对应的选择器。

.$
{
   filter: sepia(1);
}

结果将是您的图片应用了“棕褐色”滤镜。

在页面中

• 在每个页面中，通过“属性”部分的“自定义 HTML 代码”字段可输入 CSS/JS 代码。

在网站中

• 在网站的“常规属性”部分，通过“自定义 HTML 代码”区域可以输入 CSS/JS 代码。每段代码都会自动应用到所有页面上。

在 HTML 代码中使用文件

您可能需要在 HTML 代码中使用文件。下面我们以集成 Lottie 动画文件为例进行说明。

一个 Lottie 动画在页面中至少包含 2 个元素：

• Lottie播放器代码，需放置在页面HEAD标签内，或直接放入网站“常规属性”的HEAD部分。

<script src="https://unpkg.com/@lottiefiles/lottie-player@latest/dist/lottie-player.js"></script>

• 您的 Lottie 动画代码

<lottie-player src="URL" background="transparent" speed="1" style="width: 300px; height: 300px;" loop controls autoplay></lottie-player>

您可以将URL文本替换为与所选动画对应的JSON文件。

您可以在以下网站等处找到各种动画：

lottiefiles.com/

最终生成的代码将类似于以下内容：

<lottie-player src="{{WA_FILE 9744-sample-animation.json}}" background="transparent" speed="1" style="width: 300px; height: 300px;" loop controls autoplay></lottie-player>