Seiten und Vorlagen

In diesem Kapitel untersuchen wir die Beziehung zwischen einer Basisseitenkomponente und bearbeitbaren Vorlagen. Erfahren Sie, wie Sie eine nicht formatierte Artikelvorlage auf der Grundlage einiger Mockups aus Adobe XD erstellen. Beim Erstellen der Vorlage werden Kernkomponenten und erweiterte Richtlinienkonfigurationen der bearbeitbaren Vorlagen behandelt.

Voraussetzungen

Vergegenwärtigen Sie sich die erforderlichen Tools und Anweisungen zum Einrichten einer lokalen Entwicklungsumgebung.

Ausgangsprojekt

HINWEIS

Wenn Sie das vorherige Kapitel erfolgreich abgeschlossen haben, können Sie das Projekt wiederverwenden und die Schritte zum Ausprobieren des Ausgangsprojekts überspringen.

Checken Sie den Basis-Code aus, auf dem das Tutorial aufbaut:

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
```
HINWEIS

Wenn Sie AEM 6.5 oder 6.4 verwenden, fügen Sie das classic-Profil an beliebige Maven-Befehle an.
```
$ mvn clean install -PautoInstallSinglePackage -Pclassic
```

Sie können den fertigen Code jederzeit auf GitHub ansehen oder den Code lokal herunterladen, indem Sie zu der Verzweigung tutorial/pages-templates-solution wechseln.

Ziel

Prüfen Sie ein in Adobe XD erstelltes Seiten-Design und ordnen Sie es Kernkomponenten zu.
Machen Sie sich mit den Details bearbeitbarer Vorlagen vertraut und erfahren Sie, wie Richtlinien verwendet werden können, um eine granulare Steuerung des Seiteninhalts zu ermöglichen.
Erfahren Sie, wie Vorlagen und Seiten verknüpft werden

Was Sie erstellen werden

In diesem Teil des Tutorials erstellen Sie eine neue Artikelseitenvorlage, die verwendet werden kann, um Artikelseiten zu erstellen und an einer gemeinsamen Struktur auszurichten. Die Artikelseitenvorlage basiert auf Designs und einem in Adobe XD erstellten UI-Kit. Dieses Kapitel konzentriert sich ausschließlich auf die Erstellung der Struktur oder des Skeletts der Vorlage. Es werden keine Stile implementiert, aber die Vorlage und die Seiten sind funktionsfähig.

Design von Artikelseiten und nicht formatierte Version

Benutzeroberflächenplanung mit Adobe XD

Normalerweise beginnt die Planung für eine neue Website mit Mockups und statischen Designs. Adobe XD ist ein Design-Tool zum Erstellen von Anwendererlebnissen. Als Nächstes sehen wir uns ein UI-Kit und Mockups an, um die Struktur der Artikelseitenvorlage zu planen.

Laden Sie die Design-Datei für WKND-Artikel herunter.

HINWEIS

Ein generisches UI-Kit der AEM-Kernkomponenten ist ebenfalls verfügbar und dient als Ausgangspunkt für benutzerdefinierte Projekte.

Erstellen der Artikelseitenvorlage

Wenn Sie eine Seite erstellen, müssen Sie eine Vorlage auswählen. Diese wird als Grundlage für die Erstellung der Seite verwendet. Die Vorlage definiert die Struktur der resultierenden Seite, den anfänglichen Inhalt und die zulässigen Komponenten.

Für bearbeitbare Vorlagen sind drei Hauptbereiche vorhanden:

Struktur – definiert Komponenten, die Teil der Vorlage sind. Diese können von Inhaltsautorinnen und -autoren nicht bearbeitet werden.
Anfänglicher Inhalt – definiert Komponenten, mit denen die Vorlage startet. Diese können von Inhaltsautorinnen und -autoren bearbeitet und/oder gelöscht werden.
Richtlinien – definiert Konfigurationen zum Verhalten von Komponenten und zu den Optionen, die Autorinnen und Autoren haben.

Erstellen Sie anschließend eine Vorlage in AEM, die der Struktur der Mockups entspricht. Dies geschieht in einer lokalen Instanz von AEM. Führen Sie die folgenden Schritte aus:

Allgemeine Schritte für das obige Video:

Strukturkonfigurationen

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.

Konfigurieren von anfänglichen Inhalten

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.

Aktivieren der Vorlage und Hinzufügen eine Miniaturansicht

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:

Aktualisieren von Kopf- und Fußzeile mit Experience Fragments

Eine gängige Praxis bei der Erstellung globaler Inhalte, wie Kopf- oder Fußzeilen, ist die Verwendung eines Experience Fragments. Experience Fragments ermöglichen es Benutzenden, mehrere Komponenten zu kombinieren, um eine einzelne, referenzierbare Komponente zu erstellen. Experience Fragments haben den Vorteil, dass sie die Verwaltung mehrerer Websites und die lokale Anpassung unterstützen.

Der AEM-Projektarchetyp generiert eine Kopf- und Fußzeile. Aktualisieren Sie anschließend die Experience Fragments, um sie an die Mockups anzupassen. Führen Sie die folgenden Schritte aus:

Allgemeine Schritte für das obige Video:

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.

Aktualisieren des Experience Fragments für die Kopfzeile

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

Aktualisieren der Fußzeile für Experience Fragment

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

Erstellen einer Artikelseite

Erstellen Sie anschließend eine Seite mithilfe der Artikelseiten-Vorlage. Verfassen Sie den Inhalt der Seite so, dass er mit den Mockups der Site übereinstimmt. Führen Sie die folgenden Schritte aus:

Allgemeine Schritte für das obige Video:

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.

Überprüfen der Knotenstruktur

An diesem Punkt ist die Artikelseite offensichtlich unformatiert. Die Grundstruktur ist jedoch vorhanden. Überprüfen Sie anschließend die Knotenstruktur der Artikelseite, um ein besseres Verständnis der Rolle der Vorlage, Seite und der Komponenten zu erhalten.

Verwenden Sie das Tool CRXDE-Lite auf einer lokalen AEM-Instanz, um die zugrunde liegende Knotenstruktur anzuzeigen.

Ö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:

HINWEIS

In AEM 6.5/6.4 befinden sich die Kernkomponenten unter /apps/core/wcm/components. In AEM as a Cloud Service befinden sich die Kernkomponenten unter /libs und werden automatisch aktualisiert.

Kernkomponentenseite

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.

Speichern von Konfigurationen in der Quell-Code-Verwaltung

Häufig ist es insbesondere zu Beginn eines AEM-Projekts hilfreich, Konfigurationen wie Vorlagen und zugehörige Inhaltsrichtlinien zur Quell-Code-Verwaltung beizubehalten. Dadurch wird sichergestellt, dass alle Entwicklerinnen und Entwickler mit demselben Inhaltssatz und denselben Konfigurationen arbeiten, und zusätzliche Konsistenz zwischen Umgebungen gewährleistet. Sobald ein Projekt einen gewissen Reifegrad erreicht hat, kann die Verwaltung von Vorlagen einer speziellen Gruppe von Power-Benutzenden übertragen werden.

Im Moment werden Vorlagen wie andere Code-Abschnitte behandelt und die Vorlage für Artikelseiten als Teil des Projekts synchronisiert.
Bisher wird Code vom AEM-Projekt an eine lokale Instanz von AEM gesendet. Die Artikelseitenvorlage wurde direkt in einer lokalen Instanz von AEM erstellt, daher muss die Vorlage in das AEM-Projekt importiert werden. Das ui.content-Modul ist zu diesem Zweck im AEM-Projekt enthalten.

Die nächsten Schritte werden in der VSCode IDE mithilfe des Plug-ins VSCode AEM Sync ausgeführt. Sie können jedoch jede IDE dafür verwenden, die gemäß Ihrer Konfiguration importieren oder Inhalte aus einer lokalen Instanz von AEM importieren soll.

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

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

WARNUNG

Um konsistente Implementierungen der WKND-Referenz-Site sicherzustellen, werden einige Verzweigungen des Projekts so eingerichtet, dass ui.content alle Änderungen im JCR überschreibt. Dies erfolgt standardmäßig, d. h. für Lösungszweige, da Codes/Stile unter bestimmten Richtlinien geschrieben werden.

Herzlichen Glückwunsch!

Herzlichen Glückwunsch, Sie haben eine Vorlage und eine Seite mit Adobe Experience Manager Sites erstellt!

Nächste Schritte

An diesem Punkt ist die Artikelseite offensichtlich unformatiert. Absolvieren Sie das Tutorial Client-seitige Bibliotheken und Frontend-Workflow, um die Best Practices zum Einschließen von CSS und JavaScript zur Anwendung globaler Stile auf die Site und zur Integration eines dedizierten Frontend-Builds zu erlernen.

Sehen Sie sich den fertigen Code unter GitHub an oder prüfen und implementieren Sie den Code lokal in der Git-Verzweigung tutorial/pages-templates-solution.

Klonen Sie das Repository github.com/adobe/aem-wknd-guides.
Checken Sie die Verzweigung tutorial/pages-templates-solution aus.

Seiten und Vorlagen

Voraussetzungen

Ausgangsprojekt

Ziel

Was Sie erstellen werden

Benutzeroberflächenplanung mit Adobe XD

Erstellen der Artikelseitenvorlage

Strukturkonfigurationen

Konfigurieren von anfänglichen Inhalten

Aktivieren der Vorlage und Hinzufügen eine Miniaturansicht

Aktualisieren von Kopf- und Fußzeile mit Experience Fragments

Aktualisieren des Experience Fragments für die Kopfzeile

Aktualisieren der Fußzeile für Experience Fragment

Erstellen einer Artikelseite

Überprüfen der Knotenstruktur

Speichern von Konfigurationen in der Quell-Code-Verwaltung

Herzlichen Glückwunsch!

Nächste Schritte

Ressourcen für Business.Adobe.com

Auf dieser Seite

Als Nächstes anzeigen:

Lernressourcen

Dokumentation

Community

Support

Ressourcen

Adobe-Konto

Adobe