Librerie client e Componenti core client-libraries
I Componenti core sono dotati di diverse librerie client e consentono di includerne di personalizzate.
Librerie client fornite provided
I Componenti core forniscono le seguenti librerie client pronte all’uso.
- Il sito clientlibs fornisce il comportamento funzionale minimalista dei componenti da applicare al sito.
- Fungono da punto di partenza per accelerare i progetti, con implementazioni favorite all’estensione e alla personalizzazione per ottenere l’aspetto e la funzionalità desiderati.
- Le clientlibs dell’editor vengono applicate alla finestra di dialogo di authoring per garantirne la funzionalità e l’aspetto previsti.
- Le clientlibs dell’editor hook vengono applicate al sito quando vengono caricate in modalità di modifica.
- Contengono un codice JavaScript eseguito su eventi attivati dall’editor, facilitando l’inizializzazione della funzionalità dinamica.
- Alcuni componenti possono avere clientlibs aggiuntive specifiche progettate per l’utilizzo in situazioni particolari, ad esempio quando vengono utilizzati insieme a Dynamic Media.
Inclusione delle librerie client including
Esistono diversi modi per includere le librerie client a seconda del caso d’uso. Di seguito sono riportati alcuni esempi di Snippet HTL per ciascuna.
Utilizzo predefinito consigliato recommended-default-usage
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 basic-usage
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 css-js-only
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 attributes
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 Attributiscript
JS che possono essere forniti ajsAndCssIncludes
ejsIncludes
:async
: booleanodefer
: booleanoonload
: stringacrossorigin
: stringa
Allineamento inlining
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 context-aware-loading
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.