Configurar o contêiner de layout e o modo de layout configuring-layout-container-and-layout-mode

Layout responsivo é um mecanismo para realizar web design responsivo. Isso permite que o autor de conteúdo crie páginas da Web com um layout e dimensões dependentes dos dispositivos que seus usuários usam.

O AEM permite um layout responsivo para suas páginas usando uma combinação de mecanismos:

  • Contêiner de layout - Esse componente fornece um sistema de parágrafo de grade que permite adicionar e posicionar componentes em uma grade responsiva.

    • Ela pode ser usada como o parsys padrão da página e/ou disponibilizada aos autores no navegador de componentes.

    • O padrão Contêiner de layout o componente é definido em /libs/wcm/foundation/components/responsivegrid.

    • É possível definir contêineres de layout:

      • Como um componente que o usuário pode adicionar a uma página.
      • Como o parsys padrão da página.
      • Como componente e parsys padrão.
        • Você pode ter o contêiner de layout como padrão para a página, permitindo que o usuário adicione mais contêineres de layout aqui; por exemplo, para obter o controle da coluna.
  • Modo de layout - Depois que o container de layout é posicionado na página, você pode usar o Layout para posicionar o conteúdo na grade responsiva.

  • Emulador - Isso permite criar e editar sites responsivos que reorganizam o layout de acordo com o tamanho do dispositivo ou da janela, redimensionando componentes interativamente. Usuários podem ver como o conteúdo é renderizado usando o emulador.

Com esses mecanismos de grade responsivos, você pode:

  • Use pontos de interrupção (que indicam o agrupamento de dispositivos) para definir comportamentos de conteúdo diferentes com base no layout do dispositivo.
  • Ocultar componentes com base no grupo de dispositivos (defina em qual ponto de interrupção um componente será ocultado).
  • Usar o alinhamento com a grade (colocar componentes na grade, redimensionar conforme necessário, definir quando eles devem ser recolhidos/refluir para ficarem lado a lado ou acima/abaixo).
  • Executar o controle da coluna.
NOTE
Ao criar um site a partir da Arquétipo de projeto ou do Modelo de site padrão, o layout responsivo é geralmente configurado. Caso contrário, você deverá ativar o componente de Contêiner de layout para suas páginas.

Ativar o emulador enabling-emulator

A variável Arquétipo de projeto e a variável Modelo de site padrão já estão habilitados para usar o emulador. Se você desenvolveu seu próprio conteúdo não baseado nos Componentes principais ou no arquétipo, consulte o documento Design responsivo para obter detalhes sobre como desenvolver seus componentes enquanto aproveita esses recursos.

Ativar modo de layout para o site activate-layout-mode-for-your-site

Layout permite usar o emulador para ajustar o layout do conteúdo para dispositivos diferentes. O site de amostra do WKND já está habilitado para Layout modo. Siga estas etapas para ativar seu próprio site.

Configurar pontos de interrupção configure-breakpoints

Os pontos de interrupção são essenciais para um design responsivo e definem como e quando o conteúdo é ajustado ao dispositivo de destino. No entanto, tenha cuidado, pois cada ponto de interrupção introduzido gerará trabalho adicional para os autores acomodarem o conteúdo. Muitas vezes, dois pontos de interrupção podem ser suficientes, incluindo o ponto de interrupção padrão que está sempre lá. O Adobe recomenda não criar mais de três pontos de interrupção, incluindo o padrão, ou seja, não mais de dois nós abaixo cq:responsive/breakpoint.

  • Os pontos de interrupção têm um título e uma largura:

    • O título descreve o agrupamento genérico de dispositivos, com orientação se necessário.
      • Por exemplo, phone, tablet
    • A largura define a largura máxima em pixels para esse agrupamento de dispositivo genérico.
      • Por exemplo, se o telefone do ponto de interrupção tiver uma largura de 768, isso indicará a largura máxima do layout usado para um dispositivo telefônico.
  • Os pontos de interrupção podem ser definidos:

    • No modelo de página, de onde as configurações são copiadas para qualquer página criada com esse modelo.
    • No nó da página, de onde as configurações são herdadas por qualquer página secundária.
  • Os pontos de interrupção são visíveis como marcadores na parte superior do editor de página quando você está usando o emulador.

  • Os pontos de interrupção são herdados da hierarquia do nó principal e podem ser substituídos à vontade.

  • Há um ponto de interrupção padrão (pronto para uso) que abrange tudo o que está acima do último ponto de interrupção configurado.

  • Os pontos de interrupção podem ser definidos usando CRXDE Lite ou XML.

Os pontos de interrupção devem ser considerados para projetos novos e existentes.

  • Se estiver configurando um novo projeto, você deve adicionar pontos de interrupção aos modelos.

  • Se você estiver migrando um projeto existente (com conteúdo existente), será necessário:

    • Adicione pontos de interrupção aos modelos.
    • Adicionar os mesmos pontos de interrupção às páginas existentes.

Por causa da herança, você só precisa fazer isso para a página raiz do seu conteúdo.

Configurar pontos de interrupção usando o CRXDE Lite configuring-breakpoints-using-crxde-lite

  1. Usando o CRXDE Lite, navegue até:

    • A definição do modelo.
    • A variável jcr:content da sua página.
  2. Em jcr:content crie o nó:

    • Nome: cq:responsive
    • Tipo: nt:unstructured
  3. Nesta seção, crie o nó:

    • Nome: breakpoints
    • Tipo: nt:unstructured
  4. No nó pontos de interrupção, é possível criar qualquer número de pontos de interrupção. Cada definição é um único nó com as seguintes propriedades:

    • Nome: <descriptive name>
    • Tipo: nt:unstructured
    • Título: String <descriptive title seen in Emulator>
    • Largura Decimal <value of breakpoint>

Configurar pontos de interrupção usando XML configuring-breakpoints-using-xml

Os pontos de interrupção estão localizados dentro do <jcr:content> seção do .context.html na pasta de modelo (ou conteúdo) apropriada.

Um exemplo de definição:

<cq:responsive jcr:primaryType="nt:unstructured">
  <breakpoints jcr:primaryType="nt:unstructured">
    <phone jcr:primaryType="nt:unstructured" title="{String}Phone" width="{Decimal}768"/>
    <tablet jcr:primaryType="nt:unstructured" title="{String}Tablet" width="{Decimal}1200"/>
  </breakpoints>
</cq:responsive>

Ativar o redimensionamento de componentes para a página enable-component-resizing-for-the-page

Redimensionamento de componentes no Layout O modo é uma parte importante do design responsivo, que pode ser usado no site de amostra WKND. Siga estas etapas para ativar seu próprio site.

Definir contêiner de layout como parsys principal set-layout-container-as-main-parsys

Para definir o parsys principal da página para ser um contêiner de layout, defina o parsys como:

wcm/foundation/components/responsivegrid

Em:

  • Componente da página
  • Modelo de página (para uso futuro)

Os dois exemplos a seguir ilustram a definição:

  • HTL:

    code language-xml
    <sly data-sly-resource="${'par' @ resourceType='wcm/foundation/components/responsivegrid'}/>
    
  • JSP:

    code language-xml
    <cq:include path="par" resourceType="wcm/foundation/components/responsivegrid" />
    

Incluir o CSS responsivo include-the-responsive-css

CSS para pontos de interrupção usando MENOS css-for-breakpoints-using-less

O AEM usa MENOS para gerar partes do CSS necessário, que precisam ser incluídas em seus projetos.

Você deve criar um biblioteca do cliente para fornecer configurações adicionais e chamadas de função. A seguinte extração MENOS é um exemplo do mínimo que você deve adicionar ao seu projeto:

@import (once) "/libs/wcm/foundation/clientlibs/grid/grid_base.less";

/* maximum amount of grid cells to be provided */
@max_col: 12;

/* default breakpoint */
.aem-Grid {
  .generate-grid(default, @max_col);
}

/* phone breakpoint */
@media (max-width: 768px) {
  .aem-Grid {
    .generate-grid(phone, @max_col);
  }
}

/* tablet breakpoint */
@media (min-width: 769px) and (max-width: 1200px) {
  .aem-Grid {
    .generate-grid(tablet, @max_col);
  }
}

A definição da grade base pode ser encontrada em:

/libs/wcm/foundation/clientlibs/grid/grid_base.less

Considerações sobre estilo styling-considerations

Os componentes mantidos em um contêiner responsivo são redimensionados (juntamente com seus respectivos elementos DOM de HTML) de acordo com o tamanho da grade responsiva. Portanto, nessas circunstâncias, é recomendável evitar (ou atualizar) definições de elementos DOM de largura fixa (contidos).

Por exemplo:

  • Antes:

    • width=100px
  • Depois:

    • max-width=100px

Conformidade com redimensionamento e imagem adaptável resizing-and-adaptive-image-compliance

Qualquer redimensionamento de um componente na grade acionará os seguintes ouvintes, conforme apropriado:

  • beforeedit
  • beforechildedit
  • afteredit
  • afterchildedit

Para redimensionar e atualizar corretamente o conteúdo de uma imagem adaptável incluída em uma grade responsiva, é necessário adicionar um afterEdit definir como REFRESH_PAGE listener na variável EditConfig arquivo de cada componente contido.

Por exemplo:

<cq:listeners jcr:primaryType="cq:EditListenersConfig" afteredit="REFRESH_PAGE" />

O mecanismo de imagem adaptável é disponibilizado por meio de um script que controla a seleção da imagem correta para o tamanho atual da janela. Ela é ativada depois que o DOM está pronto ou ao receber um evento dedicado. Atualmente, a página deve ser atualizada para refletir corretamente o resultado da ação do usuário.

CAUTION
As clientlibs de folha de estilos personalizadas devem ser carregadas como parte do cabeçalho para que funcionem corretamente no autor e na publicação.

Ativar o componente de Contêiner de layout para a página enable-the-layout-container-component-for-page

Para um layout responsivo eficaz, o autor de conteúdo deve ser capaz de arrastar instâncias do componente Contêiner de layout para a página. Isso já está habilitado para o site de exemplo WKND. Siga estas etapas para ativar seu próprio site.

Ativar o componente de Contêiner de layout para edição de página enable-the-layout-container-component-for-page-editing

Para permitir que os autores adicionem outras grades responsivas às páginas de conteúdo, é necessário ativar o componente Contêiner de layout para a página. Você pode fazer isso usando:

  • Por meio do ambiente do autor - Editar seus modelos de página para ativar o Contêiner de layout de uma página.
  • Definição de componente - Utilização allowedComponent ou uma inclusão estática ao definir o componente.

Configurar a grade do contêiner de layout configure-the-grid-of-the-layout-container

Você pode configurar o número de colunas disponíveis para cada instância específica do container de layout editando seus modelos de página.

recommendation-more-help
fbcff2a9-b6fe-4574-b04a-21e75df764ab