Er zijn een aantal verschillende manieren om op te nemen clientbibliotheken afhankelijk van uw gebruiksgeval. Dit document bevat voorbeelden en voorbeelden HTML-fragmenten voor elk.
Als u geen tijd hebt om te onderzoeken wat in uw situatie het beste is, dan omvat uw cliëntbibliotheken door de volgende lijnen van HTML binnen uw pagina te plaatsen head
element:
<sly data-sly-use.clientlibs="${'com.adobe.cq.wcm.core.components.models.ClientLibraries' @
categories='wknd.base', defer=true}">
${clientlibs.jsAndCssIncludes @ context="unsafe"}
</sly>
Dit omvat zowel de CSS als de JS in uw pagina head
, maar het toevoegen van defer
attribuut aan uw JS script
bevat, zodat de browsers wachten totdat de DOM gereed is voordat ze de scripts uitvoeren. Hierdoor wordt de laadsnelheid van de pagina geoptimaliseerd.
De basissyntaxis om zowel JS als CSS van een categorie van de cliëntbibliotheek te omvatten, die al overeenkomstige CSS zal produceren link
elementen en/of JS script
de elementen zijn als volgt:
<sly data-sly-use.clientlibs="${'com.adobe.cq.wcm.core.components.models.ClientLibraries' @ categories='wknd.base'}">
${clientlibs.jsAndCssIncludes @ context="unsafe"}
</sly>
Als u hetzelfde wilt doen voor meerdere clientbibliotheekcategorieën tegelijk, kan een array met tekenreeksen worden doorgegeven aan de categories
parameter:
<sly data-sly-use.clientlibs="${'com.adobe.cq.wcm.core.components.models.ClientLibraries' @
categories=['wknd.base', 'cq.foundation']}">
${clientlibs.jsAndCssIncludes @ context="unsafe"}
</sly>
Vaak wilt u de CSS-include-bestanden in de HTML plaatsen head
en het JS omvat net vóór de sluiting van het body
element.
In de head
gebruikt u cssIncludes
:
<sly data-sly-use.clientlibs="${'com.adobe.cq.wcm.core.components.models.ClientLibraries' @ categories='wknd.base'}">
${clientlibs.cssIncludes @ context="unsafe"}
</sly>
Voor de body
sluiten, alleen de JS en niet de CSS opnemen, gebruik jsIncludes
:
<sly data-sly-use.clientlibs="${'com.adobe.cq.wcm.core.components.models.ClientLibraries' @ categories='wknd.base'}">
${clientlibs.jsIncludes @ context="unsafe"}
</sly>
Kenmerken toepassen op de gegenereerde CSS link
elementen en/of JS script
elementen zijn een aantal parameters mogelijk:
<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>
CSS link
kenmerken die kunnen worden doorgegeven aan jsAndCssIncludes
en cssIncludes
:
media
: string JS script
kenmerken die kunnen worden doorgegeven aan jsAndCssIncludes
en jsIncludes
:async
: booleandefer
: booleanonload
: stringcrossorigin
: stringIn sommige gevallen, voor optimalisatie of voor e-mail of AMP mogelijk moet u de CSS of JS inline zetten in de uitvoer van de HTML.
De CSS inline plaatsen, cssInline
kan worden gebruikt, in welk geval u de omringende style
element:
<style type="text/css"
data-sly-use.clientlibs="${'com.adobe.cq.wcm.core.components.models.ClientLibraries' @ categories='wknd.base'}">
${clientlibs.cssInline @ context="unsafe"}
</style>
Evenzo, om het JS te inline te zetten, jsInline
kan worden gebruikt, in welk geval u de omringende script
element:
<script type="text/javascript"
data-sly-use.clientlibs="${'com.adobe.cq.wcm.core.components.models.ClientLibraries' @ categories='wknd.base'}">
${clientlibs.jsInline @ context="unsafe"}
</script>
De Pagina-component Het laden van door ontwikkelaars gedefinieerde contextgevoelige CSS-, JavaScript- of metatags wordt ook ondersteund.
Dit doet u door een contextbewuste resource for com.adobe.cq.wcm.core.components.config.HtmlPageItemsConfig
met behulp van de volgende structuur:
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
...
...
Zie de technische documentatie voor de Component van de Pagina voor meer informatie.