Inkluderar klientbibliotek

Det finns flera olika sätt att inkludera klientbibliotek beroende på ditt användningssätt. Det här dokumentet innehåller exempel och exempel HTML-kodfragment for each.

Rekommenderad standardanvändning

Om du inte har tid att undersöka vad som är bäst i din situation kan du inkludera dina klientbibliotek genom att placera följande HTML-rader på sidan 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>

Detta inkluderar både CSS och JS på sidan headmen lägger till defer attribut till din JS script inkluderar, så att webbläsarna väntar på att DOM ska vara klar innan skripten körs och därför optimerar sidans inläsningshastighet.

Grundläggande användning

Den grundläggande syntaxen som inkluderar både JS och CSS för en klientbibliotekskategori, som genererar alla motsvarande CSS link element och/eller JS script -element, enligt följande:

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

Om du vill göra samma sak för flera klientbibliotekskategorier samtidigt kan en array med strängar skickas till 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>

Endast CSS eller JS

Ofta vill man placera CSS-inkluderingarna i HTML head -elementet och JS-elementet innehåller precis före stängningen av body -element.

I head, som bara innehåller CSS, och inte JS, använder du cssIncludes:

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

Före body closing, to include only the JS, and not the CSS, use jsIncludes:

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

Attribut

Tillämpa attribut på den genererade CSS:en link element och/eller JS script -element kan du ange ett antal parametrar:

<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 attribut som kan skickas till jsAndCssIncludes och cssIncludes:

• media: sträng-JS script attribut som kan skickas till jsAndCssIncludes och jsIncludes:
• async: boolesk
• defer: boolesk
• onload: string
• crossorigin: string

Inledande

I vissa fall, antingen för optimering eller för e-post eller AMP, det kan krävas att CSS eller JS infogas i utdata från HTML.

Om du vill infoga CSS:en cssInline kan användas, och då måste du skriva den omgivande 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>

På samma sätt gäller att om du vill infoga JS, jsInline kan användas, och då måste du skriva den omgivande 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>

Läsa in sammanhangsberoende CSS och JavaScript

The Sidkomponent har även stöd för inläsning av utvecklardefinierade sammanhangsberoende CSS-, JavaScript- eller metataggar.

Detta görs genom att skapa en kontextmedveten resurs for com.adobe.cq.wcm.core.components.config.HtmlPageItemsConfig med följande struktur:

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

Mer information finns i den tekniska dokumentationen för sidkomponenten.

Resurser för Business.Adobe.com