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