Responsive Breakpoints

Erfahren Sie, wie Sie neue responsive Haltepunkte für AEM responsiven Seiten-Editor konfigurieren.

Erstellen von CSS-Haltepunkten

Erstellen Sie zunächst Medienhaltepunkte in der CSS für AEM responsives Raster, an die die responsive AEM-Site gebunden ist.

In /ui.apps/src/main/content/jcr_root/apps/[app name]/clientlibs/clientlib-grid/less/grid.less erstellen Sie Ihre Haltepunkte, die zusammen mit dem mobilen Emulator verwendet werden sollen. Beachten Sie die max-width für jeden Haltepunkt, da dies die CSS-Haltepunkte den AEM responsiven Seiteneditor-Haltepunkten zuordnet.

Anpassen der Haltepunkte der Vorlage

Öffnen Sie die ui.content/src/main/content/jcr_root/conf/<app name>/settings/wcm/templates/page-content/structure/.content.xml Datei und Aktualisierung cq:responsive/breakpoints mit Ihren neuen Breakpoint-Knotendefinitionen. Jeder CSS-Breakpoint sollte über einen entsprechenden Knoten unter verfügen. breakpoints mit width -Eigenschaft, die auf den CSS-Haltepunkt max-width.

Erstellen von Emulatoren

AEM Emulatoren müssen definiert sein, damit Autoren die responsive Ansicht auswählen können, die im Seiteneditor bearbeitet werden soll.

Erstellen Sie Emulsionsknoten unter /ui.apps/src/main/content/jcr_root/apps/<app name>/emulators

Beispiel: /ui.apps/src/main/content/jcr_root/apps/wknd-examples/emulators/phone-landscape. Kopieren Sie einen Referenzemulatorknoten aus /libs/wcm/mobile/components/emulators in der CRXDE Lite, um die Kopie zu aktualisieren und die Knotendefinition zu beschleunigen.

Gerätegruppe erstellen

Gruppieren Sie die Emulatoren in Bereitstellung im AEM Seiteneditor.

Erstellen /apps/settings/mobile/groups/<name of device group> Knotenstruktur unter /ui.apps/src/main/content/jcr_root.

Erstellen Sie eine .content.xml Datei in /apps/settings/mobile/groups/<device group name> und definieren Sie die neuen Emulatoren mithilfe des Codes ähnlich dem folgenden:

Aktualisieren der Gerätegruppe der Vorlage

Ordnen Sie die Gerätegruppe schließlich wieder der Seitenvorlage zu, damit die Emulatoren im Seiteneditor für Seiten verfügbar sind, die aus dieser Vorlage erstellt wurden.

Öffnen Sie die ui.content/src/main/content/jcr_root/conf/[app name]/settings/wcm/templates/page-content/structure/.content.xml und aktualisieren Sie die cq:deviceGroups -Eigenschaft, um auf die neue mobile Gruppe zu verweisen (z. B. cq:deviceGroups="[mobile/groups/customdevices]")

Ressourcen für Business.Adobe.com