Seitenvorlagen page-templates
In diesem Kapitel werden wir die Beziehung zwischen einer Seitenvorlage und einer Seite erkunden. Wir werden eine unformatierte Zeitschriftenartikel-Vorlage erstellen, die auf einigen Mockups von AdobeXD basiert. Im Laufe des Erstellens der Vorlage werden Kernkomponenten und erweiterte Richtlinienkonfigurationen behandelt.
Voraussetzungen prerequisites
Dies ist ein mehrteiliges Tutorial, und es wird vorausgesetzt, dass die Schritte, die im Kapitel Inhalt verfassen und Änderungen veröffentlichen beschrieben sind, abgeschlossen wurden.
Ziel
- Machen Sie sich mit den Details von Seitenvorlagen und der Verwendung von Richtlinien zur Erzwingung der granularen Steuerung von Seiteninhalten vertraut.
- Erfahren Sie, wie Vorlagen und Seiten verknüpft werden.
- Erstellen Sie eine neue Vorlage und verfassen Sie eine Seite.
Was Sie erstellen werden what-you-will-build
In diesem Teil des Tutorials erstellen Sie eine neue Vorlage für Zeitschriftenartikel, mit der neue Zeitschriftenartikel erstellt und an einer gemeinsamen Struktur ausgerichtet werden können. Die Vorlage basiert auf Designs und einem in AdobeXD 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.
Erstellen der Vorlage für die Zeitschriftenartikelseite
Wenn Sie eine Seite erstellen, müssen Sie eine Vorlage auswählen. Diese wird als Grundlage für die Erstellung der neuen Seite verwendet. Die Vorlage definiert die Struktur der resultierenden Seite, den anfänglichen Inhalt und die zulässigen Komponenten.
Es gibt 3 Hauptbereiche bei Seitenvorlagen:
- 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 beginnt. Diese können von Inhaltsautorinnen und -autoren bearbeitet und/oder gelöscht werden.
- Richtlinien: definiert Konfigurationen dazu, wie sich Komponenten verhalten und welche Optionen Autorinnen und Autoren zur Verfügung stehen.
Erstellen Sie anschließend eine neue Vorlage in AEM, die der Struktur der Mockups entspricht. Dies geschieht in einer lokalen Instanz von AEM. Führen Sie die folgenden Schritte aus:
Sie können die folgende Miniaturansicht verwenden, um Ihre Vorlage zu identifizieren (oder Ihre eigene hochladen!)
Lösungspaket
Eine fertige Lösung der Magazinvorlage kann über den Package Manager heruntergeladen und installiert werden.
Aktualisieren von Kopf- und Fußzeile mit Experience Fragments 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 bieten die Vorteile der Unterstützung von Multi-Site-Management und Lokalisierung.
Die Site-Vorlage hat schon eine Kopf- und Fußzeile generiert. 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 folgende Video:
- Laden Sie das Beispielinhaltspaket WKND-Starter-Assets-Skate-Article-1.2.zip herunter.
- Laden Sie das Inhaltspaket mit dem Package Manager hoch und installieren Sie es.
- Aktualisieren Sie die Experience Fragments für Kopf- und Fußzeilen, um das WKND-Logo zu verwenden.
Erstellen einer Zeitschriftenartikelseite
Erstellen Sie anschließend eine neue Seite mithilfe der Vorlage „Zeitschriftenartikelseite“. Verfassen Sie den Inhalt der Seite so, dass er mit den Mockups der Site übereinstimmt. Führen Sie die folgenden Schritte aus:
Verwenden Sie den vorgegebenen Text, um den Artikelinhalt zu füllen.
Herzlichen Glückwunsch! congratulations
Herzlichen Glückwunsch, Sie haben soeben eine neue Vorlage und Seite mit Adobe Experience Manager Sites erstellt.
Nächste Schritte next-steps
An dieser Stelle entsprechen die Artikelseite des Magazins und die Website nicht den Markenstilen für WKND. Befolgen Sie das Tutorial Themen zu den Best Practices beim Aktualisieren von CSS- und JavaScript-Frontend-Code, der zum Anwenden globaler Stile auf die Site verwendet wird.
Lösungspaket
Ein Lösungspaket für dieses Kapitel kann hier heruntergeladen werden: WKND-Magazine-Template-SOLUTION-1.0.zip.