Renderização adaptável do modelo adaptive-template-rendering

A renderização do modelo adaptável fornece uma maneira de gerenciar uma página com variações. Originalmente útil para fornecer várias saídas de HTML para dispositivos móveis (por exemplo, telefone de recurso versus smartphone), esse recurso é útil quando as experiências precisam ser entregues a vários dispositivos que precisam de diferentes saídas de marcação ou HTML.

Visão geral overview

Os modelos são criados em torno de uma grade responsiva, e as páginas criadas com base nesses modelos são totalmente responsivas, ajustando-se automaticamente para a janela de visualização do dispositivo cliente. Usando a barra de ferramentas do Emulador no editor de páginas, os autores podem direcionar layouts para dispositivos específicos.

Também é possível configurar modelos para suportar a renderização adaptável. Quando os grupos de dispositivos são configurados corretamente, a página é renderizada com um seletor diferente no URL ao selecionar um dispositivo no modo emulador. Usando um seletor, uma renderização de página específica pode ser chamada diretamente pelo URL.

Lembre-se ao configurar seus grupos de dispositivos:

  • Cada dispositivo deve estar em pelo menos um grupo de dispositivos.
  • Um dispositivo pode estar em vários grupos de dispositivos.
  • Como os dispositivos podem estar em vários grupos de dispositivos, os seletores podem ser combinados.
  • A combinação de seletores é avaliada de cima para baixo, pois eles são mantidos no repositório.
NOTE
O grupo de dispositivos **Dispositivos responsivos nunca têm um seletor porque presume-se que os dispositivos reconhecidos como compatíveis com design responsivo não precisem de um layout adaptável

Configuração configuration

Os seletores de renderização adaptável podem ser configurados para grupos de dispositivos existentes ou para grupos que você mesmo criou.

Neste exemplo, você vai configurar o grupo de dispositivos existente Smart Phones para ter um seletor de renderização adaptável como parte do modelo Página da experiência no We.Retail.

  1. Editar o grupo de dispositivos que requer um seletor adaptável em http://localhost:4502/miscadmin#/etc/mobile/groups

    Defina a opção Desabilitar emulador e salve.

    chlimage_1-157

  2. O seletor está disponível para o BlackBerry® e o iPhone 4, desde que o grupo de dispositivos Smart Phone seja adicionado ao modelo e às estruturas de página nas etapas a seguir.

    chlimage_1-158

  3. Usando o CRXDE Lite, permita que o grupo de dispositivos seja usado no modelo, adicionando-o à propriedade de cadeia de caracteres de vários valores cq:deviceGroups na estrutura do modelo.

    /conf/<your-site>/settings/wcm/templates/<your-template>/structure/jcr:content

    Por exemplo, se você quiser adicionar o grupo de dispositivos Telefone Inteligente:

    /conf/we-retail/settings/wcm/templates/experience-page/structure/jcr:content

    chlimage_1-159

  4. Usando o CRXDE Lite, permita que o grupo de dispositivos seja usado em seu site, adicionando-o à propriedade de cadeia de caracteres de vários valores cq:deviceGroups na estrutura do site.

    /content/<your-site>/jcr:content

    Por exemplo, se você deseja permitir o grupo de dispositivos Telefone Inteligente:

    /content/we-retail/jcr:content

    chlimage_1-160

Agora, ao usar o emulador no editor de página (como ao modificar o layout) e escolher um dispositivo do grupo de dispositivos configurado, a página é renderizada com um seletor como parte da URL.

Neste exemplo, ao editar uma página com base no modelo Página de Experiência e escolher o iPhone 4 no emulador, a página é renderizada incluindo o seletor como arctic-surfing-in-lofoten.smart.html em vez de arctic-surfing-in-lofoten.html

A página também pode ser chamada diretamente usando esse seletor.

chlimage_1-161

recommendation-more-help
19ffd973-7af2-44d0-84b5-d547b0dffee2