Points d’arrêt réactifs
Découvrez comment configurer de nouveaux points d’arrêt réactifs pour l’éditeur de page réactif AEM.
Créer des points d’arrêt CSS
Tout d’abord, créez des points d’arrêt multimédia dans le fichier CSS à grille réactive AEM auquel le site AEM réactif adhère.
Dans le fichier /ui.apps/src/main/content/jcr_root/apps/[app name]/clientlibs/clientlib-grid/less/grid.less
, créez les points d’arrêt à utiliser avec l’émulateur mobile. Prenez note de la max-width
pour chaque point d’arrêt, car cela mappe les points d’arrêt CSS aux points d’arrêt de l’éditeur de page réactif AEM.
Personnaliser les points d’arrêt du modèle
Ouvrez le fichier ui.content/src/main/content/jcr_root/conf/<app name>/settings/wcm/templates/page-content/structure/.content.xml
et mettez à jour cq:responsive/breakpoints
avec vos nouvelles définitions de nœud de point d’arrêt. Chaque point d’arrêt CSS doit avoir un nœud correspondant sous breakpoints
avec sa propriété width
définie sur la max-width
du point d’arrêt CSS.
Créer des émulateurs
Les émulateurs AEM doivent être définis pour permettre aux auteurs et aux autrices de sélectionner la vue réactive à modifier dans l’éditeur de page.
Créer des nœuds d’émulateurs sous /ui.apps/src/main/content/jcr_root/apps/<app name>/emulators
Par exemple, /ui.apps/src/main/content/jcr_root/apps/wknd-examples/emulators/phone-landscape
. Copiez un nœud d’émulateur de référence à partir de /libs/wcm/mobile/components/emulators
dans CRXDE Lite et mettez à jour la copie pour accélérer la définition du nœud.
Créer un groupe d’appareils
Regroupez les émulateurs afin de les rendre disponibles dans l’éditeur de page AEM.
Créez la structure de nœud /apps/settings/mobile/groups/<name of device group>
sous /ui.apps/src/main/content/jcr_root
.
Créez un fichier .content.xml
dans /apps/settings/mobile/groups/<device group name>
et définissez les nouveaux émulateurs à l’aide d’un code similaire à celui ci-dessous :
Mettre à jour le groupe d’appareils du modèle
Enfin, réassociez le groupe d’appareils au modèle de page afin que les émulateurs soient disponibles dans l’éditeur de page pour les pages créées à partir de ce modèle.
Ouvrez le fichier ui.content/src/main/content/jcr_root/conf/[app name]/settings/wcm/templates/page-content/structure/.content.xml
et mettez à jour la propriété cq:deviceGroups
pour référencer le nouveau groupe mobile (par exemple, cq:deviceGroups="[mobile/groups/customdevices]"
).