Seitenvorlagen

In diesem Kapitel werden wir die Beziehung zwischen einer Seitenvorlage und einer Seite untersuchen. Wir werden eine nicht formatierte Zeitschriftenartikelvorlage erstellen, die auf einigen Mockups von AdobeXD. Beim Erstellen der Vorlage werden Kernkomponenten und erweiterte Richtlinienkonfigurationen behandelt.

Voraussetzungen

Dies ist ein mehrteiliges Tutorial, und es wird davon ausgegangen, dass die im Verfassen von Inhalten und Veröffentlichen von Änderungen -Kapitel abgeschlossen.

Ziel

  1. Machen Sie sich mit den Details von Seitenvorlagen und der Verwendung von Richtlinien zur Erzwingung der granularen Kontrolle von Seiteninhalten vertraut.
  2. Erfahren Sie, wie Vorlagen und Seiten verknüpft werden.
  3. Erstellen Sie eine neue Vorlage und erstellen Sie eine Seite.

Was Sie erstellen werden

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

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 von Seitenvorlagen:

  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 beginnen soll. Diese können von Inhaltsautoren bearbeitet und/oder gelöscht werden.
  3. Richtlinien - definiert Konfigurationen dazu, wie sich Komponenten verhalten und welche Optionen Autoren zur Verfügung stehen.

Erstellen Sie anschließend eine neue Vorlage in AEM, die der Struktur der Sicherungen 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!)

Miniaturansicht der Artikelseitenvorlage

Lösungspaket

A abgeschlossen Lösung der Magazine-Vorlage kann über Package Manager heruntergeladen und installiert werden.

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.

Die Site-Vorlage erzeugte 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 folgende Video:

  1. Beispielinhaltspaket herunterladen WKND-Starter-Assets-Skate-Article-1.2.zip.
  2. Laden Sie das Inhaltspaket mit Package Manager hoch und installieren Sie es.
  3. Aktualisieren Sie die Erlebnisfragmente für Kopf- und Fußzeilen, um das WKND-Logo zu verwenden.

Erstellen einer Magazine-Artikelseite

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

Verwenden Sie die bereitgestellter Text , um den Artikeltext zu füllen.

Herzlichen Glückwunsch!

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

Nächste Schritte

An dieser Stelle entsprechen die Zeitschriftenartikelseite und die Website nicht den Markenstilen für WKND. Befolgen Sie die Themen Tutorial zu den Best Practices zum 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 heruntergeladen werden: WKND-Magazine-Template-SOLUTION-1.0.zip.

Auf dieser Seite