Punti di interruzione reattivi

Scopri come configurare nuovi punti di interruzione reattivi per AEM Editor pagina reattivo.

Creare punti di interruzione CSS

Innanzitutto, crea punti di interruzione multimediali nel CSS AEM griglia reattiva a cui il sito AEM reattivo aderisce.

In /ui.apps/src/main/content/jcr_root/apps/[app name]/clientlibs/clientlib-grid/less/grid.less crea i punti di interruzione da utilizzare insieme all’emulatore mobile. Prendi nota del max-width per ogni punto di interruzione, in quanto questo mappa i punti di interruzione CSS ai punti di interruzione AEM dell’Editor pagina reattivo.

Personalizzare i punti di interruzione del modello

Apri ui.content/src/main/content/jcr_root/conf/<app name>/settings/wcm/templates/page-content/structure/.content.xml file e aggiornamento cq:responsive/breakpoints con le nuove definizioni dei nodi punto di interruzione. Ogni Punto di interruzione CSS deve avere un nodo corrispondente sotto breakpoints con width impostato sul punto di interruzione CSS max-width.

Creare emulatori

È necessario definire AEM emulatori che consentano agli autori di selezionare la visualizzazione reattiva da modificare nell’Editor pagina.

Crea nodi emulatori sotto /ui.apps/src/main/content/jcr_root/apps/<app name>/emulators

Esempio, /ui.apps/src/main/content/jcr_root/apps/wknd-examples/emulators/phone-landscape. Copia un nodo emulatore di riferimento da /libs/wcm/mobile/components/emulators in CRXDE Lite e aggiorna la copia per accelerare la definizione del nodo.

Crea gruppo di dispositivi

Raggruppa gli emulatori in renderli disponibili in AEM Editor pagina.

Crea /apps/settings/mobile/groups/<name of device group> struttura del nodo sotto /ui.apps/src/main/content/jcr_root.

Crea un .content.xml in /apps/settings/mobile/groups/<device group name> e definisci i nuovi emulatori utilizzando un codice simile a quello riportato di seguito:

Aggiorna il gruppo di dispositivi del modello

Infine, mappa il gruppo di dispositivi nuovamente al modello di pagina in modo che gli emulatori siano disponibili nell’Editor pagina per le pagine create da questo modello.

Apri ui.content/src/main/content/jcr_root/conf/[app name]/settings/wcm/templates/page-content/structure/.content.xml e aggiorna il cq:deviceGroups per fare riferimento al nuovo gruppo mobile (ad esempio, cq:deviceGroups="[mobile/groups/customdevices]")

Risorse Business.Adobe.com