Seiten und Vorlagen pages-and-template

Checken Sie die Verzweigung tutorial/pages-templates-start aus GitHub aus.

$ cd ~/code/aem-guides-wknd
$ git checkout tutorial/pages-templates-start

Stellen Sie die Code-Basis mithilfe Ihrer Maven-Kenntnisse in einer lokalen AEM-Instanz bereit:

$ mvn clean install -PautoInstallSinglePackage

$ mvn clean install -PautoInstallSinglePackage -Pclassic

Erstellen Sie eine Vorlage mit dem Seitenvorlagentyp namens Artikelseite.

Wechseln Sie in den Struktur-Modus.

Fügen Sie eine Experience Fragment-Komponente hinzu, die als Header oben in der Vorlage agiert.

• Konfigurieren Sie die Komponente, die auf /content/experience-fragments/wknd/us/en/site/header/master verweisen soll.
• Legen Sie die Richtlinie auf Seitenkopf fest und stellen sicher, dass Standardelement auf header gesetzt ist. Das header-Element wird im nächsten Kapitel mit CSS angesprochen.

Fügen Sie eine Experience Fragment-Komponente hinzu, die als Fußzeile unten in der Vorlage agiert.

• Konfigurieren Sie die Komponente, die auf /content/experience-fragments/wknd/us/en/site/footer/master verweisen soll.
• Legen Sie die Richtlinie auf Seitenfußzeile fest und stellen Sie sicher, dass das Standardelement auf footer gesetzt ist. Das footer-Element wird im nächsten Kapitel mit CSS angesprochen.

Sperren Sie den Haupt-Container, der bei der anfänglichen Erstellung der Vorlage enthalten war.

• Legen Sie die Richtlinie auf Seitenhauptteil fest und stellen sicher, dass das Standardelement auf main gesetzt ist. Das main-Element wird im nächsten Kapitel mit CSS angesprochen.

Fügen Sie eine Bildkomponente zum Haupt-Container hinzu.

• Entsperren Sie die Bildkomponente.

Fügen Sie eine Breadcrumb-Komponente unter der Bildkomponente im Haupt-Container hinzu.

• Erstellen Sie eine Richtlinie für die Breadcrumb-Komponente namens Artikelseite – Breadcrumb. Setzen Sie die Navigationsstartstufe auf 4.

Fügen Sie eine Container-Komponente unter der Breadcrumb-Komponente und innerhalb des Haupt-Containers hinzu. Dies dient als Inhalts-Container für die Vorlage.

• Entsperren Sie den Inhalts-Container.
• Legen Sie die Richtlinie auf Seiteninhalt fest.

Fügen Sie eine weitere Container-Komponente unter dem Inhalts-Container hinzu. Dies dient als Seitenleisten-Container für die Vorlage.

• Entsperren Sie den Seitenleisten-Container.
• Erstellen Sie eine Richtlinie mit dem Namen Artikelseite – Seitenleiste.
• Konfigurieren Sie die zugelassenen Komponenten unter WKND Sites-Projekt – Inhalt, um Folgendes einzuschließen: Schaltfläche, Download, Bild, Liste, Trennzeichen, Freigabe in Social Media, Text und Titel.

Aktualisieren Sie die Richtlinie des Seitenstamm-Containers. Dies ist der äußerste Container der Vorlage. Legen Sie die Richtlinie auf Seitenstamm fest.

• Setzen Sie unter Container-Einstellungen das Layout auf Responsives Raster.

Schalten Sie den Layout-Modus für den Inhalts-Container ein. Ziehen Sie den Ziehgriff von rechts nach links und verkleinern Sie den Container auf eine Breite von acht Spalten.

Schalten Sie den Layout-Modus für den Seitenleisten-Container ein. Ziehen Sie den Ziehgriff von rechts nach links und verkleinern Sie den Container auf eine Breite von vier Spalten. Ziehen Sie dann den linken Ziehgriff um eine Spalte von links nach rechts, damit der Container 3 Spalten breit wird und eine Lücke von 1 Spalte zum Inhalts-Container lässt.

Öffnen Sie den Mobile-Emulator und wechseln Sie zu einem Mobile-Breakpoint. Schalten Sie erneut den Layout-Modus ein und ziehen Sie den Inhalts-Container und den Seitenleisten-Container auf die gesamte Seitenbreite auf. Dadurch werden die Container vertikal im Mobile-Breakpoint gestapelt.

Aktualisieren Sie die Richtlinie der Textkomponente auf Inhalts-Container.

• Legen Sie die Richtlinie auf Inhaltstext fest.
• Aktivieren Sie unter Plug-ins > Absatzformate das Kontrollkästchen Absatzformate aktivieren und stellen Sie sicher, dass die Option Zitatblock aktiviert ist.

Wechseln Sie in den Modus Anfänglicher Inhalt.

Fügen Sie eine Titelkomponente zum Inhalts-Container hinzu. Dies dient als Artikeltitel. Ohne Angabe wird automatisch der Titel der aktuellen Seite angezeigt.

Fügen Sie eine zweite Titelkomponente unter der ersten Titelkomponente hinzu.

• Konfigurieren Sie die Komponente mit dem Text „By Author“. Dies ist ein Textplatzhalter.
• Legen Sie H4 als Typ fest.

Fügen Sie eine Textkomponente unter der Titelkomponente By Author hinzu.

Fügen Sie eine Titelkomponente zum Seitenleisten-Container hinzu.

• Konfigurieren Sie die Komponente mit dem Text „Share this Story“.
• Legen Sie H5 als Typ fest.

Fügen Sie eine Social Media Sharing-Komponente unter der Titelkomponente Share this Story hinzu.

Fügen Sie eine Trennzeichen-Komponente unter der Social Media Sharing-Komponente hinzu.

Fügen Sie eine Download-Komponente unter der Trennzeichen-Komponente hinzu.

Fügen Sie eine Listenkomponente unter der Download-Komponente hinzu.

Aktualisieren Sie die anfänglichen Seiteneigenschaften für die Vorlage.

• Aktivieren Sie unter Social Media > Social Media Sharing die Kontrollkästchen Facebook und Pinterest.

Zeigen Sie die Vorlage in der Vorlagenkonsole an, indem Sie zu http://localhost:4502/libs/wcm/core/content/sites/templates.html/conf/wknd navigieren.

Aktivieren Sie die Artikelseitenvorlage.

Bearbeiten Sie die Eigenschaften der Artikelseitenvorlage und laden Sie die folgende Miniaturansicht hoch, um die mit der Artikelseitenvorlage erstellten Seiten schnell zu identifizieren:

Laden Sie das Paket WKND-PagesTemplates-Content-Assets.zip herunter, das Beispielinhalte enthält.

Laden Sie mithilfe von Package Manager das Inhaltspaket hoch und installieren Sie es unter http://localhost:4502/crx/packmgr/index.jsp.

Aktualisieren Sie die Vorlage „Web-Variante“, also die Vorlage für Experience Fragments, unter http://localhost:4502/editor.html/conf/wknd/settings/wcm/templates/xf-web-variation/structure.html.

• Aktualisieren Sie die Richtlinie der Container-Komponente in der Vorlage.
• Legen Sie für die Richtlinie die Option XF-Stamm fest.
• Wählen Sie unter Zugelassene Komponenten die Komponentengruppe WKND Sites-Projekt – Struktur aus, um die Komponenten Sprachnavigation, Navigation und Schnellsuche einzuschließen.

Öffnen Sie das Experience Fragment, das die Kopfzeile rendert, unter http://localhost:4502/editor.html/content/experience-fragments/wknd/us/en/site/header/master.html.

Konfigurieren Sie den Stamm-Container des Fragments. Dies ist der Container, der sich ganz außen befindet.

• Legen Sie für das Layout die Option Responsives Raster fest.

Fügen Sie das dunkle WKND-Logo als Bild oben im Container hinzu. Das Logo war im Paket enthalten, das in einem vorherigen Schritt installiert wurde.

• Ändern Sie das Layout des dunklen WKND-Logos so, dass es zwei Spalten breit ist. Ziehen Sie die Griffe von rechts nach links.
• Konfigurieren Sie das Logo so, dass „WKND Logo“ als Alternativtext verwendet wird.
• Konfigurieren Sie das Logo so, dass es auf der Startseite mit /content/wknd/us/en verknüpft ist.

Konfigurieren Sie die Navigationskomponente, die bereits auf der Seite platziert ist.

• Legen Sie Ausschließen von Stammebenen auf 1 fest.
• Legen Sie die Navigationsstrukturtiefe auf 1 fest.
• Passen Sie das Layout der Navigationskomponente so an, dass sie acht Spalten breit ist. Ziehen Sie die Griffe von rechts nach links.

Entfernen Sie die Sprachnavigationskomponente.

Passen Sie das Layout der Suchkomponente so an, dass sie zwei Spalten breit ist. Ziehen Sie die Griffe von rechts nach links. Alle Komponenten sollten jetzt horizontal auf einer einzelnen Zeile ausgerichtet sein.

Öffnen Sie das Experience Fragment, das die Fußzeile unter http://localhost:4502/editor.html/content/experience-fragments/wknd/us/en/site/footer/master.html rendert.

Konfigurieren Sie den Stamm-Container des Fragments. Dies ist der Container, der sich ganz außen befindet.

• Legen Sie das Layout auf Responsives Raster fest

Fügen Sie das WKND-Light-Logo als Bild oben zum Container hinzu. Das Logo war im Paket enthalten, das in einem vorherigen Schritt installiert wurde.

• Passen Sie das Layout des WKND-Light-Logos so an, dass es zwei Spalten breit ist. Ziehen Sie die Griffe von rechts nach links.
• Konfigurieren Sie das Logo mit Alternativtext von „WKND Logo Light“.
• Konfigurieren Sie das Logo so, dass es /content/wknd/us/en auf die Startseite verlinkt.

Fügen Sie eine Navigationskomponente unter dem Logo hinzu. Konfigurieren Sie die Navigationskomponente:

• Legen Sie Ausschließen von Stammebenen auf 1 fest.
• Deaktivieren Sie Alle untergeordneten Seiten erfassen.
• Legen Sie die Navigationsstrukturtiefe auf 1 fest.
• Passen Sie das Layout der Navigationskomponente so an, dass sie acht Spalten breit ist. Ziehen Sie die Griffe von rechts nach links.

Navigieren Sie zur Sites-Konsole unter http://localhost:4502/sites.html/content/wknd/us/en/magazine.

Erstellen Sie eine Seite unter WKND > US > EN > Magazine.

• Wählen Sie die Artikelseite-Vorlage.
• Setzen Sie den Titel unter Eigenschaften auf „Ultimate Guide to LA Skateparks“ fest
• Definieren Sie den Namen als „guide-la-skateparks“

Ersetzen Sie den Titel By Author durch den Text „By Stacey Roswells“.

Aktualisieren Sie die Textkomponente, um zum Ausfüllen des Artikels einen Absatz einzuschließen. Sie können die folgende Textdatei als Kopie verwenden: la-skate-parks-copy.txt.

Fügen Sie eine weitere Textkomponente hinzu.

• Aktualisieren Sie die Komponente, um folgendes Zitat einzuschließen: „There is no better place to shred than Los Angeles.“
• Bearbeiten Sie den Rich-Texteditor im Vollbildmodus und ändern Sie das obige Zitat, um das Zitatblock-Element zu verwenden.

Füllen Sie den Hauptteil des Artikels weiter aus, um die Modelle aufeinander abzustimmen.

Konfigurieren Sie die Download-Komponente so, dass sie eine PDF-Version des Artikels verwendet.

• Kreuzen Sie unter Download > Eigenschaften das Kontrollkästchen Titel aus dem DAM-Asset abrufen an.
• Definieren Sie die Beschreibung als: „Get the Full Story.“
• Legen Sie den Aktionstext als „Download PDF“ fest.

Konfigurieren Sie die Listenkomponente.

• Wählen Sie unter Listeneinstellungen > Erstellen einer Liste mittels: Untergeordnete Seiten.
• Legen Sie die übergeordnete Seite auf /content/wknd/us/en/magazine fest.
• Markieren Sie Elemente verknüpfen und Datum anzeigen unter Einstellungen für Elemente.

Öffnen Sie CRXDE-Lite und navigieren Sie mithilfe der Navigationsstruktur zu /content/wknd/us/en/magazine/guide-la-skateparks.

Klicken Sie auf den Knoten jcr:content unter la-skateparks und zeigen Sie die Eigenschaften an:

Beachten Sie den Wert für cq:template, der auf /conf/wknd/settings/wcm/templates/article-page, die zuvor erstellte Artikelseitenvorlage, verweist.

Beachten Sie außerdem den Wert für sling:resourceType, der auf wknd/components/page verweist. Dies ist die Seitenkomponente, die vom AEM-Projektarchetyp erstellt wurde und für das Rendern der Seite basierend auf der Vorlage verantwortlich ist.

Erweitern Sie den Knoten jcr:content unter /content/wknd/us/en/magazine/guide-la-skateparks/jcr:content und zeigen Sie die Knotenhierarchie an:

Sie sollten in der Lage sein, jedem Knoten erstellte Komponenten lose zuzuordnen. Finden Sie heraus, ob Sie die verschiedenen Layout-Container identifizieren können, indem Sie die Knoten mit dem Präfix container überprüfen.

Überprüfen Sie als Nächstes die Seitenkomponente unter /apps/wknd/components/page. So zeigen Sie die Komponenteneigenschaften in CRXDE Lite an:

Es gibt nur zwei HTL-Skripte – customfooterlibs.html und customheaderlibs.html unterhalb der Seitenkomponente. Wie rendert diese Komponente die Seite?

Die Eigenschaft sling:resourceSuperType verweist auf core/wcm/components/page/v2/page. Mithilfe dieser Eigenschaft erbt die WKND-Seitenkomponente alle Funktionen der Seitenkomponente der Kernkomponente. Dies ist das erste Beispiel eines Proxy-Komponentenmusters. Weitere Informationen finden Sie hier.

Sehen Sie sich eine weitere Komponente innerhalb der WKND-Komponenten an, und zwar die Breadcrumb-Komponente aus /apps/wknd/components/breadcrumb. Beachten Sie, dass sich hier dieselbe sling:resourceSuperType-Eigenschaft findet, aber dieses Mal verweist sie auf core/wcm/components/breadcrumb/v2/breadcrumb. Dies ist ein weiteres Beispiel für die Verwendung des Proxy-Komponentenmusters zum Einschließen einer Kernkomponente. Tatsächlich sind alle Komponenten in der WKND-Code-Basis Proxys von AEM-Kernkomponenten (mit Ausnahme der benutzerdefinierten Demo-Komponente HelloWorld). Es empfiehlt sich, die Funktionalität der Kernkomponenten so weit wie möglich wiederzuverwenden, bevor benutzerdefinierter Code erstellt wird.

Sehen Sie sich als Nächstes die Kernkomponentenseite unter /libs/core/wcm/components/page/v2/page mithilfe von CRXDE Lite an:

Beachten Sie, dass unter dieser Seite viele Skriptdateien enthalten sind. Die Kernkomponentenseite enthält zahlreiche Funktionen. Diese Funktion ist in mehrere Skripte unterteilt, um die Wartung und Lesbarkeit zu erleichtern. Sie können die Einbindung der HTL-Skripte verfolgen, indem Sie die Datei page.html öffnen und nach data-sly-include suchen:

<!--/* /libs/core/wcm/components/page/v2/page/page.html */-->
<!DOCTYPE HTML>
<html data-sly-use.page="com.adobe.cq.wcm.core.components.models.Page" lang="${page.language}"
    data-sly-use.head="head.html"
    data-sly-use.footer="footer.html"
    data-sly-use.redirect="redirect.html">
    <head data-sly-call="${head.head @ page = page}"></head>
    <body class="${page.cssClassNames}"
        id="${page.id}"
        data-cmp-data-layer-enabled="${page.data ? true : false}">
        <script data-sly-test.dataLayerEnabled="${page.data}">
        window.adobeDataLayer = window.adobeDataLayer || [];
        adobeDataLayer.push({
            page: JSON.parse("${page.data.json @ context='scriptString'}"),
            event:'cmp:show',
            eventInfo: {
                path: 'page.${page.id @ context="scriptString"}'
            }
        });
        </script>
        <sly data-sly-test.isRedirectPage="${page.redirectTarget && (wcmmode.edit || wcmmode.preview)}"
            data-sly-call="${redirect.redirect @ redirectTarget = page.redirectTarget}"></sly>
        <sly data-sly-test="${!isRedirectPage}">
            <sly data-sly-include="body.skiptomaincontent.html"></sly>
            <sly data-sly-include="body.socialmedia_begin.html"></sly>
            <sly data-sly-include="body.html"></sly>
            <sly data-sly-call="${footer.footer @ page = page}"></sly>
            <sly data-sly-include="body.socialmedia_end.html"></sly>
        </sly>
    </body>
</html>

Der andere Grund für das Aufschlüsseln des HTL-Codes in mehrere Skripte besteht darin, den Proxy-Komponenten das Überschreiben einzelner Skripte zu ermöglichen, um benutzerdefinierte Geschäftslogiken zu implementieren. Die HTL-Skripte customfooterlibs.html und customheaderlibs.html werden für den expliziten Zweck erstellt, durch die Implementierung von Projekten überschrieben zu werden.

In diesem Artikel erhalten Sie weitere Informationen darüber, wie die bearbeitbare Vorlage in das Rendering der Inhaltsseite einfließt.

Untersuchen Sie eine andere Kernkomponente, z. B. den Breadcrumb unter /libs/core/wcm/components/breadcrumb/v2/breadcrumb. Sehen Sie sich das Skript breadcrumb.html an, um zu verstehen, wie das Markup für die Breadcrumb-Komponente letztendlich generiert wird.

Öffnen Sie in VSCode das Projekt aem-guides-wknd.

Erweitern Sie das ui.content-Modul im Projekt-Explorer. Erweitern Sie den Ordner src und navigieren Sie zu /conf/wknd/settings/wcm/templates.

Klicken Sie mit der rechten Maustaste auf den Ordner templates und wählen Sie Importieren aus AEM-Server:

Die article-page sollte importiert werden und die Vorlagen page-content sowie xf-web-variation sollten ebenfalls aktualisiert werden.

Wiederholen Sie die Schritte, um Inhalte zu importieren, wählen Sie jedoch den Ordner Richtlinien aus /conf/wknd/settings/wcm/policies.

Sehen Sie sich die Datei filter.xml aus ui.content/src/main/content/META-INF/vault/filter.xml an.

<!--ui.content filter.xml-->
<?xml version="1.0" encoding="UTF-8"?>
<workspaceFilter version="1.0">
    <filter root="/conf/wknd" mode="merge"/>
    <filter root="/content/wknd" mode="merge"/>
    <filter root="/content/dam/wknd" mode="merge"/>
    <filter root="/content/experience-fragments/wknd" mode="merge"/>
</workspaceFilter>

Die Datei filter.xml ist für die Identifizierung der Knotenpfade verantwortlich, die mit dem Paket installiert werden. Beachten Sie das mode="merge" bei jedem Filter, das anzeigt, dass der vorhandene Inhalt nicht geändert werden soll, sondern nur neue Inhalte hinzugefügt werden. Da Inhaltsautorinnen und -autoren diese Pfade möglicherweise aktualisieren, ist es wichtig, dass eine Code-Bereitstellung den Inhalt nicht überschreibt. Weitere Informationen zum Arbeiten mit Filterelementen finden Sie in der FileVault-Dokumentation.

Vergleichen Sie ui.content/src/main/content/META-INF/vault/filter.xml und ui.apps/src/main/content/META-INF/vault/filter.xml, um die verschiedenen Knoten zu verstehen, die von den einzelnen Modulen verwaltet werden.