Responsiva brytpunkter
Lär dig hur du konfigurerar nya responsiva brytpunkter för AEM responsiv sidredigerare.
Skapa CSS-brytpunkter
Skapa först brytpunkter för media i CSS för AEM responsiva stödraster som den responsiva AEM följer.
Skapa brytpunkter som ska användas tillsammans med mobilemulatorn i filen /ui.apps/src/main/content/jcr_root/apps/[app name]/clientlibs/clientlib-grid/less/grid.less. Notera max-width för varje brytpunkt, eftersom detta mappar CSS-brytpunkterna till de AEM responsiva sidredigeringsbrytpunkterna.
Anpassa mallens brytpunkter
Öppna filen ui.content/src/main/content/jcr_root/conf/<app name>/settings/wcm/templates/page-content/structure/.content.xml och uppdatera cq:responsive/breakpoints med de nya brytpunktsnoddefinitionerna. Varje CSS-brytpunktska ha en motsvarande nod under breakpoints med egenskapen width inställd på CSS-brytpunktens max-width.
Skapa emulatorer
AEM måste definieras så att författare kan välja den responsiva vyn som ska redigeras i sidredigeraren.
Skapa emulatornoder under /ui.apps/src/main/content/jcr_root/apps/<app name>/emulators
Exempel: /ui.apps/src/main/content/jcr_root/apps/wknd-examples/emulators/phone-landscape. Kopiera en referensemulatornod från /libs/wcm/mobile/components/emulators i CRXDE Lite till och uppdatera kopian för att underlätta noddefinitionen.
Skapa enhetsgrupp
Gruppera emulatorerna för att göra dem tillgängliga AEM sidredigeraren.
Skapa nodstrukturen /apps/settings/mobile/groups/<name of device group> under /ui.apps/src/main/content/jcr_root.
Skapa en .content.xml-fil i /apps/settings/mobile/groups/<device group name> och definiera
de nya emulatorerna med kod som liknar den nedan:
Uppdatera mallens enhetsgrupp
Koppla slutligen enhetsgruppen tillbaka till sidmallen så att emulatorerna är tillgängliga i sidredigeraren för sidor som skapas från den här mallen.
Öppna filen ui.content/src/main/content/jcr_root/conf/[app name]/settings/wcm/templates/page-content/structure/.content.xml och uppdatera egenskapen cq:deviceGroups så att den refererar till den nya mobilgruppen (till exempel cq:deviceGroups="[mobile/groups/customdevices]")