Show Menu
ARGOMENTI×

Incluse le librerie client

Esistono diversi modi per includere le librerie Panoramica di ClientLibs client, a seconda del caso di utilizzo. Questo documento fornisce esempi e snippet HTL di esempio per ciascuno di essi.

Utilizzo di base

La sintassi di base per includere sia JS che CSS di una categoria di libreria client, che genererà tutti link gli elementi CSS 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 al categories parametro un array di stringhe:
<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 i CSS inclusi nell' head elemento HTML, e il JS include appena prima della chiusura dell' body elemento.
Per head includere solo il CSS e non il JS, utilizzate cssIncludes :
<sly data-sly-use.clientlibs="${'com.adobe.cq.wcm.core.components.models.ClientLibraries' @ categories='wknd.base'}">
    ${clientlibs.cssIncludes @ context="unsafe"}
</sly>

Prima della body chiusura, 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 link elementi CSS e/o agli script elementi JS 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 : gli attributi JS script stringa che possono essere passati a jsAndCssIncludes e jsIncludes :
  • async : booleano
  • defer : booleano
  • onload : stringa
  • crossorigin : stringa

Indesign

In alcuni casi, per l’ottimizzazione o per e-mail o AMP, potrebbe essere necessario allineare CSS o JS nell’output dell’HTML.
Per agganciare il CSS, cssInline potete utilizzarlo, nel qual caso dovete scrivere l' style elemento 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, jsInline può essere utilizzato, nel qual caso è necessario scrivere l' script elemento 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>