Rendering von adaptiven Vorlagen adaptive-template-rendering

Last update: Sun Mar 31 2024 00:00:00 GMT+0000 (Coordinated Universal Time)

Das Rendern von adaptiven Vorlagen bietet eine Möglichkeit, eine Seite mit Varianten zu verwalten. Diese Funktion half ursprünglich bei der Bereitstellung verschiedener HTML-Ausgaben für Mobilgeräte (z. B. Feature Phones im Gegensatz zu Smartphones). Jetzt ist sie nützlich, wenn Erlebnisse für verschiedene Geräte bereitgestellt werden müssen, für die eine andere Markup- oder HTML-Ausgabe erforderlich ist.

Übersicht overview

Vorlagen werden auf einem responsiven Raster aufgebaut. Seiten, die basierend auf diesen Vorlagen erstellt wurden, sind vollständig responsiv und passen sich automatisch an das Ansichtsfenster des Client-Geräts an. Über die Emulator-Symbolleiste im Seiten-Editor können Autoren Layouts für bestimmte Geräte festlegen.

Es ist auch möglich, Vorlagen zum Unterstützen des adaptiven Renderns einzurichten. Wenn Gerätegruppen ordnungsgemäß konfiguriert sind, wird die Seite mit einem anderen Selektor in der URL gerendert, wenn ein Gerät im Emulatormodus ausgewählt wird. Mit einem Selektor kann ein bestimmtes Seiten-Rendering direkt über die URL aufgerufen werden.

Beachten Sie beim Einrichten Ihrer Gerätegruppen Folgendes:

Jedes Gerät muss mindestens einer Gerätegruppe angehören.
Ein Gerät kann mehreren Gerätegruppen angehören.
Da Geräte mehreren Gerätegruppen angehören können, können Selektoren kombiniert werden.
Die Kombination von Selektoren wird von oben nach unten ausgewertet, während sie im Repository beibehalten werden.

NOTE

Die Gerätegruppe „Responsive Geräte“ verfügt nie über einen Selektor, da davon ausgegangen wird, dass Geräte, die responsive Designs unterstützen, kein adaptives Layout benötigen.

Konfiguration configuration

Selektoren für das adaptive Rendern können für bereits vorhandene Gerätegruppen konfiguriert werden oder für Gruppen, die Sie selbst erstellt haben.

In diesem Beispiel konfigurieren Sie die bereits vorhandene Gerätegruppe Smartphones, sodass sie als Teil der Vorlage Erlebnisseite in We.Retail einen Selektor für das adaptive Rendern aufweist.

Bearbeiten Sie die Gerätegruppe, für die ein adaptiver Selektor benötigt wird, unter http://localhost:4502/miscadmin#/etc/mobile/groups.

Aktivieren Sie die Option Emulator deaktivieren und speichern Sie diese Einstellung.
Der Selektor steht für BlackBerry® und iPhone 4 zur Verfügung, sofern in den folgenden Schritten die Gerätegruppe Smartphone zur Vorlage und zu den Seitenstrukturen hinzugefügt wird.
Lassen Sie über CRXDE Lite zu, dass die Gerätegruppe in der Vorlage genutzt wird, indem Sie sie zur mehrwertigen Zeichenfolgen-Eigenschaft cq:deviceGroups in der Struktur der Vorlage hinzufügen.

/conf/<your-site>/settings/wcm/templates/<your-template>/structure/jcr:content

Beispiel: Sie möchten die Smartphone-Gerätegruppe hinzufügen:

/conf/we-retail/settings/wcm/templates/experience-page/structure/jcr:content
Lassen Sie über CRXDE Lite zu, dass die Gerätegruppe auf Ihrer Website genutzt wird, indem Sie sie zur mehrwertigen Zeichenfolgen-Eigenschaft cq:deviceGroups in der Struktur der Website hinzufügen.

/content/<your-site>/jcr:content

Beispiel: Sie möchten die Gerätegruppe Smartphone zulassen:

/content/we-retail/jcr:content

Wenn Sie jetzt den Emulator im Seiten-Editor verwenden (z. B. beim Bearbeiten des Layouts) und ein Gerät der konfigurierten Gerätegruppe auswählen, wird die Seite mit einem Selektor als Teil der URL gerendert.

Wenn Sie im vorliegenden Beispiel eine Seite bearbeiten, die auf der Vorlage Erlebnisseite basiert, und im Emulator „iPhone 4“ auswählen, wird die Seite so gerendert, dass der Selektor als arctic-surfing-in-lofoten.smart.html und nicht als arctic-surfing-in-lofoten.html enthalten ist.

Die Seite lässt sich auch direkt über diesen Selektor auswählen.

chlimage_1-161

recommendation-more-help

19ffd973-7af2-44d0-84b5-d547b0dffee2