Responsieve onderbrekingspunten

Laatste update: 2024-01-26
  • Onderwerpen:
  • Page Editor
    Meer informatie over dit onderwerp
  • Gemaakt voor:
  • Intermediate
    Developer

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.

Nieuwe responsieve onderbrekingspunten maken

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.

De responsieve onderbrekingspunten van de sjabloon aanpassen

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.

Nieuwe emulators maken

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.

Nieuwe apparaatgroep maken

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:

Nieuw apparaat maken

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

Op deze pagina