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.

In /ui.apps/src/main/content/jcr_root/apps/[app name]/clientlibs/clientlib-grid/less/grid.less , maakt u de onderbrekingspunten die u samen met de mobiele emulator wilt gebruiken. Noteer de 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 de ui.content/src/main/content/jcr_root/conf/<app name>/settings/wcm/templates/page-content/structure/.content.xml bestand en update cq:responsive/breakpoints met uw nieuwe definities van breekpuntknooppunten. Elk CSS-breekpunt moet een corresponderend knooppunt hebben onder breakpoints met width eigenschap ingesteld op het CSS-onderbrekingspunt max-width.

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. Een referentie-emulatorknooppunt kopiëren uit /libs/wcm/mobile/components/emulators in CRXDE Lite aan en werk het exemplaar bij om knoopdefinitie te versnellen.

Apparaatgroep maken

Emulatoren groeperen naar ze beschikbaar stellen in AEM paginaeditor.

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

Een .content.xml bestand in /apps/settings/mobile/groups/<device group name> en definieer de nieuwe emulators met 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 de ui.content/src/main/content/jcr_root/conf/[app name]/settings/wcm/templates/page-content/structure/.content.xml bestand en werk de cq:deviceGroups eigenschap om te verwijzen naar de nieuwe mobiele groep (bijvoorbeeld cq:deviceGroups="[mobile/groups/customdevices]")

Business.Adobe.com-bronnen