Incluindo bibliotecas de clientes

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

Se não tiver tempo para investigar o que há de melhor em sua situação, inclua as bibliotecas de clientes colocando as seguintes linhas HTL dentro do elemento head da página:

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

Isso incluirá o CSS e o JS na página head, mas a adição do atributo defer ao JS script inclui, para que os navegadores aguardem o DOM estar pronto antes de executar seus scripts e, portanto, otimizar a velocidade de carregamento da página.

Uso básico

A sintaxe básica para incluir JS e CSS de uma categoria de biblioteca do cliente, que gerará todos os elementos CSS link e/ou elementos JS script 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 bibliotecas de clientes ao mesmo tempo, uma matriz de cadeias de caracteres pode ser passada para o parâmetro categories:

<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 as inclusões de CSS no elemento HTML head e o JS inclui antes do fechamento do elemento body.

Em head, para incluir somente 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 elementos CSS link gerados e/ou aos elementos JS script, vários parâmetros são possíveis:

<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 passados para jsAndCssIncludes e cssIncludes:

  • media: Os script atributos JS de string que podem ser passados para jsAndCssIncludes e jsIncludes:
  • async: boolean
  • defer: booleano
  • onload: sequência de caracteres
  • crossorigin: sequência de caracteres

Inline

Em alguns casos, para otimização ou para email ou AMP, pode ser necessário embutir o CSS ou o JS na saída do HTML.

Para embutir o CSS, cssInline pode ser usado, nesse caso, você deve gravar o elemento style ao redor:

<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, nesse caso, você deve gravar o elemento script ao redor:

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

Carregamento de CSS e JavaScript com reconhecimento de contexto

O Componente de página também oferece suporte ao carregamento de CSS, JavaScript ou metatags com reconhecimento de contexto definido pelo desenvolvedor.

Isso é feito criando um recurso sensível ao contexto para com.adobe.cq.wcm.core.components.config.HtmlPageItemsConfig usando a seguinte estrutura:

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

Consulte a documentação técnica do Componente de página para obter mais informações.

Nesta página