Seitenvorlagen – statisch page-templates-static

Eine Vorlage wird verwendet, um eine Seite zu erstellen. Sie definiert, welche Komponenten im ausgewählten Umfang genutzt werden können. Eine Vorlage ist eine Hierarchie von Knoten, die dieselbe Struktur aufweist wie die zu erstellende Seite, aber keine Inhalte.

Jede Vorlage stellt Ihnen eine Auswahl an Komponenten bereit, die Sie verwenden können.

  • Vorlagen bestehen aus Komponenten;
  • Komponenten nutzen Widgets und bieten Zugriff auf Widgets. Mit Widgets werden die Inhalte gerendert.
NOTE
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 properties-and-child-nodes-of-a-template

Eine Komponente ist ein Knoten vom Typ „cq:Template“ mit den 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.

Über diesen Kopiervorgang erhält die Seite auch ihren anfänglichen Inhalt (in der Regel nur den Inhalt 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“).

Strukturieren von Vorlagen how-templates-are-structured

Zwei Aspekte müssen berücksichtigt werden:

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

Die Struktur einer Vorlage the-structure-of-a-template

Eine Vorlage wird unter einem Knoten vom Typ cq:Template erstellt.

screen_shot_2012-02-13at63646pm

Verschiedene Eigenschaften können festgelegt werden, insbesondere:

  • jcr:title  – Titel für die Vorlage; wird beim Erstellen einer Seite im Dialogfeld angezeigt.
  • jcr:description  – Beschreibung für die Vorlage; wird beim Erstellen einer Seite im Dialogfeld angezeigt.

Dieser Knoten enthält einen Knoten „jcr:content“ (cq:PageContent), der als Basis für den Inhaltsknoten der erzeugten Seiten genutzt wird. Dabei wird mit sling:resourceType auf die Komponenten verwiesen, die für das Rendern des tatsächlichen Inhalts einer neuen Seite verwendet werden sollen.

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 the-content-produced-by-a-template

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:

  • ist vom Typ „cq:PageContent“
  • ist ein strukturierter Knotentyp, der eine festgelegte 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 default-templates

AEM bietet verschiedene Standardvorlagen, die standardmäßig verfügbar sind. Mitunter können Sie die Vorlagen unverändert nutzen. In diesem Fall müssen Sie sicherstellen, dass die Vorlage für Ihre Website verfügbar ist.

AEM enthält beispielsweise verschiedene Vorlagen, darunter eine Inhaltsseite und eine Homepage.

Titel
Komponente
Speicherort
Zweck
Startseite
homepage
geometrixx
Die Vorlage für die Geometrixx-Homepage.
Inhaltsseite
contentpage
geometrixx
Die Vorlage für die Geometrixx-Inhaltsseite.

Anzeigen von Standardvorlagen displaying-default-templates

Eine Liste aller Vorlagen im Repository können Sie wie folgt anzeigen:

  1. Öffnen Sie in CRXDE Lite das Menü Tools und klicken Sie auf Abfrage.

  2. Auf der Registerkarte „Abfrage“:

  3. Wählen Sie als Typ die Option XPath aus.

  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 können Sie eine vorhandene Vorlage verwenden und auf dieser Basis eine neue Vorlage zur eigenen Verwendung entwickeln. Weitere Informationen finden Sie unter Entwickeln von Seitenvorlagen.

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(https://experienceleague.adobe.com/.&?lang=de#42;)?

Anwenden von Vorlagendesigns how-template-designs-are-applied

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.

CAUTION
Adobe empfiehlt nur die Anwendung von Designs durch den Designmodus.
Das Ändern von Designs in CRXDE Lite ist beispielsweise nicht ratsam, und die Anwendung derartiger Designs kann von erwarteten Verhaltensweisen 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 design-path-resolution

Beim Rendern von Inhalten, die auf einer statischen Vorlage basieren, versucht AEM, das relevanteste Design und die relevantesten Stile auf den Inhalt anzuwenden. Hierzu erfolgt zunächst ein Durchlauf 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 decision-tree

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

design_path_resolution

Beispiel example

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 ein Design 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 developing-page-templates

AEM-Seitenvorlagen sind schlicht Modelle, die zum Erstellen von Seiten verwendet werden. Sie können anfänglich so wenig oder viel Inhalt enthalten, wie erforderlich ist. Ihre Aufgabe besteht darin, die korrekten anfänglichen Knotenstrukturen zu erstellen, wobei die benötigten Eigenschaften (v. a. „sling:resourceType“) so eingestellt werden, dass sie Bearbeitungs- und Render-Vorgänge zulassen.

Erstellen einer Vorlage (basierend auf einer vorhandenen Vorlage) creating-a-new-template-based-on-an-existing-template

Eine neue Vorlage kann komplett neu erstellt werden. Um Zeit und Aufwand zu reduzieren, können Sie stattdessen aber auch eine vorhandene Vorlage kopieren und aktualisieren. So können Sie z. B. zum Einstieg die Vorlagen von Geometrixx nutzen.

So erstellen Sie eine Vorlage basierend auf einer vorhandenen Vorlage:

  1. Kopieren Sie eine vorhandene Vorlage (vorzugsweise mit einer Definition, die der von Ihnen gewünschten Definition möglichst ähnlich ist) in einen neuen Knoten.

    Vorlagen sind im Verzeichnis /apps/<Website-Name>/templates/<Vorlagenname> gespeichert.

    note note
    NOTE
    Die Liste der verfügbaren Vorlagen hängt vom Ort der neuen Seite und den Einschränkungen für die Platzierung ab, die in jeder Vorlage vorgegeben sind. Siehe Vorlagenverfügbarkeit.
  2. Ändern Sie den jcr:title des neuen Vorlagenknotens, um seine Rolle widerzuspiegeln. Sie können bei Bedarf außerdem die jcr:description aktualisieren. Stellen Sie sicher, dass Sie die Vorlagenverfügbarkeit der Seite entsprechend ändern.

    note note
    NOTE
    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 ist an der Eigenschaft sling:resourceType des Knotens jcr:content in der Vorlage zu erkennen), um eine neue Instanz zu erstellen.

    Komponenten sind im Verzeichnis /apps/<Website-Name>/components/<Komponentenname> gespeichert.

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

  5. Ersetzen Sie die Datei „thumbnail.png“, wenn Sie möchten, dass ein neues Miniaturbild in der Vorlagen-Auswahlliste angezeigt wird (Größe: 128 x 98 Pixel).

  6. Aktualisieren Sie den sling:resourceType des Knotens jcr:content der Vorlage, um auf die neue Komponente zu verweisen.

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

    note note
    NOTE
    Änderungen, die am Knoten /apps/<Website>/templates/<Vorlagenname> vorgenommen werden, wirken sich auf die Vorlageninstanz aus (wie in der Auswahlliste).
    Änderungen, die am Knoten /apps/<Website>/components/<Komponentenname> vorgenommen werden, wirken sich auf die Inhaltsseite aus, die mit der Vorlage erstellt wird.

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

NOTE
Die Client-Bibliothek des Editors setzt voraus, dass der Namespace cq.shared in den Inhaltsseiten vorhanden ist. Wenn nicht, wird der JavaScript-Fehler Uncaught TypeError: Cannot read property 'shared' of undefined ausgegeben.
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.

Bereitstellen einer vorhandenen Vorlage making-an-existing-template-available

Dieses Beispiel zeigt, wie Sie zulassen können, dass eine Vorlage für bestimmte Inhaltspfade genutzt werden kann. Die Vorlagen, die Autorinnen und Autoren bei der Erstellung von Seiten zur Verfügung stehen, werden durch die unter Vorlagenverfügbarkeit definierte Logik bestimmt.

  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 Eigenschaft allowedPaths und andere Eigenschaften, die für die Vorlagenverfügbarkeit genutzt werden. Beispielsweise allowedPaths: /content/geometrixx-outdoors/[^/]+(/.*)? bedeutet, dass diese Vorlage in jedem Pfad unter /content/geometrixx-outdoors zulässig ist.

    chlimage_1-89

recommendation-more-help
19ffd973-7af2-44d0-84b5-d547b0dffee2