Rendering von adaptiven Vorlagen

Das Rendering von adaptiven Vorlagen bietet eine Möglichkeit, eine Seite mit Variationen zu verwalten. Ursprünglich sollte diese Funktion verschiedene HTML-Ausgaben für mobile Geräte bereitstellen (z. B. für Feature- und für Smartphones). Sie ist auch dann nützlich, wenn Erlebnisse für verschiedene Geräte bereitgestellt werden sollen, die unterschiedliche Markup- oder HTML-Ausgaben erfordern.

Überblick

Vorlagen werden im Allgemeinen 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.

Sie können auch Vorlagen einrichten, um das adaptive Rendering zu unterstützen. Wenn Gerätegruppen korrekt 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 lässt sich ein bestimmtes Seiten-Rendering direkt über die URL aufrufen.

Beachten Sie beim Einrichten der Gerätegruppen Folgendes:

  • Jedes Gerät muss zu mindestens einer Gerätegruppe gehören.
  • Ein Gerät kann zu mehreren Gerätegruppen gehören.
  • Da Geräte zu mehreren Gerätegruppen gehören können, können Selektoren auch kombiniert werden.
  • Die Kombination von Selektoren wird von oben nach unten bewertet, da sie im Repository gespeichert werden.
HINWEIS

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

Konfiguration

Selektoren für das adaptive Rendering können Sie für vorhandene Gerätegruppen oder für selbst erstellte Gruppen konfigurieren.

Bei diesem Beispiel konfigurieren wir die vorhandene Gerätegruppe Smartphones so, dass sie einen Selektor für das adaptive Rendering als Teil der Vorlage Erlebnisseite in We.Retail aufweisen.

  1. Bearbeiten Sie die Gerätegruppe, die einen adaptiven Selektor in http://localhost:4502/miscadmin#/etc/mobile/groups erfordert

    Aktivieren Sie die Option Emulator deaktivieren und speichern Sie diese Einstellung.

    chlimage_1-157

  2. Der Selektor steht für Blackberry und iPhone 4 zur Verfügung, vorausgesetzt, die Gerätegruppe Smartphones wird, wie in den folgenden Schritten erläutert, zur Vorlage und zu den Seitenstrukturen hinzugefügt.

    chlimage_1-158

  3. Lassen Sie über CRXDE Lite zu, dass die Gerätegruppe bei der Vorlage genutzt wird. Fügen Sie dazu diese Gruppe zu der String-Eigenschaft mit mehreren Werten cq:deviceGroups in der Struktur der Vorlage hinzu.

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

    Beispiel: Die Smartphones-Gerätegruppe soll hinzugefügt werden:

    /conf/we-retail/settings/wcm/templates/experience-page/structure/jcr:content

    chlimage_1-159

  4. Lassen Sie die Gerätegruppe mithilfe von CRX DE Lite auf Ihrer Site zu, indem Sie sie der Zeichenfolgeneigenschaft mit mehreren Werten cq:deviceGroups in der Struktur Ihrer Site hinzufügen.

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

    Beispiel: Die Gerätegruppe Smartphones soll zugelassen werden:

    /content/we-retail/jcr:content

    chlimage_1-160

Wenn Sie nun 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.

In unserem Beispiel wird die Seite beim Bearbeiten einer Seite, die auf der Vorlage Erlebnisseite basiert, und beim Auswählen von iPhone 4 im Emulator mit der Auswahl als arctic-surfing-in-lofoten.smart.html anstelle von arctic-surfing-in-lofoten.html gerendert.

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

chlimage_1-161

Auf dieser Seite

Adobe Summit Banner

A virtual event April 27-28.

Expand your skills and get inspired.

Register for free
Adobe Summit Banner

A virtual event April 27-28.

Expand your skills and get inspired.

Register for free
Adobe Maker Awards Banner

Time to shine!

Apply now for the 2021 Adobe Experience Maker Awards.

Apply now
Adobe Maker Awards Banner

Time to shine!

Apply now for the 2021 Adobe Experience Maker Awards.

Apply now