Show Menu
主题×

包括客户端库

根据您的用例,可以通过多种 不同的方式 来包含客户端库。 此文档提供每个代码 片段的示例 和示例HTL代码片段。

基本使用

包含客户端库类别的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包含的内容放在HTML元 head 素中,而JS包含在元素关闭之前 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>

属性

要将属性应用于生 link 成的CSS元素和/ script 或JS元素,可以使用许多参数:
<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>

link 以传递到的CSS属 jsAndCssIncludes 性和 cssIncludes :
  • media :字符 script 串JS属性,可传递给 jsAndCssIncludes jsIncludes :
  • async : 布尔型
  • defer : 布尔型
  • onload : 字符串
  • crossorigin : 字符串

内衬

在某些情况下,要进行优化, 或者 为电子邮件或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>