Seitenvorlagen – statisch

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

Bearbeitbare Vorlagen sind ebenfalls verfügbar und sind die empfohlene Art 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 mit den folgenden Eigenschaften und untergeordneten Knoten:

Name
Typ
Beschreibung
.
cq:Template Aktuelle Vorlage. Eine Vorlage weist den Knotentyp cq:Template auf
allowedChildren Zeichenfolge[] Path of a template that is allowed to be a child of this template.
allowedParents Zeichenfolge[] Path of a template that is allowed to be a parent of this template.
allowedPaths Zeichenfolge[] Pfad einer Seite, für die diese Vorlage zulässig ist.
jcr:created Datum Date of creation of the template.
jcr:description Zeichenfolge Description of the template.
jcr:title Zeichenfolge Title of the template.
Ranking 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.

To create a page, the template must be copied (node-tree /apps/<myapp>/template/<mytemplate>) to the corresponding position in the site-tree: this is what happens if a page is created using the Websites tab.

Ü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 genutzt wird (alles im untergeordneten Knoten jcr:content).

Struktur von Vorlagen

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

Eine Vorlage wird unter einem Knoten des Typs 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 Rendering 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

Mit Vorlagen werden Seiten des Typs cq:Page erstellt (wie bereits erwähnt, ist eine Seite eine besondere Art der Komponente). Each AEM Page has a structured node jcr:content. Dieser Knoten:

  • 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

AEM bietet eine Reihe von Standardvorlagen, die standardmäßig verfügbar sind. In einigen Fällen 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 Ort Zweck
Startseite homepage geometrixx Die Vorlage für die Geometrixx-Homepage.
Inhalts-Seite contentpage geometrixx Die Vorlage für die Geometrixx-Inhaltsseite.

Anzeigen von Standardvorlagen

Eine Liste aller Vorlagen im Repository können Sie mit dem folgenden Verfahren anzeigen:

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

  2. In der Registerkarte „Abfrage“

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

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

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

In den meisten Fällen 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.

To enable an existing template for your website and you want it to be displayed in the Create Page dialog when creating a page right under Websites from the Websites console, set the allowedPaths property of the template node to: /content(/.*?lang=de)?

Anwenden von Vorlagendesigns

Wenn Stile in der Benutzeroberfläche im Designmodusdefiniert werden, wird der Entwurf an dem exakten Pfad des Inhaltsknotens, für den der Stil definiert wird, beibehalten.

ACHTUNG

Adobe empfiehlt, Entwürfe nur im Designmodusanzuwenden.

Das Ändern von Designs in CRX DE 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, Pfadauflösung, Entscheidungsstrukturund Beispiel nicht anwendbar.

Designpfad-Auflösung

Beim Rendern von Inhalten, die auf einer statischen Vorlage basieren, versucht AEM, die relevantesten Entwürfe und Stile auf den Inhalt anzuwenden, basierend auf einer Umgehung der Inhaltshierarchie.

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

  • Wenn ein Entwurf für den vollständigen und exakten Pfad des Inhalts-Knotens vorhanden ist (wie bei der Definition des Entwurfs im Designmodus), verwenden Sie diesen Entwurf.
  • Wenn ein Entwurf für den Inhaltsknoten des übergeordneten Elements vorhanden ist, verwenden Sie diesen Entwurf.
  • Wenn ein Entwurf für einen beliebigen Knoten auf dem Pfad des Inhalts-Knotens vorhanden ist, verwenden Sie diesen Entwurf.

Wenn in den letzten beiden Fällen mehr als ein entsprechender Entwurf vorhanden ist, verwenden Sie den Entwurf, der der Inhaltsknoten am nächsten liegt.

Entscheidungsbaum

Dies ist eine grafische Darstellung der Logik der Entwurfspfadauflösung .

design_path_resolution

Beispiel

Betrachten Sie eine einfache Inhaltsstruktur wie folgt, bei der ein Entwurf auf einen der Knoten angewendet werden könnte:

/root/branch/leaf

Die folgende Tabelle beschreibt, wie AEM einen Entwurf auswählen wird.

Suchen von Entwürfen für
Entwürfe vorhanden für
Ausgewähltes Design
Kommentar
leaf

root

branch

leaf

leaf Die genaueste Übereinstimmung wird immer getroffen.
leaf

root

branch

branch Kehren Sie zurück zum nächstgelegenen Spiel unten im Baum.
leaf root root Wenn alles andere scheitert, nehmen Sie, was übrig bleibt.
branch branch branch
branch

branch

leaf

branch
branch

root

branch

branch
branch

root

leaf

root

Wenn es keine exakte Übereinstimmung gibt, nehmen Sie die eine unten im Baum.

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

Entwickeln von Seitenvorlagen

AEM-Seitenvorlagen sind schlicht Modelle, die zum Erstellen neuer Seiten genutzt 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 die Bearbeitung und das Rendering zulassen.

Erstellen einer neuen Vorlage (basierend auf einer vorhandenen Vorlage)

Selbstverständlich können Sie eine Vorlage komplett von Anfang an neu erstellen. Um Zeit und Aufwand zu reduzieren, können Sie 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 neue 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) zu einem neuen Knoten.

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

    Hinweis

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

    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(/.*?lang=de)?

    chlimage_1-88

  3. Kopieren Sie die Komponente, auf der die Vorlage basiert (sie ist an der Eigenschaft sling:resourceType des Knotens jcr:content in der Vorlage zu erkennen), um eine neue Instanz zu erstellen.

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

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

  5. Ersetzen Sie die Datei thumbnail.png, wenn Sie möchten, dass eine neue Miniaturansicht in der Vorlagen-Auswahlliste angezeigt wird (Größe: 128x98 Pixel).

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

  7. Nehmen Sie alle weiteren Änderungen an der Funktionalität oder am Design der Vorlage und/oder der zugrunde liegenden Komponente vor.

    Hinweis

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

Hinweis

The editor client library assumes the presence of the cq.shared namespace in content pages, and if it is absent the JavaScript error Uncaught TypeError: Cannot read property 'shared' of undefined will result.
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 cq.shared-Namespace einbinden.
Weitere Informationen finden Sie unter Verwendung clientseitiger Bibliotheken.

Bereitstellen einer vorhandenen Vorlage

Dieses Beispiel erklärt, wie Sie zulassen können, dass eine Vorlage für bestimmte Inhaltspfade genutzt werden kann. The templates that are available to the page author when creating new pages are determined by the logic defined in Template Availability.

  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. For example, allowedPaths: /content/geometrixx-outdoors/[^/]+(/.*?lang=de)? means that this template is allowed in any path under /content/geometrixx-outdoors.

    chlimage_1-89

Auf dieser Seite