Show Menu
THEMEN×

Einschließen von Client-Bibliotheken

Je nach Nutzungsszenario gibt es verschiedene Möglichkeiten, Client-Bibliotheken einzuschließen. Dieses Dokument enthält besipielhafte HTML-Snippets für alle diese Möglichkeiten.

Einfache Verwendung

Die grundlegende Syntax, die sowohl JS als auch CSS einer Client-Bibliothek-Kategorie enthält und die alle zugehörigen CSS- link -Elemente und/oder JS- script -Elemente generiert, lautet wie folgt:
<sly data-sly-use.clientlibs="${'com.adobe.cq.wcm.core.components.models.ClientLibraries' @ categories='wknd.base'}">
    ${clientlibs.jsAndCssIncludes @ context="unsafe"}
</sly>

Um dies für mehrere Client-Bibliothek-Kategorien gleichzeitig zu tun, kann ein Zeichenfolgen-Array an den Parameter categories übergeben werden:
<sly data-sly-use.clientlibs="${'com.adobe.cq.wcm.core.components.models.ClientLibraries' @
    categories=['wknd.base', 'cq.foundation']}">
    ${clientlibs.jsAndCssIncludes @ context="unsafe"}
</sly>

Nur CSS oder JS

Häufig sollen die CSS-Einfügungen im HTML-Element head platziert werden und die JS-Einfügungen direkt vor dem Ende des Elements body .
Um im Element head nur das CSS und nicht das JS einzuschließen, verwenden Sie cssIncludes :
<sly data-sly-use.clientlibs="${'com.adobe.cq.wcm.core.components.models.ClientLibraries' @ categories='wknd.base'}">
    ${clientlibs.cssIncludes @ context="unsafe"}
</sly>

Vor dem Ende des Elements body , um nur das JS und nicht das CSS einzuschließen, verwenden Sie jsIncludes :
<sly data-sly-use.clientlibs="${'com.adobe.cq.wcm.core.components.models.ClientLibraries' @ categories='wknd.base'}">
    ${clientlibs.jsIncludes @ context="unsafe"}
</sly>

Attribute

Um Attribute auf die generierten CSS- link -Elemente und/oder JS- script -Elemente anzuwenden, ist eine Reihe von Parametern möglich:
<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 -Attribute, die an jsAndCssIncludes und cssIncludes weitergegeben werden können:
  • media : Zeichenfolgen-JS- script -Attribute, die an jsAndCssIncludes und jsIncludes weitergegeben werden können:
  • async : Boolesch
  • defer : Boolesch
  • onload : Zeichenfolge
  • crossorigin : Zeichenfolge

Inline

In einigen Fällen – zur Optimierung oder für E-Mail oder für AMP  – ist es möglicherweise erforderlich, das CSS oder JS inline in der HTML-Ausgabe zu referenzieren.
Um das CSS inline zu referenzieren, kann cssInline verwendet werden. In diesem Fall müssen Sie dieses umliegende style -Element schreiben:
<style type="text/css"
    data-sly-use.clientlibs="${'com.adobe.cq.wcm.core.components.models.ClientLibraries' @ categories='wknd.base'}">
    ${clientlibs.cssInline @ context="unsafe"}
</style>

In ähnlicher Weise kann jsInline verwendet werden, um JS inline zu referenzieren. In diesem Fall müssen Sie dieses umliegende script -Element schreiben:
<script type="text/javascript"
    data-sly-use.clientlibs="${'com.adobe.cq.wcm.core.components.models.ClientLibraries' @ categories='wknd.base'}">
    ${clientlibs.jsInline @ context="unsafe"}
</script>