Pontos de interrupção responsivos

Saiba como configurar novos pontos de interrupção responsivos para o Editor de página responsivo para AEM.

Criar pontos de interrupção de CSS

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.

Personalizar os pontos de interrupção do modelo

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.

Criar emuladores

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.

Criar grupo de dispositivos

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:

Atualizar o grupo de dispositivos do modelo

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