Saiba como configurar novos pontos de interrupção responsivos para AEM Editor de página responsivo.
Primeiro, crie pontos de interrupção de mídia no CSS AEM Responsive Grid ao qual o site de AEM responsivo adere.
Em /ui.apps/src/main/content/jcr_root/apps/[app name]/clientlibs/clientlib-grid/less/grid.less
crie seus pontos de interrupção a serem usados junto com o emulador móvel. Anote o max-width
para cada ponto de interrupção, já que isso mapeia os pontos de interrupção de CSS para os pontos de interrupção AEM do Editor de página responsivo.
Abra o ui.content/src/main/content/jcr_root/conf/<app name>/settings/wcm/templates/page-content/structure/.content.xml
arquivo e atualização cq:responsive/breakpoints
com suas novas definições de nó de ponto de interrupção. Cada Ponto de interrupção CSS deve ter um nó correspondente em breakpoints
com width
propriedade definida para o ponto de interrupção CSS max-width
.
AEM emuladores devem ser definidos que permitam aos autores selecionar a exibição responsiva a ser editada no Editor de páginas.
Criar nós de emuladores em /ui.apps/src/main/content/jcr_root/apps/<app name>/emulators
Por exemplo, /ui.apps/src/main/content/jcr_root/apps/wknd-examples/emulators/phone-landscape
. Copiar um nó do emulador de referência de /libs/wcm/mobile/components/emulators
no CRXDE Lite para e atualize a cópia para agilizar a definição do nó.
Agrupe os emuladores em disponibilizá-los no Editor de páginas AEM.
Criar /apps/settings/mobile/groups/<name of device group>
estrutura do nó em /ui.apps/src/main/content/jcr_root
.
Crie um .content.xml
no arquivo /apps/settings/mobile/groups/<device group name>
e defina os novos emuladores usando um código semelhante ao abaixo:
Por fim, mapeie o grupo de dispositivos de volta ao modelo de página para que os emuladores estejam disponíveis no Editor de páginas para páginas criadas a partir desse modelo.
Abra o ui.content/src/main/content/jcr_root/conf/[app name]/settings/wcm/templates/page-content/structure/.content.xml
e atualize o cq:deviceGroups
propriedade para fazer referência ao novo grupo móvel (por exemplo, cq:deviceGroups="[mobile/groups/customdevices]"
)