Modelos de página - Estático

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 que a página a ser criada, mas sem nenhum conteúdo real.

Cada modelo apresentará a você 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 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.
allowedChildren Sequência de caracteres[] Caminho de um modelo que pode ser filho desse modelo.
allowedParents Sequência de caracteres[] Caminho de um modelo que pode ser um pai desse modelo.
allowedPaths Sequência de caracteres[] Caminho de uma página que pode ser baseada neste modelo.
jcr:created Data Data de criação do template.
jcr:description Sequência de caracteres Descrição do modelo.
jcr:title Sequência de caracteres 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ó contendo o conteúdo do template.
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 (á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 o conteúdo inicial (geralmente 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.

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.

Esse 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.

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 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 com 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

AEM vem com vários templates padrão disponíveis para uso imediato. Em alguns casos, convém usar os modelos como estão. Nesse caso, é necessário garantir que o modelo esteja disponível para seu site.

Por exemplo, 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. As Tipo, selecione XPath.

  4. No Query campo de entrada, digite a seguinte string: //element(*, cq:Template)

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

Na maioria dos casos, você pega um template existente e desenvolve um novo para seu próprio uso. Consulte Desenvolvendo modelos de página para obter mais informações.

Para habilitar um modelo existente para o seu site e deseja que ele seja exibido na Criar página ao criar uma página diretamente em Sites do Sites no console, defina a propriedade allowedPaths do nó do modelo para: /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 por meio de Modo 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 forem aplicados apenas usando o Modo Design, as seguintes seções: Resolução do Caminho de Design, Árvore de decisãoe o Exemplo não são aplicáveis.

Resolução do Caminho de Design

Ao renderizar o conteúdo com base em um template estático, o AEM tentará aplicar o design e os estilos mais relevantes ao conteúdo com base em uma travessia da hierarquia de conteúdo.

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 últimos dois casos, se houver mais de um design aplicável, use o mais próximo do nó de conteúdo.

Árvore de decisão

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

design_path_resolution

Exemplo

Considere uma estrutura de conteúdo simples da seguinte maneira, onde 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
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 abaixo da árvore.
leaf root root Se tudo o resto 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, use a que estiver abaixo na árvore.

Pressupõe-se que isso sempre será aplicável, mas mais acima da árvore pode ser muito específico.

Desenvolvendo modelos de página

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

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

Escusado será dizer que um novo modelo pode ser criado completamente do zero, mas geralmente um modelo existente será copiado e atualizado para poupar tempo e esforço. Por exemplo, os modelos no Geometrixx podem ser usados para começar.

Para criar um novo template baseado em um template existente:

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

    Normalmente, os modelos são armazenados em /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 novo nó template para refletir sua nova função. Você também pode atualizar o jcr:description se for caso disso. Certifique-se de alterar a disponibilidade do modelo da página, conforme apropriado.

    OBSERVAÇÃO

    Se desejar que seu modelo seja exibido na variável Criar página ao criar uma página diretamente 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 da jcr:content no modelo ) para criar uma nova instância.

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

  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 modelo jcr:content para fazer referência ao novo componente.

  7. Faça outras alterações na funcionalidade ou no design do modelo e/ou seu componente subjacente.

    OBSERVAÇÃO

    Alterações feitas na /apps/<website>/templates/<template-name> afetará a instância do template (como na lista de seleção).
    Alterações feitas na /apps/<website>/componentes/<component-name> afetará a página de conteúdo criada quando o modelo for usado.

    Agora é possível criar uma página no seu site usando o novo modelo.

OBSERVAÇÃO

A biblioteca cliente do editor assume a presença do cq.shared namespace nas páginas de conteúdo e se estiver ausente do erro de JavaScript Uncaught TypeError: Cannot read property 'shared' of undefined resultará em .
Todas as páginas de conteúdo de exemplo contêm cq.shared, portanto, qualquer conteúdo baseado neles inclui automaticamente cq.shared. No entanto, se você decidir criar suas próprias páginas de conteúdo do zero sem basear-nas no conteúdo de amostra, deverá incluir a variável cq.shared namespace.
Consulte Usar 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 novas 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 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