Modelos de página - Estáticos

Última atualização em 2023-07-19
  • Tópicos
  • Developing
    Exibir mais informações sobre este tópico
  • Criado para:
  • Developer

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 apresenta uma seleção de componentes disponíveis para uso.

  • Os modelos são criados de Componentes;
  • Os componentes usam e permitem acesso a Widgets e eles são usados para renderizar o Conteúdo.
OBSERVAÇÃO

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 filhos de um modelo

Um modelo é um nó do tipo cq:Template e tem as seguintes propriedades e nós filhos:

Nome
Tipo
Descrição
.
cq:Template Modelo atual. Um modelo é do tipo de nó cq:Template.
allowedChildren String[] Caminho de um modelo que tem permissão para ser um filho deste modelo.
allowedParents String[] Caminho de um modelo que tem permissão para ser um pai deste modelo.
allowedPaths String[] Caminho de uma página que pode ser baseada neste modelo.
jcr:created Data Data de criação do modelo.
jcr:description String Descrição do modelo.
jcr:title String Título do modelo.
classificação Longo Classificação do modelo. Usado para exibir o modelo na interface do usuário do.
jcr:content cq:PageContent Nó que contém o conteúdo do template.
thumbnail.png nt:arquivo Miniatura do modelo.
icon.png nt:arquivo Ícone do modelo.

Um modelo é a base de uma página.

Para criar uma página, o modelo deve ser copiado (árvore de nó /apps/<myapp>/template/<mytemplate>) para a posição correspondente na árvore do site: isso é o que acontece se uma página é criada usando o Sites guia.

Essa ação de cópia também fornece à página seu conteúdo inicial (geralmente, Conteúdo de nível superior somente) e a propriedade sling:resourceType, o caminho para o componente de página 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 template é usado

A estrutura de um modelo

Um modelo é criado em um nó do tipo cq:Template.

screen_shot_2012-02-13at63646pm

Várias propriedades podem ser definidas, em particular:

  • jcr:title - título do 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 é usado como base para o nó de conteúdo das páginas resultantes; faz referência, usando sling:resourceType, ao componente a ser usado para renderizar o conteúdo real de uma nova página.

screen_shot_2012-02-13at64010pm

Esse componente é usado para definir a estrutura e o design do conteúdo quando uma nova página é criada.

screen_shot_2012-02-13at64137pm

O conteúdo produzido por um Template

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. Isto:

  • é do tipo cq:PageContent
  • é um nó estruturado-tipo que contém uma definição de conteúdo definida
  • tem uma propriedade sling:resourceType para fazer referência ao 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 imediatamente. Às vezes, você pode querer usar os modelos como estão. Nesse caso, você deve garantir que o modelo esteja disponível para o 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 da 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 Ferramentas e clique em Query.

  2. Na guia Query

  3. Como Tipo, selecione XPath.

  4. No Query insira a seguinte string: //element()*, cq:Template)

  5. Clique em Executar. A lista é exibida na caixa de resultados.

Normalmente, você pega um modelo existente e desenvolve um novo para uso próprio. Consulte Desenvolvimento de modelos de página para obter mais informações.

Para habilitar um modelo existente para o seu site e exibi-lo na variável Criar página ao criar uma página logo em Sites do Sites defina a propriedade allowedPaths do nó do modelo como: /content(/.&?lang=pt-BR#42;)?

Como os designs de modelo são aplicados

Quando os estilos são definidos na interface do usuário usando Modo Design, o design é mantido no caminho exato do nó de conteúdo para o qual o estilo está sendo definido.

ATENÇÃO

O Adobe recomenda aplicar somente designs através do Modo Design.

A modificação de designs no CRXDE Lite, por exemplo, não é uma prática recomendada e a aplicação de tais designs pode variar do comportamento esperado.

Se os designs forem aplicados usando apenas o Modo de design, as seguintes seções Resolução do caminho de design, Árvore de decisão, e o Exemplo não são aplicáveis.

Resolução do caminho de design

Ao renderizar o conteúdo com base em um modelo estático, o AEM tenta aplicar o design e os estilos mais relevantes ao conteúdo com base em uma passagem 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 do Resolução do caminho de design lógica.

design_path_resolution

Exemplo

Considere uma estrutura de conteúdo simples, como a seguir, em que um design pode ser aplicado a qualquer um dos nós:

/root/branch/leaf

A tabela a seguir descreve como o AEM escolhe um design.

Localizando design para
Existem Designs Para
Design escolhido
Comentar
leaf

root

branch

leaf

leaf A correspondência mais exata é sempre feita.
leaf

root

branch

branch Volte para a correspondência mais próxima mais abaixo na árvore.
leaf root root Se tudo mais falhar, pegue 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, use a inferior na árvore.

O pressuposto é que isso sempre será aplicável, mas mais acima na árvore pode ser muito específico.

Desenvolvimento de modelos de página

Modelos de página AEM são simplesmente modelos usados para criar páginas. Eles podem conter pouco 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 edição e renderização.

Criação de um modelo (com base em um modelo existente)

Um novo modelo pode ser criado completamente do zero, mas geralmente um modelo existente é copiado e atualizado para economizar seu tempo e esforço. Por exemplo, os templates no Geometrixx podem ser usados para começar.

Para criar um modelo com base em um modelo existente:

  1. Copie um template existente (de preferência com uma definição o mais próximo possível do que você deseja alcançar) em um novo nó.

    Os modelos são armazenados no /apps/<website-name>/templates/<template-name>.

    OBSERVAÇÃO

    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 do modelo.

  2. Altere o jcr:title do nó novo modelo para refletir sua nova função. Você também pode atualizar a variável jcr:description se apropriado. Altere a disponibilidade do modelo da página, conforme apropriado.

    OBSERVAÇÃO

    Se quiser que o modelo seja exibido no Criar página ao criar uma página logo em Sites do Sites , defina o allowedPaths propriedade do nó do modelo para: /content(/.*)?

    chlimage_1-88

  3. Copie o componente no qual o modelo se baseia (isso é indicado pela variável sling:resourceType propriedade do jcr:content no modelo) para criar uma instância.

    Os componentes são armazenados em /apps/<website-name>/components/<component-name>.

  4. Atualize o jcr:title e jcr:description do novo componente.

  5. Substitua thumbnail.png se desejar 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 modelo jcr:content para fazer referência ao novo componente.

  7. Faça alterações adicionais na funcionalidade ou no design do modelo, no componente subjacente ou em ambos.

    OBSERVAÇÃO

    As alterações feitas no /apps/<website>/templates/<template-name> afetará a instância do modelo (como na lista de seleção).

    As alterações feitas no /apps/<website>/components/<component-name> afetará 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.

OBSERVAÇÃO

A biblioteca cliente do editor presume a presença do cq.shared nas páginas de conteúdo e, se estiver ausente, o erro de JavaScript Uncaught TypeError: Cannot read property 'shared' of undefined resultados.

Todos os exemplos de páginas de conteúdo 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 em conteúdo de amostra, não deixe de incluir o cq.shared namespace.

Consulte Uso de bibliotecas do lado do cliente para obter mais informações.

Disponibilizar 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 páginas são determinados pela lógica definida em Disponibilidade do modelo.

  1. No CRXDE Lite, navegue até o modelo que deseja usar para a página, por exemplo, o modelo Boletim informativo.

  2. Altere o allowedPaths propriedade e outras propriedades usadas para disponibilidade do modelo. Por exemplo, allowedPaths: /content/geometrixx-outdoors/[^/]+(/.*)? significa que este modelo é permitido em qualquer caminho em /content/geometrixx-outdoors.

    chlimage_1-89

Nesta página