Show Menu
TÓPICOS×

Incluindo bibliotecas de clientes

Existem várias maneiras diferentes de incluir bibliotecas de clientes, dependendo do caso de uso. Este documento fornece exemplos e trechos overview.html HTL de amostra para cada um.

Uso básico

A sintaxe básica para incluir JS e CSS de uma categoria da biblioteca do cliente, que gerará todos os link elementos CSS e/ou script elementos JS correspondentes, é a seguinte:
<sly data-sly-use.clientlibs="${'com.adobe.cq.wcm.core.components.models.ClientLibraries' @ categories='wknd.base'}">
    ${clientlibs.jsAndCssIncludes @ context="unsafe"}
</sly>

Para fazer o mesmo para várias categorias de biblioteca de cliente ao mesmo tempo, uma matriz de sequências de caracteres pode ser passada para o 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>

Somente CSS ou JS

Frequentemente, é necessário colocar o CSS incluído no head elemento HTML, e o JS inclui pouco antes do fechamento do body elemento.
No head , para incluir apenas o CSS, e não o JS, use cssIncludes :
<sly data-sly-use.clientlibs="${'com.adobe.cq.wcm.core.components.models.ClientLibraries' @ categories='wknd.base'}">
    ${clientlibs.cssIncludes @ context="unsafe"}
</sly>

Antes de body fechar, para incluir somente o JS, e não o CSS, use 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 aos link elementos CSS e/ou script elementos JS gerados, é possível usar vários 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 podem ser transmitidos para jsAndCssIncludes e cssIncludes :
  • media : atributos JS de string script que podem ser passados para jsAndCssIncludes e jsIncludes :
  • async : boolean
  • defer : boolean
  • onload : sequência de caracteres
  • crossorigin : sequência de caracteres

Inclinar

Em alguns casos, seja para otimização, seja para email ou AMP, pode ser necessário inline o CSS ou JS na saída do HTML.
Para embutir o CSS, cssInline é possível usá-lo, caso em que você deve gravar o style elemento adjacente:
<style type="text/css"
    data-sly-use.clientlibs="${'com.adobe.cq.wcm.core.components.models.ClientLibraries' @ categories='wknd.base'}">
    ${clientlibs.cssInline @ context="unsafe"}
</style>

Da mesma forma, para embutir o JS, jsInline pode ser usado, e nesse caso você deve gravar o script elemento adjacente:
<script type="text/javascript"
    data-sly-use.clientlibs="${'com.adobe.cq.wcm.core.components.models.ClientLibraries' @ categories='wknd.base'}">
    ${clientlibs.jsInline @ context="unsafe"}
</script>