Inclusione delle librerie client

Esistono diversi modi per includere le librerie client a seconda del caso d’uso. Questo documento fornisce esempi e snippet HTL per ciascuno di essi.

Utilizzo predefinito consigliato

Se non hai tempo di capire qual è la cosa migliore nella tua situazione, includi le librerie client inserendo le seguenti righe HTL nell’elemento head della pagina:

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

In questo modo, includerai sia CSS che JS nell’elemento head della pagina, ma aggiungendo anche l’attributo defer agli script JS inclusi, farai in modo che i browser attendano che il DOM (Document Object Model) sia pronto prima di eseguire gli script, ottimizzando quindi la velocità di caricamento della pagina.

Utilizzo di base

La sintassi di base per includere sia JS che CSS di una categoria di librerie client, che genererà tutti gli elementi link CSS e/o script JS corrispondenti, è la seguente:

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

Per fare lo stesso con più categorie di librerie client contemporaneamente, è possibile fornire un array di stringhe al parametro categories:

<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

Spesso occorre inserire le inclusioni CSS nell’elemento head HTML e le inclusioni JS subito prima della chiusura dell’elemento body.

Per includere nell’elemento head solo CSS e non JS, utilizza cssIncludes:

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

Per includere nell’elemento body solo JS e non CSS, utilizza jsIncludes:

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

Attributi

Per applicare gli attributi agli elementi link CSS e/o agli elementi script JS generati, è possibile utilizzare diversi parametri:

<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>

Attributi link CSS che possono essere forniti a jsAndCssIncludes e cssIncludes:

• media: stringa Attributi script JS che possono essere forniti a jsAndCssIncludes e jsIncludes:
• async: booleano
• defer: booleano
• onload: stringa
• crossorigin: stringa

Allineamento

In alcuni casi, per l’ottimizzazione, le e-mail o le AMP, potrebbe essere necessario allineare CSS o JS nell’output HTML.

Per allineare CSS, si può utilizzare cssInline, nel qual caso è necessario scrivere l’elemento style circostante:

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

Allo stesso modo, per allineare JS, si può utilizzare jsInline, nel qual caso è necessario scrivere l’elemento script circostante:

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

Caricamento di CSS e JavaScript in base al contesto

Il componente Pagina supporta anche il caricamento di tag CSS, JavaScript o meta in base al contesto definiti dagli sviluppatori.

Ciò avviene attraverso la creazione di una risorsa in base contesto per com.adobe.cq.wcm.core.components.config.HtmlPageItemsConfig, utilizzando la seguente struttura:

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
        ...
    ...

Per ulteriori informazioni, vedila documentazione tecnica relativa al componente Pagina.

Risorse Business.Adobe.com