Punti di interruzione reattivi

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

Creare punti di interruzione CSS

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.

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 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.

Creare emulatori

È 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.

Crea gruppo di dispositivi

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:

Aggiornare il gruppo di dispositivi del modello

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]")

Risorse Business.Adobe.com