Clientbibliotheken en de kerncomponenten client-libraries

De componenten van de Kern komen met een aantal cliëntbibliotheken en bieden de capaciteit aan om uw te omvatten.

Aangeleverde clientbibliotheken provided

De componenten van de Kern verstrekken de volgende cliëntbibliotheken uit-van-de-doos.

Inclusief clientbibliotheken including

Er zijn een aantal verschillende manieren om cliëntbibliothekenafhankelijk van uw gebruiksgeval te omvatten. Het volgende is voorbeelden met steekproef HTML fragmentenvoor elk.

Aanbevolen standaardgebruik recommended-default-usage

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 head element te plaatsen:

<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 op de pagina head , maar het toevoegen van het defer -kenmerk aan uw JS script -include-bestanden, zodat de browsers wachten totdat de DOM gereed is voordat ze de scripts uitvoeren. Hierdoor wordt de laadsnelheid van de pagina geoptimaliseerd.

Standaardgebruik basic-usage

De basissyntaxis voor het opnemen van zowel JS als CSS van een categorie in de clientbibliotheek, die alle bijbehorende CSS link -elementen en/of JS script -elementen genereert, ziet er als volgt uit:

<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 parameter categories :

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

Alleen CSS of JS css-js-only

Vaak wilt u de CSS-include-bestanden in het element HTML head plaatsen en de JS-code wordt net vóór het sluiten van het element body opgenomen.

Als u in head alleen de CSS en niet de JS wilt opnemen, gebruikt u cssIncludes :

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

Gebruik jsIncludes vóór het sluiten van body om alleen de JS en niet de CSS op te nemen:

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

Attributen attributes

Om kenmerken toe te passen op de gegenereerde CSS link -elementen en/of JS script -elementen, is 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 :

Invoering inlining

In sommige gevallen, of voor optimalisering, of voor e-mail of AMP,zou het kunnen worden vereist om CSS of JS in de output van HTML te inline.

Als u de CSS wilt inline, kunt u cssInline gebruiken. In dat geval moet u het omringende style -element schrijven:

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

Op dezelfde manier kunt u jsInline gebruiken om de JS in te line te plaatsen. In dat geval moet u het omringende script -element schrijven:

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

CSS en JavaScript met behoud van context laden context-aware-loading

De Component van de Paginasteunt ook ladend ontwikkelaar-bepaalde context-bewuste CSS, JavaScript, of meta markeringen.

Dit wordt gedaan door a context-bewuste middelvoor com.adobe.cq.wcm.core.components.config.HtmlPageItemsConfig het gebruiken van de volgende structuur te creëren:

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.