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.
Vergegenwärtigen Sie sich die erforderlichen Tools und Anweisungen zum Einrichten einer lokalen Entwicklungsumgebung.
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
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.
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.
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.
Ein generisches UI-Kit der AEM-Kernkomponenten ist ebenfalls verfügbar und dient als Ausgangspunkt für benutzerdefinierte Projekte.
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:
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:
/content/experience-fragments/wknd/us/en/site/header/master
verweisen soll.header
gesetzt ist. Das header
-Element wird im nächsten Kapitel mit CSS angesprochen./content/experience-fragments/wknd/us/en/site/footer/master
verweisen soll.footer
gesetzt ist. Das footer
-Element wird im nächsten Kapitel mit CSS angesprochen.main
gesetzt ist. Das main
-Element wird im nächsten Kapitel mit CSS angesprochen.H4
als Typ fest.H5
als Typ fest.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:
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:
/content/wknd/us/en
verknüpft ist./content/wknd/us/en
auf die Startseite verlinkt.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:
/content/wknd/us/en/magazine
fest.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:
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.
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.
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.
<!--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-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.
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, Sie haben eine Vorlage und eine Seite mit Adobe Experience Manager Sites erstellt!
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
.
tutorial/pages-templates-solution
aus.