Scopri come configurare nuovi punti di interruzione reattivi per l’Editor pagina reattivo per AEM.
Innanzitutto, crea punti di interruzione multimediali nel CSS della griglia reattiva dell’AEM a cui aderisce il sito dell’AEM reattivo.
In entrata /ui.apps/src/main/content/jcr_root/apps/[app name]/clientlibs/clientlib-grid/less/grid.less
creare i punti di interruzione da utilizzare insieme all'emulatore mobile. Prendi nota di max-width
per ogni punto di interruzione, poiché questo mappa i punti di interruzione CSS ai punti di interruzione dell’Editor pagina reattivo dell’AEM.
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 di punto di interruzione. Ogni Punto di interruzione CSS deve avere un nodo corrispondente in breakpoints
con i relativi width
proprietà impostata sul punto di interruzione CSS max-width
.
È necessario definire gli emulatori AEM che consentano agli autori di selezionare la vista reattiva da modificare nell’Editor pagina.
Creare nodi di emulatori in /ui.apps/src/main/content/jcr_root/apps/<app name>/emulators
Ad esempio, /ui.apps/src/main/content/jcr_root/apps/wknd-examples/emulators/phone-landscape
. Copiare un nodo emulatore di riferimento da /libs/wcm/mobile/components/emulators
in CRXDE Lite per aggiornare la copia e velocizzare la definizione del nodo.
Raggruppa gli emulatori in rendili disponibili nell’Editor pagina per AEM.
Crea /apps/settings/mobile/groups/<name of device group>
struttura dei nodi in /ui.apps/src/main/content/jcr_root
.
Creare un .content.xml
file in /apps/settings/mobile/groups/<device group name>
e definisci i nuovi emulatori utilizzando un codice simile a quello seguente:
Infine, mappa nuovamente il gruppo di dispositivi sul modello della 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
file e aggiorna il cq:deviceGroups
proprietà per fare riferimento al nuovo gruppo mobile (ad esempio, cq:deviceGroups="[mobile/groups/customdevices]"
)