客户端库和核心组件 client-libraries

核心组件附带了许多客户端库,并能够包含您自己的客户端库。

提供了客户端库 provided

核心组件提供以下开箱即用的客户端库。

  • 该​ 站点 Clientlib 提供要应用于站点的组件的简约功能行为。
    • 它们作为实现项目加速的起点,鼓励使用其实施来扩展和定制这些库,从而实现所需的外观和功能。
  • 编辑器 Clientlib 应用于创作对话框以确保其预期的功能和外观。
  • 编辑器钩子 clientlib 在编辑模式下加载时,将应用于站点。
    • 它们包含在编辑器触发的事件上执行的 JavaScript 代码,可促进动态功能的初始化。
  • 某些组件可能具有专为在特定情况下使用而设计的特定附加 Clientlib,例如与 Dynamic Media 一起使用时。

包含客户端库 including

可通过多种不同的方式来包含客户端库,具体取决于您的使用案例。以下是每个例子的示例 HTL 代码段

推荐的默认使用 recommended-default-usage

如果您没时间调查您所处情况下的最佳使用,则可通过将以下 HTL 行置于页面 head 元素中来包含客户端库:

<sly data-sly-use.clientlibs="${'com.adobe.cq.wcm.core.components.models.ClientLibraries' @
    categories='wknd.base', defer=true}">
    ${clientlibs.jsAndCssIncludes @ context="unsafe"}
</sly>

这会将 CSS 和 JS 包含在页面 head 中,并且会将 defer 属性添加到 JSscript includes 中,这样一来,浏览器将在执行脚本之前等待 DOM 准备就绪,从而加快页面加载速度。

基本用途 basic-usage

用于包含客户端库类别的 JS 和 CSS 的基本语法(这将生成所有对应的 CSS link 元素和/或 JS script 元素)如下所示:

<sly data-sly-use.clientlibs="${'com.adobe.cq.wcm.core.components.models.ClientLibraries' @ categories='wknd.base'}">
    ${clientlibs.jsAndCssIncludes @ context="unsafe"}
</sly>

要一次性对多个客户端库类别执行相同操作,可以将一组字符串传递给 categories 参数:

<sly data-sly-use.clientlibs="${'com.adobe.cq.wcm.core.components.models.ClientLibraries' @
    categories=['wknd.base', 'cq.foundation']}">
    ${clientlibs.jsAndCssIncludes @ context="unsafe"}
</sly>

仅 CSS 或 JS css-js-only

通常,需要将 CSS includes 置于 HTML head 元素中,并将 JS includes 置于 body 元素的结束位置之前。

head 中,要仅包含 CSS 而非 JS,请使用 cssIncludes

<sly data-sly-use.clientlibs="${'com.adobe.cq.wcm.core.components.models.ClientLibraries' @ categories='wknd.base'}">
    ${clientlibs.cssIncludes @ context="unsafe"}
</sly>

body 结束位置之前,要仅包含 JS 而非 CSS,请使用 jsIncludes

<sly data-sly-use.clientlibs="${'com.adobe.cq.wcm.core.components.models.ClientLibraries' @ categories='wknd.base'}">
    ${clientlibs.jsIncludes @ context="unsafe"}
</sly>

属性 attributes

要将属性应用于生成的 CSS link 元素和/或 JS script 元素,可使用大量参数:

<sly data-sly-use.clientlibs="${'com.adobe.cq.wcm.core.components.models.ClientLibraries' @
    categories='wknd.base',
    media='print',
    async=true,
    defer=true,
    onload='console.log(\'loaded: \' + this.src)',
    crossorigin='anonymous'}">
    ${clientlibs.jsAndCssIncludes @ context="unsafe"}
</sly>

可传递给 jsAndCssIncludescssIncludes 的 CSS link 属性:

  • media:可传递给 jsAndCssIncludesjsIncludes 的字符串 JS script 属性:
  • async:布尔型
  • defer:布尔型
  • onload:字符串
  • crossorigin:字符串

内联 inlining

在某些情况下,对于优化或者对于电子邮件或 AMP,可能需要将 CSS 或 JS 内联到 HTML 输出中。

要内联 CSS,可使用 cssInline,在此情况下,您必须编写周围的 style 元素:

<style type="text/css"
    data-sly-use.clientlibs="${'com.adobe.cq.wcm.core.components.models.ClientLibraries' @ categories='wknd.base'}">
    ${clientlibs.cssInline @ context="unsafe"}
</style>

类似地,要内联 JS,可使用 jsInline,在此情况下,您必须编写周围的 script 元素:

<script type="text/javascript"
    data-sly-use.clientlibs="${'com.adobe.cq.wcm.core.components.models.ClientLibraries' @ categories='wknd.base'}">
    ${clientlibs.jsInline @ context="unsafe"}
</script>

加载上下文感知 CSS 和 JavaScript context-aware-loading

页面组件还支持加载开发人员定义的上下文感知 CSS、JavaScript 或元标记。

可通过使用以下结构为 com.adobe.cq.wcm.core.components.config.HtmlPageItemsConfig 创建上下文感知资源来做到这一点:

com.adobe.cq.wcm.core.components.config.HtmlPageItemsConfig
    - prefixPath="/some/path"
    + item01
        - element=["link"|"script"|"meta"]
        - location=["header"|"footer"]
        + attributes
            - attributeName01="attributeValue01"
            - attributeName02="attributeValue02"
            ...
    + item02
        ...
    ...

有关更多信息,请参阅页面组件的技术文档。

recommendation-more-help
d2be9096-a81e-404b-9952-d8925af7219c