集成 / 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 "文本。

../../_images/insert_file.jpg

您可以在网站上找到一系列活动:

https://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>