Show Menu
TÓPICOS×

Modelos de página - Estáticos

Um Modelo é usado para criar uma Página e define quais componentes podem ser usados dentro do escopo selecionado. Um modelo é uma hierarquia de nós que tem a mesma estrutura da página a ser criada, mas sem nenhum conteúdo real.
Cada modelo apresentará uma seleção de componentes disponíveis para uso.
  • Os modelos são compostos de Componentes ;
  • Os componentes usam e permitem acesso a Widgets, e esses são usados para renderizar o Conteúdo.
Modelos editáveis também estão disponíveis e são o tipo recomendado de modelos para maior flexibilidade e os recursos mais recentes.

Propriedades e nós secundários de um modelo

Um modelo é um nó do tipo cq:Template e tem as seguintes propriedades e nós secundários:
Nome Tipo Descrição
. cq:Template Modelo atual. Um modelo é do tipo de nó cq:Template.
allowChildren Sequência de caracteres[] Path of a template that is allowed to be a child of this template.
allowParents Sequência de caracteres[] Path of a template that is allowed to be a parent of this template.
allowPaths Sequência de caracteres[] Caminho de uma página que tem permissão para se basear neste modelo.
jcr:created Data Data de criação do modelo.
jcr:description Sequência de caracteres Descrição do modelo.
jcr:title Sequência de caracteres Title of the template.
classificação Longo Classificação do modelo. Usado para exibir o modelo na interface do usuário.
jcr:content cq:PageContent Nó que contém o conteúdo do modelo.
thumbnail.png nt:file Miniatura do modelo.
icon.png nt:file Ícone do modelo.
Um modelo é a base de uma página.
Para criar uma página, o modelo deve ser copiado (nó-árvore /apps/<myapp>/template/<mytemplate> ) para a posição correspondente na árvore do site: isso é o que acontece se uma página é criada usando a guia Sites .
Essa ação de cópia também fornece à página seu conteúdo inicial (normalmente, somente conteúdo de nível superior) e a propriedade sling:resourceType, o caminho para o componente de página que é usado para renderizar a página (tudo no nó filho jcr:content).

Como os Modelos são estruturados

Há dois aspectos a considerar:
  • a estrutura do próprio modelo
  • a estrutura do conteúdo produzido quando um modelo é usado

A estrutura de um Modelo

Um Modelo é criado em um nó do tipo cq:Template .
Podem ser definidas várias propriedades, em especial:
  • jcr:title - title para o modelo; aparece na caixa de diálogo ao criar uma página.
  • jcr:description - descrição do modelo; aparece na caixa de diálogo ao criar uma página.
Este nó contém um nó jcr:content (cq:PageContent) que pode ser usado como a base para o nó de conteúdo das páginas resultantes; isso faz referência, usando sling:resourceType, ao componente a ser usado para renderizar o conteúdo real de uma nova página.
Esse componente é usado para definir a estrutura e o design do conteúdo quando uma nova página é criada.

O conteúdo produzido por um modelo

Os modelos são usados para criar páginas do tipo cq:Page (como mencionado anteriormente, uma página é um tipo especial de componente). Cada página AEM tem um nó estruturado jcr:content . Isso:
  • é do tipo cq:PageContent
  • é um tipo de nó estruturado que contém uma definição de conteúdo definida
  • tem uma propriedade sling:resourceType para referenciar o componente que contém os scripts sling usados para renderizar o conteúdo

Modelos padrão

O AEM vem com vários modelos padrão disponíveis prontamente. Em alguns casos, talvez você queira usar os modelos como estão. Nesse caso, é necessário garantir que o modelo esteja disponível para seu site.
Por exemplo, o AEM vem com vários modelos, incluindo uma página de conteúdo e uma página inicial.
Título
Componente
Local
Propósito
Página Inicial
homepage
geometrixx
O modelo da página inicial do Geometrixx.
Página de conteúdo
contentpage
geometrixx
O modelo de página de conteúdo do Geometrixx.

Exibição de modelos padrão

Para ver uma lista de todos os modelos no repositório, proceda da seguinte maneira:
  1. No CRXDE Lite, abra o menu Ferramentas e clique em Consulta .
  2. Na guia Consulta
  3. Como Tipo , selecione XPath .
  4. No campo de entrada Consulta , digite a seguinte string: //element(*, cq:Template)
  5. Clique em Executar . A lista é exibida na caixa de resultados.
Na maioria dos casos, você pegará um modelo existente e desenvolverá um novo para seu próprio uso. Consulte Desenvolvimento de modelos de página para obter mais informações.
Para habilitar um modelo existente para seu site e desejar que ele seja exibido na caixa de diálogo Criar página ao criar uma página diretamente em Sites a partir do console Sites , defina a propriedade allowPaths do nó modelo como: /content(/.*)?

Como os modelos são aplicados

Quando os estilos são definidos na interface usando o Modo de Design, o design é mantido no caminho exato do nó de conteúdo para o qual o estilo está sendo definido.
A Adobe recomenda aplicar designs somente pelo Modo Configuração dos componentes no Modo de design de design.
A modificação de designs no CRX DE por exemplo não uma prática recomendada e a aplicação desses designs pode variar do comportamento esperado.
Se os designs só forem aplicados usando o Modo de design, as seguintes seções, Resolução do caminho de design, Árvore decisória e Exemplo não serão aplicáveis.

Resolução do caminho de design

Ao renderizar conteúdo com base em um modelo estático, o AEM tentará aplicar o design e os estilos mais relevantes ao conteúdo com base em uma transversal da hierarquia de conteúdo.
O AEM determina o estilo mais relevante para um nó de conteúdo na seguinte ordem:
  • Se houver um design para o caminho completo e exato do nó de conteúdo (como quando o design é definido no Modo de design), use esse design.
  • Se houver um design para o nó de conteúdo do pai, use esse design.
  • Se houver um design para qualquer nó no caminho do nó de conteúdo, use esse design.
Nos dois últimos casos, se houver mais de um design aplicável, use o mais próximo do nó de conteúdo.

Árvore de decisão

Esta é uma representação gráfica da lógica de Resolução do Caminho de Design.

Exemplo

Considere uma estrutura de conteúdo simples da seguinte maneira, na qual um design pode se aplicar a qualquer um dos nós:
/root/branch/leaf
A tabela a seguir descreve como o AEM escolherá um design.
Encontrar Design Para Existem Designs Para Design escolhido Comentário
leaf
root
branch
leaf
leaf A correspondência mais exata é sempre feita.
leaf
root
branch
branch Volte para a correspondência mais próxima na árvore.
leaf root root Se tudo mais falhar, veja o que resta.
branch branch branch
branch
branch
leaf
branch
branch
root
branch
branch
branch
root
leaf
root
Se não houver uma correspondência exata, pegue a que estiver na árvore.
Pressupõe-se que isso será sempre aplicável, mas mais acima da árvore pode ser muito específico.

Desenvolvimento de modelos de página

Os modelos de página AEM são simplesmente modelos usados para criar novas páginas. Eles podem conter o mínimo ou tanto conteúdo inicial quanto necessário, sendo sua função criar as estruturas de nó iniciais corretas, com as propriedades necessárias (principalmente sling:resourceType) definidas para permitir a edição e a renderização.

Criando um novo modelo (com base em um modelo existente)

É necessário dizer que um novo modelo pode ser criado completamente do zero, mas geralmente um modelo existente será copiado e atualizado para economizar tempo e esforço. Por exemplo, os modelos no Geometrixx podem ser usados para ajudá-lo a começar.
Para criar um novo modelo com base em um modelo existente:
  1. Copie um modelo existente (de preferência, com uma definição o mais próxima possível do que você deseja obter) para um novo nó.
    Normalmente, os modelos são armazenados em /apps/<nome-do-site>/models/<nome-do-modelo> .
    A lista de modelos disponíveis depende do local da nova página e das restrições de posicionamento especificadas em cada modelo. Consulte Disponibilidade #templateavailibilitydo modelo.
  2. Altere o jcr:title do novo nó de modelo para refletir sua nova função. Você também pode atualizar o jcr:description , se apropriado. Certifique-se de alterar a disponibilidade do modelo da página, conforme apropriado.
    Se desejar que seu modelo seja exibido na caixa de diálogo Criar página ao criar uma página diretamente em Sites do console Sites allowedPaths , defina a propriedade do nó do modelo como: /content(/.*)?
  3. Copie o componente no qual o modelo se baseia (isso é indicado pela propriedade sling:resourceType do nó jcr:content no modelo) para criar uma nova instância.
    Geralmente, os componentes são armazenados em /apps/<nome-do-site>/components/<nome-do-componente> .
  4. Atualize o jcr:title e jcr:description do novo componente.
  5. Substitua thumbnail.png se quiser que uma nova imagem em miniatura seja mostrada na lista de seleção do modelo (tamanho 128 x 98 px).
  6. Atualize o sling:resourceType do nó jcr:content do modelo para referenciar o novo componente.
  7. Faça outras alterações na funcionalidade ou design do modelo e/ou seu componente subjacente.
    As alterações feitas no nó /apps/<site>/models/<nome-modelo> afetarão a instância do modelo (como na lista de seleção). As alterações feitas no nó /apps/<site>/components/<nome-componente> afetarão a página de conteúdo criada quando o modelo for usado.
    Agora você pode criar uma página em seu site usando o novo modelo.
A biblioteca do cliente do editor assume a presença do cq.shared namespace nas páginas de conteúdo e, se ele não estiver presente, o erro do JavaScript Uncaught TypeError: Cannot read property 'shared' of undefined resultará. Todas as páginas de conteúdo de amostra contêm cq.shared , portanto, qualquer conteúdo baseado nelas inclui automaticamente cq.shared . No entanto, se você decidir criar suas próprias páginas de conteúdo do zero sem baseá-las no conteúdo de amostra, deverá incluir o cq.shared namespace. Consulte Uso de bibliotecas do lado do cliente para obter mais informações.

Disponibilização de um modelo existente

Este exemplo ilustra como permitir que um modelo seja usado para determinados caminhos de conteúdo. Os modelos que estão disponíveis para o autor da página ao criar novas páginas são determinados pela lógica definida na Disponibilidade do modelo.
  1. No CRXDE Lite, navegue até o modelo que deseja usar para a sua página, por exemplo, o modelo de Newsletter.
  2. Altere a allowedPaths propriedade e outras propriedades usadas para a disponibilidade do modelo. Por exemplo, allowedPaths : /content/geometrixx-outdoors/[^/]+(/.*)? significa que este modelo é permitido em qualquer caminho em /content/geometrixx-outdoors .