Scopri come configurare nuovi punti di interruzione reattivi per AEM Editor pagina reattivo.
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.
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
.
È 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.
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:
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]"
)