Seitenvorlagen – statisch

Letzte Aktualisierung: 2023-07-19

Eine Vorlage wird verwendet, um eine Seite zu erstellen, und definiert, welche Komponenten im ausgewählten Bereich verwendet werden können. Eine Vorlage ist eine Hierarchie von Knoten, die dieselbe Struktur wie die zu erstellende Seite aufweist, jedoch keinen tatsächlichen Inhalt hat.

Jede Vorlage stellt Ihnen eine Auswahl an Komponenten zur Verfügung, die Sie verwenden können.

  • Vorlagen bestehen aus Komponenten;
  • Komponenten verwenden Widgets und ermöglichen den Zugriff auf Widgets und diese werden zum Rendern des Inhalts verwendet.
HINWEIS

Bearbeitbare Vorlagen sind ebenfalls verfügbar und sind der empfohlene Typ von Vorlagen für die größte Flexibilität und die neuesten Funktionen.

Eigenschaften und untergeordnete Knoten einer Vorlage

Eine Vorlage ist ein Knoten des Typs cq:Template und hat die folgenden Eigenschaften und untergeordneten Knoten:

Name
Typ
Beschreibung
.
cq:Template Aktuelle Vorlage. Eine Vorlage weist den Knotentyp cq:Template auf
allowedChildren Zeichenfolge[] Pfad einer Vorlage, die ein untergeordnetes Element dieser Vorlage sein kann.
allowedParents Zeichenfolge[] Pfad einer Vorlage, die ein übergeordnetes Element dieser Vorlage sein kann.
allowedPaths Zeichenfolge[] Pfad einer Seite, die auf dieser Vorlage basieren darf.
jcr:created Datum Datum der Erstellung der Vorlage.
jcr:description Zeichenfolge Beschreibung der Vorlage.
jcr:title Zeichenfolge Titel der Vorlage.
Rangfolge Long Rang der Vorlage. Wird verwendet, um die Vorlage in der Benutzeroberfläche anzuzeigen
jcr:content cq:PageContent Knoten, der den Inhalt der Vorlage enthält.
thumbnail.png nt:file Miniaturansicht der Vorlage.
icon.png nt:file Symbol der Vorlage.

Eine Vorlage ist die Basis einer Seite.

Um eine Seite zu erstellen, müssen Sie die Vorlage (Knotenbaumstruktur /apps/<myapp>/template/<mytemplate>) an die entsprechende Stelle in der Website-Baumstruktur kopieren: Dies geschieht, wenn eine Seite über die Registerkarte Websites erstellt wird.

Durch diese Kopieraktion erhält die Seite auch ihren anfänglichen Inhalt (normalerweise nur Inhalte der obersten Ebene) und die Eigenschaft sling:resourceType, den Pfad zur Seitenkomponente, die zum Rendern der Seite verwendet wird (alles im untergeordneten Knoten jcr:content).

Strukturierung von Vorlagen

Zwei Aspekte sind zu berücksichtigen:

  • die Struktur der Vorlage selbst
  • die Struktur des Inhalts, der bei Verwendung einer Vorlage erzeugt wird

Die Struktur einer Vorlage

Eine Vorlage wird unter einem Knoten des Typs cq:Template.

screen_shot_2012-02-13at63646pm

Verschiedene Eigenschaften können festgelegt werden, insbesondere:

  • jcr:title - Titel der Vorlage; wird beim Erstellen einer Seite im Dialogfeld angezeigt.
  • jcr:description - Beschreibung der Vorlage; wird beim Erstellen einer Seite im Dialogfeld angezeigt.

Dieser Knoten enthält einen Knoten jcr:content (cq:PageContent) , der als Grundlage für den Inhaltsknoten der resultierenden Seiten verwendet wird. Dadurch wird mithilfe von sling:resourceType die Komponente referenziert, die zum Rendern des tatsächlichen Inhalts einer neuen Seite verwendet werden soll.

screen_shot_2012-02-13at64010pm

Mit dieser Komponente wird die Struktur und das Design des Inhalts definiert, wenn eine neue Seite erstellt wird.

screen_shot_2012-02-13at64137pm

Der von einer Vorlage erstellte Inhalt

Mit Vorlagen werden Seiten des Typs cq:Page erstellt (wie bereits erwähnt, ist eine Seite eine besondere Art der Komponente). Jede AEM-Seite weist den strukturierten Knoten jcr:content auf. Dies:

  • vom Typ cq:PageContent
  • ist ein strukturierter Knotentyp, der eine definierte Inhaltsdefinition enthält
  • weist die Eigenschaft sling:resourceType auf, die auf die Komponente verweist, welche die Sling-Skripte zum Rendern des Inhalts enthält

Standardvorlagen

AEM enthält standardmäßig verschiedene Standardvorlagen. Manchmal sollten Sie die Vorlagen unverändert verwenden. In diesem Fall müssen Sie sicherstellen, dass die Vorlage für Ihre Website verfügbar ist.

Beispielsweise enthält AEM mehrere Vorlagen, darunter eine Inhaltsseite und eine Homepage.

Titel Komponente Speicherort Zweck
Homepage homepage geometrixx Die Geometrixx-Homepage-Vorlage.
Inhalts-Seite contentpage geometrixx Die Inhaltsseitenvorlage des Geometrixx.

Anzeigen von Standardvorlagen

Um eine Liste aller Vorlagen im Repository anzuzeigen, gehen Sie wie folgt vor:

  1. Öffnen Sie in CRXDE Lite die Instrumente Menü und klicken Sie auf Abfrage.

  2. Im Tab Abfrage

  3. As Typ auswählen XPath.

  4. Geben Sie in das Eingabefeld Abfrage diese Zeichenfolge ein: //element(*, cq:Template)

  5. Klicken Sie auf Ausführen. Die Liste wird im Ergebnisfeld angezeigt.

Normalerweise nehmen Sie eine vorhandene Vorlage und entwickeln eine neue für Ihre eigene Verwendung. Siehe Entwickeln von Seitenvorlagen für weitere Informationen.

Damit eine vorhandene Vorlage für Ihre Website aktiviert und im Dialogfeld Seite erstellen angezeigt wird, wenn Sie eine Seite direkt unter Websites in der Websites-Konsole erstellen, legen Sie für die Eigenschaft „allowedPaths“ des Vorlagenknotens folgenden Wert fest: /content(/.&?lang=de#42;)?

Anwenden von Vorlagendesigns

Wenn Stile in der Benutzeroberfläche im Designmodus definiert werden, wird das Design am genauen Pfad des Inhaltsknotens, für den der Stil definiert wird, beibehalten.

VORSICHT

Adobe empfiehlt nur die Anwendung von Designs durch den Designmodus.

Das Ändern von Designs in CRXDE Lite ist beispielsweise keine Best Practice und die Anwendung solcher Designs kann vom erwarteten Verhalten abweichen.

Wenn Entwürfe nur im Designmodus angewendet werden, sind die folgenden Abschnitte, Auflösung des Designpfads, Entscheidungsbaum und das Beispiel, nicht anwendbar.

Auflösung des Designpfads

Beim Rendern von Inhalten, die auf einer statischen Vorlage basieren, versucht AEM, das relevanteste Design und die relevantesten Stile auf den Inhalt anzuwenden, basierend auf einer Umkehrung der Inhaltshierarchie.

AEM bestimmt den relevantesten Stil für einen Inhaltsknoten in der folgenden Reihenfolge:

  • Wenn ein Design für den vollständigen und genauen Pfad des Inhaltsknotens vorhanden ist (wie bei der Definition des Designs im Designmodus), verwende dieses Design.
  • Wenn ein Design für den Inhaltsknoten des übergeordneten Elements vorhanden ist, verwenden dieses Design.
  • Wenn sich ein Design für einen Knoten im Pfad des Inhaltsknotens befindet, verwende dieses Design.

Wenn es in den letzten beiden Fällen mehr als ein geeignetes Design gibt, verwende das Design, das dem Inhaltsknoten am nächsten ist.

Entscheidungsbaum

Dies ist eine grafische Darstellung der Logik der Auflösung des Designpfads.

design_path_resolution

Beispiel

Denken Sie an eine einfache Inhaltsstruktur wie die folgende, bei der ein Design auf jeden der Knoten angewendet werden könnte:

/root/branch/leaf

In der folgenden Tabelle wird beschrieben, wie AEM einen Entwurf auswählt.

Suchen nach einem Design für
Designs vorhanden für
Ausgewähltes Design
Kommentar
leaf

root

branch

leaf

leaf Es wird immer die genaueste Übereinstimmung gewählt.
leaf

root

branch

branch Fallen Sie zurück auf die nächstgelegene Übereinstimmung weiter unten in der Baumstruktur.
leaf root root Wenn alles andere fehlschlägt, nehmen Sie, was übrig ist.
branch branch branch
branch

branch

leaf

branch
branch

root

branch

branch
branch

root

leaf

root

Wenn es keine exakte Übereinstimmung gibt, nehmen Sie das Design ganz unten in der Baumstruktur.

Es wird davon ausgegangen, dass dieses immer anwendbar ist, aber weiter oben im Baum zu spezifisch sein kann.

Entwickeln von Seitenvorlagen

AEM Seitenvorlagen sind einfach Modelle, die zum Erstellen von Seiten verwendet werden. Sie können so wenig oder so viel anfänglichen Inhalt wie nötig enthalten. Ihre Rolle besteht darin, die richtigen anfänglichen Knotenstrukturen zu erstellen, wobei die erforderlichen Eigenschaften (hauptsächlich sling:resourceType) so eingestellt sind, dass sie die Bearbeitung und Wiedergabe ermöglichen.

Erstellen einer Vorlage (basierend auf einer vorhandenen Vorlage)

Eine neue Vorlage kann komplett neu erstellt werden, aber oft wird stattdessen eine vorhandene Vorlage kopiert und aktualisiert, um Ihnen Zeit und Mühe zu sparen. Beispielsweise können die Vorlagen in Geometrixx für die ersten Schritte verwendet werden.

So erstellen Sie eine Vorlage basierend auf einer vorhandenen Vorlage:

  1. Kopieren Sie eine vorhandene Vorlage (vorzugsweise mit einer Definition, die dem, was Sie erreichen möchten, möglichst ähnlich ist) in einen neuen Knoten.

    Vorlagen werden in /apps/<website-name>/templates/<template-name>.

    HINWEIS

    Die Liste der verfügbaren Vorlagen hängt vom Speicherort der neuen Seite und den in den einzelnen Vorlagen angegebenen Platzierungsbeschränkungen ab. Siehe Formularverfügbarkeit.

  2. Ändern Sie die jcr:title des neuen Vorlagenknotens, um dessen neue Rolle widerzuspiegeln. Sie können auch die jcr:description gegebenenfalls. Stellen Sie sicher, dass Sie die Vorlagenverfügbarkeit der Seite entsprechend ändern.

    HINWEIS

    Damit Ihre Vorlage im Dialogfeld Seite erstellen angezeigt wird, wenn Sie eine Seite direkt unter Websites in der Websites-Konsole erstellen, legen Sie für die Eigenschaft allowedPaths folgenden Wert fest: /content(/.*)?

    chlimage_1-88

  3. Kopieren Sie die Komponente, auf der die Vorlage basiert (dies wird durch die Variable sling:resourceType -Eigenschaft der jcr:content -Knoten in der Vorlage), um eine Instanz zu erstellen.

    Komponenten werden unter /apps/<website-name>/components/<component-name>.

  4. Aktualisieren Sie die jcr:title und jcr:description der neuen Komponente.

  5. Ersetzen Sie thumbnail.png , wenn ein neues Miniaturbild in der Vorlagenauswahlliste angezeigt werden soll (Größe 128 x 98 Pixel).

  6. Aktualisieren Sie die sling:resourceType der Vorlage jcr:content -Knoten, um auf die neue Komponente zu verweisen.

  7. Nehmen Sie zusätzliche Änderungen an der Funktionalität oder dem Design der Vorlage, der zugrunde liegenden Komponente oder beidem vor.

    HINWEIS

    Änderungen an den /apps/<website>/templates/<template-name> -Knoten wirken sich auf die Vorlageninstanz aus (wie in der Auswahlliste).

    Änderungen an den /apps/<website>/components/<component-name> -Knoten wirken sich auf die Inhaltsseite aus, die bei Verwendung der Vorlage erstellt wird.

    Jetzt können Sie mit der neuen Vorlage eine Seite auf Ihrer Website erstellen.

HINWEIS

Die Client-Bibliothek des Editors setzt voraus, dass die cq.shared -Namespace in Inhaltsseiten verwenden, und wenn dies nicht vorhanden ist, wird der JavaScript-Fehler Uncaught TypeError: Cannot read property 'shared' of undefined Ergebnisse.

Alle Beispielinhaltsseiten enthalten cq.shared, sodass jeglicher darauf basierender Inhalt automatisch cq.shared umfasst. Wenn Sie sich jedoch ganz neue eigene Inhaltsseiten erstellen möchten, die nicht auf Beispielinhalt basieren, müssen Sie sicherstellen, dass Sie den Namespace cq.shared einbinden.

Weitere Informationen finden Sie unter Verwendung Client-seitiger Bibliotheken.

Verfügbarmachen einer vorhandenen Vorlage

Dieses Beispiel zeigt, wie eine Vorlage für bestimmte Inhaltspfade verwendet werden kann. Die Vorlagen, die dem Seitenautor beim Erstellen von Seiten zur Verfügung stehen, werden durch die Logik bestimmt, die in Formularverfügbarkeit.

  1. Navigieren Sie in CRXDE Lite zu der Vorlage, die Sie für Ihre Seite verwenden möchten, z. B. zur Newsletter-Vorlage.

  2. Ändern Sie die allowedPaths -Eigenschaft und andere Eigenschaften, die für Vorlagenverfügbarkeit. Beispielsweise allowedPaths: /content/geometrixx-outdoors/[^/]+(/.*)? bedeutet, dass diese Vorlage in jedem Pfad unter /content/geometrixx-outdoors zulässig ist.

    chlimage_1-89

Auf dieser Seite