Incluse le librerie client

Esistono diversi modi per includere librerie client a seconda del caso d'uso. In questo documento sono riportati esempi e frammenti HTL di esempio per ciascuno di essi.

Se non hai il tempo di esaminare le soluzioni migliori per la tua situazione, includi le librerie client inserendo le seguenti righe HTL all'interno dell'elemento della pagina head:

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

Questo includerà sia il CSS che il JS nella pagina head, ma l'aggiunta dell'attributo defer al JS script include, in modo che i browser attendono che il DOM sia pronto prima di eseguire gli script, ottimizzando quindi la velocità di caricamento della pagina.

Uso di base

La sintassi di base per includere sia JS che CSS di una categoria di libreria client, che genererà tutti gli elementi CSS link e/o JS script 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 per più categorie di libreria client contemporaneamente, è possibile trasmettere 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, si desidera inserire il CSS include nell'elemento HTML head, e il JS include appena prima della chiusura dell'elemento body.

In head, per includere solo il CSS e non il JS, utilizzare cssIncludes:

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

Prima della chiusura di body, per includere solo il file JS e non il file CSS, utilizzate 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 CSS link generati e/o agli elementi JS script, sono possibili 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 CSS link che possono essere passati a jsAndCssIncludes e cssIncludes:

  • media: stringa script attributi JS a cui è possibile passare jsAndCssIncludes e jsIncludes:
  • async: booleano
  • defer: booleano
  • onload: stringa
  • crossorigin: stringa

Inclinazione

In alcuni casi, per l'ottimizzazione o per le e-mail o per AMP, potrebbe essere necessario inline il CSS o JS nell'output dell'HTML.

Per allineare il CSS, è possibile 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 agganciare il JS, è possibile 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 definiti dagli sviluppatori in base al contesto.

A questo scopo, è necessario creare una risorsa sensibile al 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, consultare la documentazione tecnica relativa al componente Pagina.

In questa pagina