Show Menu
TEMAS×

Inclusión de bibliotecas de cliente

Existen diferentes maneras de incluir bibliotecas de cliente según el caso de uso. Este documento proporciona ejemplos y fragmentos HTL de muestra para cada uno.

Uso básico

La sintaxis básica para incluir JS y CSS de una categoría de biblioteca de cliente, que generará todos los link elementos CSS y/o elementos JS script correspondientes, es la siguiente:
<sly data-sly-use.clientlibs="${'com.adobe.cq.wcm.core.components.models.ClientLibraries' @ categories='wknd.base'}">
    ${clientlibs.jsAndCssIncludes @ context="unsafe"}
</sly>

Para hacer lo mismo con varias categorías de biblioteca de cliente a la vez, se puede pasar una matriz de cadenas al categories parámetro:
<sly data-sly-use.clientlibs="${'com.adobe.cq.wcm.core.components.models.ClientLibraries' @
    categories=['wknd.base', 'cq.foundation']}">
    ${clientlibs.jsAndCssIncludes @ context="unsafe"}
</sly>

Solo CSS o JS

A menudo, uno quiere colocar las inclusiones CSS en el elemento HTML head , y JS incluye justo antes del cierre del body elemento.
En el head , para incluir solo el CSS y no el JS, utilice cssIncludes :
<sly data-sly-use.clientlibs="${'com.adobe.cq.wcm.core.components.models.ClientLibraries' @ categories='wknd.base'}">
    ${clientlibs.cssIncludes @ context="unsafe"}
</sly>

Antes del body cierre, para incluir solo el JS, y no el CSS, utilice jsIncludes :
<sly data-sly-use.clientlibs="${'com.adobe.cq.wcm.core.components.models.ClientLibraries' @ categories='wknd.base'}">
    ${clientlibs.jsIncludes @ context="unsafe"}
</sly>

Atributos

Para aplicar atributos a los link elementos CSS generados y/o a los elementos JS script , es posible utilizar una serie de parámetros:
<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>

Atributos CSS link que se pueden pasar a jsAndCssIncludes y cssIncludes :
  • media :: atributos de JS script de cadena que se pueden pasar a jsAndCssIncludes y jsIncludes :
  • async : boolean
  • defer : boolean
  • onload : cadena
  • crossorigin : cadena

Inclinación

En algunos casos, ya sea para la optimización o para correo electrónico o AMP, puede que sea necesario integrar el CSS o JS en la salida del HTML.
Para alinear la CSS, cssInline se puede utilizar, en cuyo caso se debe escribir el style elemento que la rodea:
<style type="text/css"
    data-sly-use.clientlibs="${'com.adobe.cq.wcm.core.components.models.ClientLibraries' @ categories='wknd.base'}">
    ${clientlibs.cssInline @ context="unsafe"}
</style>

Del mismo modo, para integrar el JS, jsInline se puede utilizar, en cuyo caso se debe escribir el script elemento circundante:
<script type="text/javascript"
    data-sly-use.clientlibs="${'com.adobe.cq.wcm.core.components.models.ClientLibraries' @ categories='wknd.base'}">
    ${clientlibs.jsInline @ context="unsafe"}
</script>