Modelos de página - Estáticos page-templates-static

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.

  • Modelos são compilados de Componentes;
  • Os componentes usam e permitem acesso a Widgets e eles são usados para renderizar o Conteúdo.
NOTE
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 properties-and-child-nodes-of-a-template

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.
jcr:content
cq:PageContent
Nó que contém o conteúdo do modelo.
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 a guia Sites.

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 how-templates-are-structured

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 the-structure-of-a-template

Um Modelo foi 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 the-content-produced-by-a-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 referenciar o componente que contém os scripts sling usados para renderizar o conteúdo

Modelos padrão default-templates

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
Finalidade
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 displaying-default-templates

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 Query

  3. Como Tipo, selecione XPath.

  4. No campo de entrada Consulta, digite a seguinte cadeia de caracteres:
    //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 Desenvolvendo modelos de página para obter mais informações.

Para habilitar um modelo existente para o seu site e exibi-lo na caixa de diálogo Criar Página ao criar uma página diretamente em Sites a partir do console Sites, defina a propriedade allowedPaths do nó de modelo como: /content(https://experienceleague.adobe.com/.&?lang=pt-BR#42;)?

Como os designs de modelo são aplicados how-template-designs-are-applied

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

CAUTION
A Adobe recomenda aplicar somente designs ao Modo de 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 Exemplo não serão aplicáveis.

Resolução do caminho de design design-path-resolution

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 decision-tree

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

resolução_do_caminho_de_design

Exemplo example

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.

A suposição é que isso sempre será aplicável, mas um nível mais alto da árvore pode ser muito específico.

Desenvolvimento de modelos de página developing-page-templates

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) creating-a-new-template-based-on-an-existing-template

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 em /apps/<nome-do-site>/templates/<nome-do-modelo>.

    note note
    NOTE
    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 de Modelo.
  2. Altere o jcr:title do novo nó de modelo para refletir sua nova função. Você também pode atualizar a jcr:description, se apropriado. Altere a disponibilidade do modelo da página, conforme apropriado.

    note note
    NOTE
    Se você quiser que seu modelo seja exibido na caixa de diálogo Criar Página ao criar uma página diretamente em Sites do console Sites, defina a propriedade allowedPaths do nó de modelo como: /content(/.*)?

    chlimage_1-88

  3. Copie o componente no qual o modelo é baseado (isso é indicado pela propriedade sling:resourceType do nó jcr:content no modelo) para criar uma instância.

    Os componentes são armazenados em /apps/<nome-do-site>/components/<nome-do-componente>.

  4. Atualize a jcr:title e a 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 nó jcr:content do modelo 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.

    note note
    NOTE
    As alterações feitas no nó /apps/<site>/templates/<nome-modelo> afetam a instância do modelo (como na lista de seleção).
    As alterações feitas no nó /apps/<site>/components/<nome-do-componente> afetam a página de conteúdo criada quando o modelo é usado.

    Agora você pode criar uma página em seu site usando o novo modelo.

NOTE
A biblioteca cliente do editor presume a presença do namespace cq.shared nas páginas de conteúdo e, se estiver ausente, o erro de JavaScript Uncaught TypeError: Cannot read property 'shared' of undefined ocorrerá.
Todas as páginas de conteúdo de exemplo 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 exemplo, certifique-se de incluir o namespace cq.shared.
Consulte Usando bibliotecas do lado do cliente para obter mais informações.

Disponibilizar um modelo existente making-an-existing-template-available

Este exemplo ilustra como permitir que um modelo seja usado para determinados caminhos de conteúdo. Os modelos disponíveis para o autor da página ao criar páginas são determinados pela lógica definida em Disponibilidade de Modelo.

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

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

    chlimage_1-89

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