Seiten und Vorlagen

In diesem Kapitel untersuchen wir die Beziehung zwischen einer Basisseitenkomponente und bearbeitbaren Vorlagen. Hier erfahren Sie, wie Sie auf der Basis einiger Modelle aus eine Artikel-Vorlage erstellen, die nicht formatiert ist. Adobe XD. Beim Erstellen der Vorlage werden Kernkomponenten und erweiterte Richtlinienkonfigurationen der bearbeitbaren Vorlagen behandelt.

Voraussetzungen

Überprüfen Sie die erforderlichen Tools und Anweisungen zum Einrichten eines lokale Entwicklungsumgebung.

Starterprojekt

Sehen Sie sich den Basis-Code an, auf dem das Tutorial aufbaut:

1. Sehen Sie sich die tutorial/pages-templates-start Verzweigung aus GitHub

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

2. Stellen Sie die Codebasis mithilfe Ihrer Maven-Kenntnisse in einer lokalen AEM-Instanz bereit:

   $ mvn clean install -PautoInstallSinglePackage
   

   HINWEIS

   Wenn Sie AEM 6.5 oder 6.4 verwenden, hängen Sie die classic Profile zu beliebigen Maven-Befehlen hinzufügen.

   $ mvn clean install -PautoInstallSinglePackage -Pclassic
   

Sie können den fertigen Code immer in GitHub oder den Code lokal auschecken, indem Sie zu der Verzweigung wechseln tutorial/pages-templates-solution.

Ziel

1. Inspect ist ein in Adobe XD erstellter Seitenentwurf und ordnet ihn Kernkomponenten zu.
2. 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 erzwingen.
3. 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.

Benutzeroberflächenplanung mit Adobe XD

Normalerweise beginnt die Planung für eine neue Website mit Modellrechnungen und statischen Designs. Adobe XD ist ein Design-Tool zum Erstellen von Benutzererlebnissen. Als Nächstes überprüfen wir ein UI-Kit und Modelle, um die Struktur der Artikelseitenvorlage zu planen.

Laden Sie die WKND Article Design File.

Erstellen der Artikelseitenvorlage

Beim Erstellen einer Seite müssen Sie eine Vorlage auswählen, die als Grundlage für die Erstellung der Seite dient. Die Vorlage definiert die Struktur der resultierenden Seite, den anfänglichen Inhalt und die zulässigen Komponenten.

Es gibt drei Hauptbereiche von Bearbeitbare Vorlagen:

1. Struktur - definiert Komponenten, die Teil der Vorlage sind. Diese können von Inhaltsautoren nicht bearbeitet werden.
2. Anfänglicher Inhalt - definiert Komponenten, mit denen die Vorlage beginnt. Diese können von Inhaltsautoren bearbeitet und/oder gelöscht werden.
3. Richtlinien - definiert Konfigurationen zum Verhalten von Komponenten und zu den Optionen, die Autoren haben.

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

Allgemeine Schritte für das obige Video:

Strukturkonfigurationen

1. Erstellen Sie eine Vorlage mit dem Seitenvorlagentyp, benannt Artikelseite.
2. Alles in Struktur -Modus.
3. Hinzufügen einer Experience Fragment -Komponente, die als Kopfzeile oben in der Vorlage.
   • Konfigurieren der Komponente, auf die verwiesen werden soll /content/experience-fragments/wknd/us/en/site/header/master.
   • Legen Sie die Richtlinie auf Seitenkopf und stellen sicher, dass Standardelement auf header. Die header-Element im nächsten Kapitel mit CSS angesprochen wird.
4. Hinzufügen einer Experience Fragment -Komponente, die als Fußzeile unten in der Vorlage.
   • Konfigurieren der Komponente, auf die verwiesen werden soll /content/experience-fragments/wknd/us/en/site/footer/master.
   • Legen Sie die Richtlinie auf Fußzeile der Seite und stellen sicher, dass Standardelement auf footer. Die footer -Element im nächsten Kapitel mit CSS angesprochen wird.
5. Sperren Sie die main Container, der bei der anfänglichen Erstellung der Vorlage enthalten war.
   • Legen Sie die Richtlinie auf Page Main und stellen sicher, dass Standardelement auf main. Die main -Element im nächsten Kapitel mit CSS angesprochen wird.
6. Hinzufügen einer Bild -Komponente main Container.
   • Entsperren Sie die Bild -Komponente.
7. Hinzufügen einer Breadcrumb Komponente unter Bild -Komponente im Hauptbehälter.
   • Erstellen Sie eine Richtlinie für die Breadcrumb Komponente namens Artikelseite - Breadcrumb. Legen Sie die Navigationsstartstufe nach 4.
8. Hinzufügen einer Container Komponente unter Breadcrumb und innerhalb der main Container. Dies dient als Inhaltscontainer für die Vorlage.
   • Entsperren Sie die Inhalt Container.
   • Legen Sie die Richtlinie auf Seiteninhalt.
9. Weitere hinzufügen Container Komponente unter Inhaltscontainer. Dies dient als Seitenleiste Container für die Vorlage.
   • Entsperren Sie die Seitenleiste Container.
   • Erstellen Sie eine Richtlinie mit dem Namen Artikelseite - Seitenleiste.
   • Konfigurieren Sie die Zugelassene Komponenten under WKND Sites-Projekt - Inhalt um Folgendes einzuschließen: Schaltfläche, Download, Bild, Liste, Trennzeichen, Freigabe in Social Media, Text und Titel.
10. Aktualisieren Sie die Richtlinie des Seitenstamm-Containers. Dies ist der äußere Behälter der Vorlage. Legen Sie die Richtlinie auf Seitenstamm.
    • under Container-Einstellungen, legen Sie die Layout nach Responsives Raster.
11. Layout-Modus für die Inhaltscontainer. Ziehen Sie den Ziehpunkt von rechts nach links und verkleinern Sie den Container auf acht Spalten breit.
12. Layout-Modus für die Seitenleisten-Container. Ziehen Sie den Ziehpunkt von rechts nach links und verkleinern Sie den Container auf vier Spalten breit. Ziehen Sie dann den linken Ziehpunkt von links nach rechts in eine Spalte, damit der Container 3 Spalten breit wird und eine 1-Spalten-Lücke zwischen der Inhaltscontainer.
13. Öffnen Sie den mobilen Emulator und wechseln Sie zu einem mobilen Breakpoint. Layout-Modus erneut einbinden und die Inhaltscontainer und Seitenleisten-Container die gesamte Breite der Seite. Dadurch werden die Container vertikal im mobilen Breakpoint gestapelt.
14. Aktualisieren Sie die Richtlinie des Text -Komponente in Inhaltscontainer.
    • Legen Sie die Richtlinie auf Inhaltstext.
    • under Plugins > Absatzformate, check Absatzstile aktivieren und stellen sicher, dass Anführungsblock aktiviert ist.

Erstmalige Inhaltskonfigurationen

1. Wechseln zu Anfänglicher Inhalt -Modus.
2. Hinzufügen einer Titel -Komponente Inhaltscontainer. Dies dient als Artikeltitel. Wenn er leer gelassen wird, wird automatisch der Titel der aktuellen Seite angezeigt.
3. Sekunde hinzufügen Titel -Komponente unter der ersten Titelkomponente.
   • Konfigurieren Sie die Komponente mit dem Text: "Nach Autor". Dies ist ein Textplatzhalter.
   • Festlegen des Typs H4.
4. Hinzufügen einer Text Komponente unter Nach Autor Titelkomponente.
5. Hinzufügen einer Titel -Komponente Seitenleisten-Container.
   • Konfigurieren Sie die Komponente mit dem Text: "Diese Geschichte teilen".
   • Festlegen des Typs H5.
6. Hinzufügen einer Freigabe in Social Media Komponente unter Diese Meldung teilen Titelkomponente.
7. Hinzufügen einer Trennzeichen Komponente unter Freigabe in Social Media -Komponente.
8. Hinzufügen einer Download Komponente unter Trennzeichen -Komponente.
9. Hinzufügen einer Liste Komponente unter Download -Komponente.
10. Aktualisieren Sie die Anfängliche Seiteneigenschaften für die Vorlage.
    • under Social Media > Freigabe in Social Media, check Facebook und Pinterest

Aktivieren Sie die Vorlage und fügen Sie eine Miniatur hinzu

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

2. Aktivieren die Vorlage "Artikelseite".

3. Bearbeiten Sie die Eigenschaften der Vorlage "Artikelseite"und laden Sie die folgende Miniaturansicht hoch, um die mit der Vorlage "Artikelseite"erstellten Seiten schnell zu identifizieren:

   

Kopf- und Fußzeile mit Experience Fragments aktualisieren

Eine gängige Praxis bei der Erstellung globaler Inhalte, wie Kopf- oder Fußzeilen, besteht darin, eine Experience Fragment. Experience Fragments ermöglicht es Benutzern, mehrere Komponenten zu kombinieren, um eine einzelne, referenzierbare Komponente zu erstellen. Experience Fragments bieten die Vorteile der Unterstützung von Multi-Site-Management und Lokalisierung.

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

Allgemeine Schritte für das obige Video:

1. Beispielinhaltspaket herunterladen WKND-PagesTemplates-Content-Assets.zip.
2. Laden Sie das Inhaltspaket mit Package Manager hoch und installieren Sie es unter http://localhost:4502/crx/packmgr/index.jsp
3. Aktualisieren Sie die Vorlage Webvariante , die 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 Container -Komponente in der Vorlage.
   • Legen Sie die Richtlinie auf XF-Stamm.
   • Unter dem Zugelassene Komponenten Komponentengruppe auswählen WKND Sites-Projekt - Struktur um Sprachnavigation, Navigation und Schnellsuche Komponenten.

Header-Experience Fragment aktualisieren

1. Öffnen Sie das Experience Fragment, das die Kopfzeile unter http://localhost:4502/editor.html/content/experience-fragments/wknd/us/en/site/header/master.html
2. Konfigurieren des Stamms Container des Fragments. Dies ist der äußere Container.
   • Legen Sie die Layout nach Responsives Raster
3. Fügen Sie die WKND Dark Logo als Bild oben im Container. Das Logo war im Paket enthalten, das in einem vorherigen Schritt installiert wurde.
   • Layout der WKND Dark Logo zu two Spalten breit. Ziehen Sie die Griffe von rechts nach links.
   • Konfigurieren Sie das Logo mit Alternativtext des "WKND-Logos".
   • Konfigurieren Sie das Logo für Link nach /content/wknd/us/en die Startseite.
4. Konfigurieren Sie die Navigation -Komponente, die bereits auf der Seite platziert ist.
   • Legen Sie die Ausschließen von Stammebenen nach 1.
   • Legen Sie die Navigationsstrukturtiefe nach 1.
   • Layout der Navigation Komponente acht Spalten breit. Ziehen Sie die Griffe von rechts nach links.
5. Entfernen Sie die Sprachnavigation -Komponente.
6. Layout der Suche Komponente two Spalten breit. Ziehen Sie die Griffe von rechts nach links. Alle Komponenten sollten jetzt horizontal auf einer einzigen Zeile ausgerichtet werden.

Fußzeile für Experience Fragment aktualisieren

1. Öffnen Sie das Experience Fragment, das die Fußzeile am http://localhost:4502/editor.html/content/experience-fragments/wknd/us/en/site/footer/master.html
2. Konfigurieren des Stamms Container des Fragments. Dies ist der äußere Container.
   • Legen Sie die Layout nach Responsives Raster
3. Fügen Sie die WKND-Light-Logo als Bild oben im Container. Das Logo war im Paket enthalten, das in einem vorherigen Schritt installiert wurde.
   • Layout der WKND-Light-Logo zu two Spalten breit. Ziehen Sie die Griffe von rechts nach links.
   • Konfigurieren Sie das Logo mit Alternativtext des "WKND Logo Light".
   • Konfigurieren Sie das Logo für Link nach /content/wknd/us/en die Startseite.
4. Hinzufügen einer Navigation -Komponente unter dem -Logo. Konfigurieren Sie die Navigation component:
   • Legen Sie die Ausschließen von Stammebenen nach 1.
   • Deaktivieren Sammlung aller untergeordneten Seiten.
   • Legen Sie die Navigationsstrukturtiefe nach 1.
   • Layout der Navigation Komponente acht Spalten breit. Ziehen Sie die Griffe von rechts nach links.

Artikelseite erstellen

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

Allgemeine Schritte für das obige Video:

1. Navigieren Sie zur Sites-Konsole unter http://localhost:4502/sites.html/content/wknd/us/en/magazine.
2. Erstellen einer Seite unter WKND > USA > DE > Magazin.
   • Wählen Sie die Artikelseite Vorlage.
   • under Eigenschaften legen Sie die Titel zu "Ultimate Guide to LA Skateparks"
   • Legen Sie die Name "guide-la-skateparks"
3. Ersetzen Nach Autor Titel mit dem Text "By Stacey Roswells".
4. Aktualisieren Sie die Text -Komponente, um einen Absatz zum Ausfüllen des Artikels einzuschließen. Sie können die folgende Textdatei als Kopie verwenden: la-skate-parks-copy.txt.
5. Weitere hinzufügen Text -Komponente.
   • Aktualisieren Sie die Komponente, um das Anführungszeichen einzuschließen: "Es gibt keinen besseren Ort zum Teilen als Los Angeles."
   • Bearbeiten Sie den Rich-Text-Editor im Vollbildmodus und ändern Sie das obige Anführungszeichen, um die Anführungsblock -Element.
6. Fahren Sie mit dem Füllen des Hauptteils des Artikels fort, um mit den Sicherungen zu übereinstimmen.
7. Konfigurieren Sie die Download -Komponente verwenden, um eine PDF-Version des Artikels zu verwenden.
   • under Download > Eigenschaften, klicken Sie auf das Kontrollkästchen Abrufen des Titels aus dem DAM-Asset.
   • Legen Sie die Beschreibung an: "Get the Full Story".
   • Legen Sie die Aktionstext an: "PDF herunterladen".
8. Konfigurieren Sie die Liste -Komponente.
   • under Listeneinstellungen > Erstellen einer Liste mithilfe von auswählen Untergeordnete Seiten.
   • Legen Sie die Übergeordnete Seite nach /content/wknd/us/en/magazine.
   • Unter dem Elementeinstellungen check Verknüpfungselemente und überprüfen Datum anzeigen.

Inspect der Knotenstruktur

An dieser Stelle ist die Artikelseite eindeutig 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 Komponenten zu erhalten.

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

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

2. Klicken Sie auf jcr:content Knoten 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.

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

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

   

   Sie sollten in der Lage sein, jeden Knoten lose Komponenten zuzuordnen, die erstellt wurden. Ermitteln Sie, ob Sie die verschiedenen Layout-Container identifizieren können, indem Sie die Knoten überprüfen, denen das Präfix container.

4. Überprüfen Sie die Seitenkomponente als Nächstes unter /apps/wknd/components/page. 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 sling:resourceSuperType -Eigenschaft verweist auf core/wcm/components/page/v2/page. Mit dieser Eigenschaft kann die Seitenkomponente des WKND erben all die Funktionalität der Kernkomponente-Seitenkomponente. Dies ist das erste Beispiel einer so genannten Proxy-Komponentenmuster. Weitere Informationen finden Sie hier.

5. Inspect eine weitere Komponente innerhalb der WKND-Komponenten, die Breadcrumb Komponente aus: /apps/wknd/components/breadcrumb. Beachten Sie Folgendes: sling:resourceSuperType -Eigenschaft gefunden werden, aber diesmal 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-Codebasis Proxys von AEM Kernkomponenten (mit Ausnahme der benutzerdefinierten Demo HelloWorld-Komponente). Es empfiehlt sich, die Funktionalität der Kernkomponenten so weit wie möglich wiederzuverwenden before Schreiben von benutzerdefiniertem Code.

6. Überprüfen Sie als Nächstes die Kernkomponentenseite unter /libs/core/wcm/components/page/v2/page mithilfe von CRXDE Lite:

   HINWEIS

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

   

   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 Einbeziehung der HTL-Skripte verfolgen, indem Sie die page.html und suchen data-sly-include:

   <!--/* /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 Ausschlüsseln der HTL in mehrere Skripte besteht darin, den Proxy-Komponenten zu ermöglichen, einzelne Skripte zu überschreiben, um benutzerdefinierte Geschäftslogik zu implementieren. HTL-Skripte customfooterlibs.htmlund customheaderlibs.html, werden für den expliziten Zweck erstellt, der durch die Implementierung von Projekten außer Kraft gesetzt werden soll.

   Sie können mehr darüber erfahren, wie die bearbeitbare Vorlage in das Rendering der Inhaltsseite durch Lesen dieses Artikels.

7. Inspect - eine weitere Kernkomponente, z. B. die Breadcrumb-Leiste unter /libs/core/wcm/components/breadcrumb/v2/breadcrumb. Anzeigen der breadcrumb.html -Skript, 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 nützlich, Konfigurationen wie Vorlagen und zugehörige Inhaltsrichtlinien zur Quell-Code-Verwaltung beizubehalten. Dadurch wird sichergestellt, dass alle Entwickler mit demselben Inhalt und denselben Konfigurationen arbeiten und zusätzliche Konsistenz zwischen Umgebungen sichergestellt wird. Sobald ein Projekt einen gewissen Reifegrad erreicht hat, kann die Verwaltung von Vorlagen einer speziellen Gruppe von Power-Benutzern übertragen werden.

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

Die nächsten Schritte werden in der VSCode IDE mit der VSCode AEM Sync Plug-in. Sie können jedoch jede IDE verwenden, für die Sie konfiguriert haben importieren oder importieren Sie Inhalte aus einer lokalen Instanz von AEM.

1. Öffnen Sie in den VSCode die aem-guides-wknd Projekt.

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

3. Rechts+Klicken die templates Ordner und wählen Sie Import von AEM Server:

   

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

   

4. Wiederholen Sie die Schritte zum Importieren von Inhalten, wählen Sie jedoch die policies Ordner aus /conf/wknd/settings/wcm/policies.

   

5. Inspect filter.xml Datei aus ui.content/src/main/content/META-INF/vault/filter.xml.

   <!--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 filter.xml -Datei ist für die Identifizierung der Pfade von Knoten verantwortlich, die mit dem Paket installiert werden. Beachten Sie die mode="merge" bei jedem Filter, der anzeigt, dass der vorhandene Inhalt nicht geändert werden soll, nur neue Inhalte hinzugefügt werden. Da Inhaltsautoren diese Pfade möglicherweise aktualisieren, ist es wichtig, dass eine Codebereitstellung not Inhalt überschreiben. Siehe FileVault-Dokumentation Weitere Informationen zum Arbeiten mit Filterelementen.

   Vergleichen 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 eine konsistente Bereitstellung der WKND-Referenz-Website sicherzustellen, werden einige Verzweigungen des Projekts so eingerichtet, dass ui.content überschreibt alle Änderungen im JCR. Dies erfolgt standardmäßig, d. h. für Lösungsverzweigungen, da Code/Stile für bestimmte Richtlinien geschrieben werden.

Herzlichen Glückwunsch!

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

Nächste Schritte

An dieser Stelle ist die Artikelseite eindeutig unformatiert. Befolgen Sie die Client-seitige Bibliotheken und Frontend-Workflow Tutorial zu den Best Practices zum Einschließen von CSS und JavaScript, um globale Stile auf die Site anzuwenden und einen dedizierten Front-End-Build zu integrieren.

Anzeigen des fertigen Codes unter GitHub oder den Code lokal in der Git-Verzweigung überprüfen und bereitstellen tutorial/pages-templates-solution.

1. Klonen Sie die github.com/adobe/aem-wknd-guides Repository.
2. Sehen Sie sich die tutorial/pages-templates-solution -Verzweigung.

Ressourcen für Business.Adobe.com