Cuttlefish Docs
  • 简体中文

    • 简介

    什么是 Lessjs?

    Lessjs 是一个用于构建高性能页面的前端组件库。它基于 Web Components 开发，并提供了一系列现成的组件，例如：轮播图、视频、瀑布流等组件来帮助你更高效的开发用户界面。

    通过 CDN 使用 Lessjs

    你可以借助 script 标签直接通过 CDN 来使用 Lessjs：

    <script async crossorigin="anonymous" src="https://static.staticdj.com/cuttlefish/v1/spz.min.js"></script>

    你只需要在页面的 <head> 标签中引入该脚本，最佳的做法是在 <head> 中尽早引入该脚本。

    创建一个 Lessjs 页面

    你的 HTML 的结构可能如下所示：

    <!DOCTYPE html>
<html lang="en-US">
<head>
  <meta charset="UTF-8">
  <title>Lessjs</title>
  <!-- ... -->
  <script async crossorigin="anonymous" src="https://static.staticdj.com/cuttlefish/v1/spz.min.js"></script>
  <style>body{-webkit-animation:-spz-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-spz-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-spz-start 8s steps(1,end) 0s 1 normal both;animation:-spz-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -spz-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -spz-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -spz-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -spz-start{from{visibility:hidden}to{visibility:visible}}@keyframes -spz-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
</head>
<body>
  <!-- ... -->
</body>
</html>

    到目前为止，代码中的内容都非常简单易懂，但有几个地方我们必须要按照规范来使用。在之后的例子中，我们会默认省略 Lessjs 资源引入相关的代码。

    Lessjs HTML 文档必须满足以下几个条件：

    1. 引入 CDN 的脚本必须带有 async 属性，保证页面的性能更好。

    2. 在 head 中包含一个样式代码， CSS 样式最初会隐藏页面内容，直到 Lessjs JS 加载完毕为止。

    3. lang 属性必须取以下这些值中的一个（不区分大小写）：

    lang 值表示国家示例
    ar-SA阿拉伯语(沙特阿拉伯)أضف إلى السلة
    de-DE德国语In den Warenkorb legen
    en-US英语Add to cart
    es-ES西班牙语Añadir a la cesta
    fr-FR法语Ajouter au panier
    id-ID印度尼西亚语Masukkan ke keranjang
    it-IT意大利语Aggiungi al carrello
    ja-JP日语カートに追加
    ko-KR韩语카트에 추가하십시오
    nl-NL荷兰语Voeg toe aan winkelkar
    pl-PL波兰语Dodaj do koszyka
    pt-PT葡萄牙语Adicionar ao carrinho
    ru-RU俄语Добавить в корзину
    th-TH泰语เพิ่มลงในรถเข็น
    zh-CN中文（简体中文）加入购物车
    zh-TW中文（繁体中文）加入購物車

    AI 使用建议（LLM Ready）

    • 章节密度：检测到 3 个二级标题。
    • 示例密度：检测到 2 个代码块。
    • 先读结论：优先提取本页“定义、约束、边界条件”。
    • 再读证据：根据代码示例确认可执行写法，不直接依赖自然语言段落。
    • 最后联动：涉及组件时同步查看对应组件页，避免文档与实现偏差。