Responsieve onderbrekingspunten

Leer hoe u nieuwe responsieve onderbrekingspunten configureert voor AEM responsieve paginaeditor.

CSS-onderbrekingspunten maken

Maak eerst mediafuncties in de CSS van het AEM responsieve raster waaraan de responsieve AEM site voldoet.

Maak in het bestand /ui.apps/src/main/content/jcr_root/apps/[app name]/clientlibs/clientlib-grid/less/grid.less de onderbrekingspunten die u samen met de mobiele emulator wilt gebruiken. Noteer max-width voor elk onderbrekingspunt, aangezien dit de CSS breekpunten aan de AEM responsieve onderbrekingspunten van de Redacteur van de Pagina in kaart brengt.

De onderbrekingspunten van de sjabloon aanpassen

Open het ui.content/src/main/content/jcr_root/conf/<app name>/settings/wcm/templates/page-content/structure/.content.xml -bestand en werk cq:responsive/breakpoints bij met de nieuwe definities voor onderbrekingspunten. Elk CSS breekpuntzou een overeenkomstige knoop onder breakpoints met zijn width bezit moeten hebben dat aan CSS breekpunt max-width wordt geplaatst.

Emulatoren maken

Er moeten AEM emulators zijn gedefinieerd waarmee auteurs de responsieve weergave kunnen selecteren die u wilt bewerken in de Pagina-editor.

Emulatorknooppunten maken onder /ui.apps/src/main/content/jcr_root/apps/<app name>/emulators

Bijvoorbeeld /ui.apps/src/main/content/jcr_root/apps/wknd-examples/emulators/phone-landscape . Kopieer een referentie-emulatorknooppunt van /libs/wcm/mobile/components/emulators in CRXDE Lite naar en werk de kopie bij om de definitie van het knooppunt te versnellen.

Apparaatgroep maken

Groepeer de mededingers om hen beschikbaar te maken in AEM Redacteur van de Pagina.

Maak een knooppuntstructuur van /apps/settings/mobile/groups/<name of device group> onder /ui.apps/src/main/content/jcr_root .

Maak een .content.xml -bestand in /apps/settings/mobile/groups/<device group name> en definieer
de nieuwe emulators gebruiken code die vergelijkbaar is met de onderstaande code:

De apparaatgroep van de sjabloon bijwerken

Ten slotte wijst u de apparaatgroep weer toe aan de paginasjabloon, zodat de emulators beschikbaar zijn in de Pagina-editor voor pagina's die met deze sjabloon zijn gemaakt.

Open het bestand ui.content/src/main/content/jcr_root/conf/[app name]/settings/wcm/templates/page-content/structure/.content.xml en werk de eigenschap cq:deviceGroups bij om naar de nieuwe mobiele groep te verwijzen (bijvoorbeeld cq:deviceGroups="[mobile/groups/customdevices]" )