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.
Bearbeitbare Vorlagen sind auch verfügbar und sind der empfohlene Typ von Vorlagen für die größte Flexibilität und die neuesten Funktionen.
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[] | Pfad einer Vorlage, die dieser Vorlage untergeordnet sein darf. |
allowedParents | Zeichenfolge[] | Pfad einer Vorlage, die dieser Vorlage übergeordnet sein darf. |
allowedPaths | Zeichenfolge[] | Pfad einer Seite, die auf dieser Vorlage basieren darf. |
jcr:created | Datum | Erstellungsdatum der Vorlage. |
jcr:description | Zeichenfolge | Beschreibung der Vorlage. |
jcr:title | Zeichenfolge | Titel der Vorlage. |
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.
Um eine Seite zu erstellen, muss die Vorlage kopiert werden (Knotenbaum /apps/<myapp>/template/<mytemplate>
) an die entsprechende Position im Site-Baum: Dies geschieht, wenn eine Seite mit dem Websites Registerkarte.
Ü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).
Zwei Aspekte müssen berücksichtigt werden:
Eine Vorlage wird unter einem Knoten des Typs cq:Template erstellt.
Verschiedene Eigenschaften können festgelegt werden, insbesondere:
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.
Mit dieser Komponente wird die Struktur und das Design des Inhalts definiert, wenn eine neue Seite erstellt wird.
Mit Vorlagen werden Seiten des Typs cq:Page
erstellt (wie bereits erwähnt, ist eine Seite eine besondere Art der Komponente). Jede AEM Seite hat einen strukturierten Knoten jcr:content
. Dies:
sling:resourceType
auf, die auf die Komponente verweist, welche die Sling-Skripte zum Rendern des Inhalts enthältAEM 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 | Speicherort | Zweck |
---|---|---|---|
Startseite | homepage | geometrixx | Die Vorlage für die Geometrixx-Homepage. |
Inhalts-Seite | contentpage | geometrixx | Die Vorlage für die Geometrixx-Inhaltsseite. |
Eine Liste aller Vorlagen im Repository können Sie mit dem folgenden Verfahren anzeigen:
Öffnen Sie in CRXDE Lite das Menü Tools und klicken Sie auf Abfrage.
In der Registerkarte „Abfrage“
Wählen Sie als Typ die Option XPath.
Geben Sie in das Feld Abfrage folgende Zeichenfolge ein:
//element(*, cq:Template)
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.
Um eine vorhandene Vorlage für Ihre Website zu aktivieren und sie im Seite erstellen Dialogfeld beim Erstellen einer Seite direkt unter Websites von Websites -Konsole, setzen Sie die Eigenschaft allowedPaths des Vorlagenknotens auf: /content(/.*?lang=de)?
Wenn Stile in der Benutzeroberfläche definiert werden mithilfe von Designmodus, wird das Design am genauen Pfad des Inhaltsknotens persistiert, für den der Stil definiert wird.
Adobe empfiehlt nur die Anwendung von Designs durch Designmodus.
Das Ändern von Designs in CRX DE ist beispielsweise nicht ratsam und die Anwendung derartiger Designs kann von erwarteten Verhaltensweisen abweichen.
Wenn Designs nur im Designmodus angewendet werden, dann folgen die folgenden Abschnitte: Designpfad-Auflösung, Entscheidungsbaumund die Beispiel nicht anwendbar sind.
In diesem Abschnitt wird das Auflösungsverhalten von Designpfaden ab AEM 6.4.2.0 beschrieben.
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 es in den letzten beiden Fällen mehr als einen geeigneten Entwurf gibt, verwenden Sie den Entwurf, der dem Inhaltsknoten am nächsten ist.
Dies ist eine grafische Darstellung der Designpfad-Auflösung Logik.
Betrachten Sie eine einfache Inhaltsstruktur wie folgt, bei der ein Design auf einen der Knoten angewendet werden könnte:
/root/branch/leaf
In der folgenden Tabelle wird beschrieben, wie AEM einen Entwurf auswählen.
Suchen nach Design für |
Designs vorhanden für |
Ausgewähltes Design |
Kommentar |
leaf
|
|
leaf |
Die genaueste Übereinstimmung wird immer gewählt. |
leaf |
|
branch |
Kehren Sie zurück zum nächstgelegenen Spiel unten im Baum. |
leaf |
root |
root |
Wenn alles andere fehlschlägt, nehmen Sie, was übrig ist. |
branch |
branch |
branch |
|
branch |
|
branch |
|
branch |
|
branch |
|
branch |
|
root |
Wenn es keine exakte Übereinstimmung gibt, nehmen Sie die untere im Baum. Es wird davon ausgegangen, dass dies immer anwendbar sein wird, aber weiter oben im Baum kann der Baum zu spezifisch sein. |
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.
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):
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.
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.
Ä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.
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(/.*)?
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.
Aktualisieren Sie die jcr:title und jcr:description der neuen Komponente.
Ersetzen Sie die Datei thumbnail.png, wenn Sie möchten, dass eine neue Miniaturansicht in der Vorlagen-Auswahlliste angezeigt wird (Größe: 128x98 Pixel).
Aktualisieren Sie die sling:resourceType des Knotens jcr:content der Vorlage, um auf die neue Komponente zu verweisen
Nehmen Sie alle weiteren Änderungen an der Funktionalität oder am Design der Vorlage und/oder der zugrunde liegenden Komponente vor.
Ä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.
Die Client-Bibliothek des Editors setzt voraus, dass der Namespace cq.shared
in den Inhaltsseiten vorhanden ist. Wenn er nicht vorhanden ist, wird der JavaScript-Fehler Uncaught TypeError: Cannot read property 'shared' of undefined
gemeldet.
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.
Dieses Beispiel erklärt, wie Sie zulassen können, dass eine Vorlage für bestimmte Inhaltspfade genutzt werden kann. Die Vorlagen, die dem Seitenautor beim Erstellen neuer Seiten zur Verfügung stehen, werden durch die Logik bestimmt, die in Formularverfügbarkeit.
Navigieren Sie in CRXDE Lite zu der Vorlage, die Sie für Ihre Seite verwenden möchten, z. B. zur Newsletter-Vorlage.
Ändern Sie die Eigenschaft allowedPaths
und andere Eigenschaften, die für die Vorlagenverfügbarkeit genutzt werden. Beispiel: allowedPaths
: /content/geometrixx-outdoors/[^/]+(/.*)?
bedeutet, dass diese Vorlage in jedem Pfad unter /content/geometrixx-outdoors
.