Inclusione delle librerie client

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

Se non hai il tempo di indagare le migliori situazioni, 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 attendano che il DOM 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 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 librerie 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 gli inclusioni CSS nell'elemento HTML head e JS include poco prima della chiusura dell'elemento body .

In head, per includere solo il CSS e non il JS, utilizza 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 body , per includere solo JS e non il 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 CSS link e/o agli elementi JS script generati, 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 che possono essere passati a jsAndCssIncludes e jsIncludes:
  • async: booleano
  • defer: booleano
  • onload: stringa
  • crossorigin: stringa

Inclinazione

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

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

Questo viene fatto creando una risorsa consapevole del 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, consulta la documentazione tecnica relativa al componente Pagina .

In questa pagina