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.
Überprüfen Sie die erforderlichen Tools und Anweisungen zum Einrichten eines lokale Entwicklungsumgebung.
Wenn Sie das vorherige Kapitel erfolgreich abgeschlossen haben, können Sie das Projekt wiederverwenden und die Schritte zum Auschecken des Starterprojekts überspringen.
Sehen Sie sich den Basis-Code an, auf dem das Tutorial aufbaut:
Sehen Sie sich die tutorial/pages-templates-start
Verzweigung aus GitHub
$ cd ~/code/aem-guides-wknd
$ git checkout tutorial/pages-templates-start
Stellen Sie die Codebasis mithilfe Ihrer Maven-Kenntnisse in einer lokalen AEM-Instanz bereit:
$ mvn clean install -PautoInstallSinglePackage
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
.
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 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.
Ein generisches AEM UI-Kit der Kernkomponenten ist ebenfalls verfügbar als Ausgangspunkt für benutzerdefinierte Projekte.
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:
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:
/content/experience-fragments/wknd/us/en/site/header/master
.header
. Die header
-Element im nächsten Kapitel mit CSS angesprochen wird./content/experience-fragments/wknd/us/en/site/footer/master
.footer
. Die footer
-Element im nächsten Kapitel mit CSS angesprochen wird.main
. Die main
-Element im nächsten Kapitel mit CSS angesprochen wird.H4
.H5
.Zeigen Sie die Vorlage in der Vorlagenkonsole an, indem Sie zu http://localhost:4502/libs/wcm/core/content/sites/templates.html/conf/wknd
Aktivieren die Vorlage "Artikelseite".
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:
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:
/content/wknd/us/en
die Startseite./content/wknd/us/en
die Startseite.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:
/content/wknd/us/en/magazine
.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.
Öffnen CRXDE-Lite und navigieren Sie mithilfe der Navigationsstruktur zu /content/wknd/us/en/magazine/guide-la-skateparks
.
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.
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
.
Ü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.
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.
Überprüfen Sie als Nächstes die Kernkomponentenseite unter /libs/core/wcm/components/page/v2/page
mithilfe von CRXDE Lite:
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.html
und 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.
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.
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.
Öffnen Sie in den VSCode die aem-guides-wknd
Projekt.
Erweitern Sie die ui.content -Modul im Projekt-Explorer. Erweitern Sie die src
Ordner und navigieren Sie zu /conf/wknd/settings/wcm/templates
.
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.
Wiederholen Sie die Schritte zum Importieren von Inhalten, wählen Sie jedoch die policies Ordner aus /conf/wknd/settings/wcm/policies
.
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.
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, Sie haben eine Vorlage und Seite mit Adobe Experience Manager Sites erstellt.
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
.
tutorial/pages-templates-solution
-Verzweigung.