Verwenden von Kernkomponenten

Um mit Kernkomponenten in Ihrem eigenen Projekt produktiv zu werden, sind vier Schritte erforderlich, die in den folgenden Abschnitten einzeln detailliert sind:

  1. Herunterladen und installieren
  2. Proxy-Komponenten erstellen
  3. Laden der Kernstile
  4. Komponenten aktivieren
TIPP

Für umfassendere Anleitungen zu den ersten Schritten mit der Projekteinrichtung, den Core-Komponenten, bearbeitbaren Vorlagen, Client-Bibliotheken und der Komponentenentwicklung könnte das folgende mehrteilige Lernprogramm von Interesse sein:
Erste Schritte mit AEM Sites - WKND-Tutorial

Herunterladen und installieren

Einer der treibenden Ideen hinter den Kernkomponenten ist Flexibilität. Durch die häufigere Veröffentlichung neuer Versionen der Kernkomponenten kann Adobe bei der Bereitstellung neuer Funktionen flexibler sein. Entwickler wiederum können flexibel entscheiden, welche Komponenten sie in ihre Projekte integrieren und wie oft sie diese aktualisieren möchten. Dies führt zu einem separaten Veröffentlichungsprozess für AEM und die Kernkomponenten.

Die Installationsschritte werden daher bestimmt, ob Sie AEM als Cloud-Dienst oder lokal ausführen.

AEM as a Cloud Service

Es gibt keinen Schritt! AEM als Cloud Service wird automatisch mit der neuesten Version der Kernkomponenten geliefert. Genau wie AEMaaCS die neuesten Funktionen von AEM Angebot, hält AEMaaCS Sie automatisch auf dem neuesten Stand über die neuesten Versionen der Kernkomponenten.

Bei der Verwendung der Hauptkomponenten in AEMaaCS sind einige Punkte zu beachten:

  • Die Kernkomponenten sind in /libs enthalten.
  • Die Projekterstellungspipeline generiert Warnungen im Protokoll, wenn sie die Kernkomponenten erneut als Teil von /apps enthält, und ignoriert die als Teil Ihres Projekts eingebettete Version.
    • In einer kommenden Version wird der Pipeline-Build auch bei den Core-Komponenten fehlschlagen.
  • Wenn Ihr Projekt zuvor die Kernkomponenten in /apps, enthalten hat, müssen Sie Ihr Projekt möglicherweise anpassen.
  • Auch wenn sich die Kernkomponenten jetzt in /libs befinden, wird nicht empfohlen, Überlagerungen desselben Pfads in /apps zu erstellen. Stattdessen sollte das Muster der Proxykomponente verwendet werden, wenn ein Aspekt der Komponenten angepasst werden muss.

AEM 6.5 und älter

Die Core-Komponenten sind nicht Teil des Schnellstarts, wenn Sie im Produktionsmodus beginnen (ohne Beispielinhalt). Der erste Schritt besteht darin, das neueste veröffentlichte Inhaltspaket von GitHub herunterzuladen und es in Ihren AEM-Umgebungen zu installieren.

Es gibt verschiedene Möglichkeiten, dies zu automatisieren, aber die einfachste Möglichkeit, ein Inhaltspaket schnell auf einer Instanz zu installieren, erfolgt über den Package Manager; siehe Installieren von Paketen. Sobald Sie außerdem eine Veröffentlichungsinstanz ausgeführt haben, müssen Sie dieses Paket für den Herausgeber replizieren. Siehe Replizieren von Paketen.

Proxy-Komponenten erstellen

Aus den im Abschnitt Proxy-Komponentenmuster erläuterten Gründen dürfen Kernkomponenten nicht direkt über den Inhalt referenziert werden. Um dies zu vermeiden, gehören alle zu einer ausgeblendeten Komponentengruppe ( .core-wcm oder .core-wcm-form), was verhindert, dass sie direkt im Editor angezeigt werden.

Stattdessen müssen Site-spezifische Komponenten erstellt werden, die den gewünschten Komponentennamen und die gewünschte Gruppe definieren, die für Seitenautoren angezeigt werden sollen, und jede auf eine Kernkomponente als ihren übergeordneten Typ verweisen. Diese Site-spezifischen Komponenten werden manchmal als „Proxy-Komponenten“ bezeichnet, da sie nichts enthalten und hauptsächlich zur Definition der Version einer Komponente dienen, die für die Site verwendet werden soll. Beim Anpassen der Kernkomponenten spielen diese Proxy-Komponenten jedoch eine wesentliche Rolle für die Anpassung von Markup und Logik.

Für jede Kernkomponente, die für eine Site verwendet werden soll, müssen Sie also Folgendes tun:

  1. Erstellen Sie eine entsprechende Proxy-Komponente im Komponentenordner der Site.

    Beispiel
    Unter /apps/my-site/components Erstellen eines Titelknotens des Typs cq:Component

  2. Verweisen Sie auf die entsprechende Kernkomponentenversion mit dem übergeordneten Typ.

    Beispiel
    Fügen Sie folgende Eigenschaft hinzu:
    sling:resourceSuperType="core/wcm/components/title/v1/title"

  3. Definieren Sie die Gruppe, den Titel und optional die Beschreibung der Komponente. Diese Werte sind projektspezifisch und bestimmen, wie die Komponente Autoren offensteht.

    Beispiel
    Fügen Sie folgende Eigenschaften hinzu:

    componentGroup="My Site"
    jcr:title="Title"  
    jcr:description="Section Heading"
    

Betrachten Sie beispielsweise die Titelkomponente der WKND-Site. Dies ist ein gutes Beispiel für eine Proxy-Komponente, die auf diese Weise aufgebaut ist.

Laden der Kernstile

  1. Erstellen Sie eine Client-Bibliothek, die alle CSS- und JS-Dateien enthält, die für Ihre Site benötigt werden, falls noch nicht geschehen.

  2. Fügen Sie in der Client-Bibliothek Ihrer Site die Abhängigkeiten zu den Kernkomponenten hinzu, die möglicherweise benötigt werden. Dies geschieht durch Hinzufügen einer embed Eigenschaft.

    Um beispielsweise die Client-Bibliotheken aller v1 Kernkomponenten einzubeziehen, lautet die hinzuzufügende Eigenschaft:

    embed="[  
    core.wcm.components.image.v1,  
    core.wcm.components.list.v1,  
    core.wcm.components.breadcrumb.v1,  
    core.wcm.components.form.container.v1,  
    core.wcm.components.form.text.v1  
    ]"
    

Stellen Sie sicher, dass Ihre Proxy-Komponenten und Client-Bibliotheken in Ihrer AEM-Umgebung bereitgestellt wurden, bevor Sie zum nächsten Abschnitt übergehen.

Komponenten zulassen

Die folgenden Schritte werden im Vorlageneditor ausgeführt.

  1. Wählen Sie im Vorlageneditor den Layout-Container aus und öffnen Sie seine Richtlinie.
  2. Wählen Sie in der Liste der zulässigen Komponenten die zuvor erstellten Proxy-Komponenten aus, die unter der ihnen zugewiesenen Komponentengruppe angezeigt werden sollen. Übernehmen Sie anschließend die Änderungen.
  3. Optional können sie für Komponenten, die ein Dialogfeld „Design“ haben, vorkonfiguriert werden.

Das war´s! In den aus der bearbeiteten Vorlage erstellten Seiten sollten Sie jetzt die neu erstellten Komponenten verwenden können.

Lesen Sie als Nächstes:

Auf dieser Seite

Adobe Summit Banner

A virtual event April 27-28.

Expand your skills and get inspired.

Register for free
Adobe Summit Banner

A virtual event April 27-28.

Expand your skills and get inspired.

Register for free
Adobe Maker Awards Banner

Time to shine!

Apply now for the 2021 Adobe Experience Maker Awards.

Apply now
Adobe Maker Awards Banner

Time to shine!

Apply now for the 2021 Adobe Experience Maker Awards.

Apply now