Saiba como configurar novos pontos de interrupção responsivos para o Editor de página responsivo para AEM.
Primeiro, crie pontos de interrupção de mídia no CSS da Grade responsiva AEM que o site AEM responsivo segue.
Entrada /ui.apps/src/main/content/jcr_root/apps/[app name]/clientlibs/clientlib-grid/less/grid.less
crie seus pontos de interrupção para serem usados junto com o emulador móvel. Anote o max-width
para cada ponto de interrupção, pois isso mapeia os pontos de interrupção de CSS para os pontos de interrupção responsivos do Editor de páginas do AEM.
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 as novas definições de nó do ponto de interrupção. Each Ponto de interrupção de CSS deve ter um nó correspondente em breakpoints
com seu width
definido como o do ponto de interrupção de CSS max-width
.
Os emuladores de AEM devem ser definidos para permitir que os autores selecionem a visualizaçã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
em CRXDE Lite para e atualize a definição de nó copiar para expedir.
Agrupar os emuladores em disponibilizá-las 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
.
Criar um .content.xml
arquivo em /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 com base nesse modelo.
Abra o ui.content/src/main/content/jcr_root/conf/[app name]/settings/wcm/templates/page-content/structure/.content.xml
arquivo e atualize o cq:deviceGroups
para fazer referência ao novo grupo móvel (por exemplo, cq:deviceGroups="[mobile/groups/customdevices]"
)