Einschließen von Client-Bibliotheken

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

Wenn Sie keine Zeit haben, die beste Lösung für Ihre Situation zu ermitteln, schließen Sie Ihre Client-Bibliotheken mit ein, indem Sie die folgenden HTL-Zeilen in Ihr Seitenelement head einfügen:

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

Dies umfasst sowohl das CSS als auch das JS in Ihrem Seitenelement head, fügt jedoch das Attribut defer zu Ihren JS-script-Einfügungen hinzu, sodass Browser warten, bis das DOM bereit ist, bevor sie Ihre Skripten ausführen, und somit die Seitenladegeschwindigkeit optimieren.

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>

Laden von kontextsensitivem CSS und JavaScript

Die Seitenkomponente unterstützt auch das Laden von kontextsensitivem CSS, JavaScript oder von Meta-Tags, die vom Entwickler definiert wurden.

Dies geschieht durch Erstellen einer kontextsensitiven Ressource für com.adobe.cq.wcm.core.components.config.HtmlPageItemsConfig unter Verwendung der folgenden 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
        ...
    ...

Weitere Informationen finden Sie in der technischen Dokumentation zur Seitenkomponente.

Auf dieser Seite