集成 / HTML /JS / CSS¶
WebAcappella Fusion 允许在多个级别包含代码/脚本
WebAcappella FUSION 完全独立于 JQuery 库,因此可以轻松集成第三方代码(无冲突)。
在组件中¶
HTML 组件允许您在页面的任何位置放置代码
在每个组件中,您可以输入一个或多个 css 类的名称。
这些类可以在页面甚至网站的属性中定义。
神奇 "选择器¶
WebAcappella 的 "神奇 "**.$**选择器可让您轻松为元素编写 CSS 规则。
该选择器将自动被当前组件对应的选择器所取代。
小技巧
使用 Webacappella 和图像组件发布的页面示例
.$
{
filter: sepia(1);
}
结果就是在图像上使用 "棕褐色 "滤镜。
在书页中¶
在每个页面的属性部分 - 自定义 HTML 代码中,您可以输入 CSS/JS 代码
在网站上¶
在一般网站属性部分 - 自定义 HTML 代码部分,您可以输入 CSS/JS 代码
每个代码都将自动集成到所有页面上。
在 HTML 代码中使用文件¶
您可能需要在 HTML 代码中使用文件。
让我们以整合 "Lottie "动画文件为例。
洛蒂 "动画至少包含两个页面元素
洛蒂 "玩家 "密码
要放在页面的 HEAD 代码中,甚至网站一般属性的 HEAD 中。
<script src="https://unpkg.com/@lottiefiles/lottie-player@latest/dist/lottie-player.js"></script>
洛蒂 "动画的代码
<lottie-player src="URL" background="transparent" speed="1" style="width: 300px; height: 300px;" loop controls autoplay></lottie-player>
您可以插入与所选动画相对应的 JSON 文件来代替 "URL "文本。
您可以在网站上找到一系列活动:
结果将是这样的
<lottie-player src="{{WA_FILE 9744-sample-animation.json}}" background="transparent" speed="1" style="width: 300px; height: 300px;" loop controls autoplay></lottie-player>