Modelos de páginas

Ao criar uma página, é necessário selecionar um modelo. O modelo de página é usado como a base para a nova página. O modelo define a estrutura da página resultante, qualquer conteúdo inicial e os componentes que podem ser usados (propriedades de design). Isso tem várias vantagens:

  • Os Modelos de página permitem que autores especializados criem e editem modelos.
    • Esses autores especializados são chamados de autores de modelo
    • Os autores de modelo devem ser membros do grupo template-authors.
  • Os Modelos de página retêm uma conexão dinâmica com quaisquer páginas criadas a partir deles. Isso garante que quaisquer alterações no modelo sejam refletidas nas próprias páginas.
  • Os Modelos de página tornam o componente de página mais genérico para que o componente de página principal possa ser usado sem personalização.

Com os Modelos de página, as partes que fazem uma página são isoladas dentro dos componentes. Você pode configurar as combinações necessárias de componentes em uma interface do usuário, eliminando a necessidade de um novo componente de página ser desenvolvido para cada variação de página.

Este documento:

  • Fornece uma visão geral da criação de um modelo de página
  • Descreve as tarefas de administrador/desenvolvedor necessárias para criar modelos editáveis
  • Descreve os fundamentos técnicos dos modelos editáveis
  • Descreve como AEM avalia a disponibilidade de um modelo
OBSERVAÇÃO

Este documento supõe que você já esteja familiarizado com a criação e edição de modelos. Consulte o documento de criação Criação de modelos de página, que detalha os recursos de modelos editáveis como expostos ao autor do modelo.

DICA

O tutorial da WKND aborda detalhadamente como usar os Modelos de página implementando um exemplo e é bastante útil para entender como configurar um modelo em um novo projeto

Criando um Novo Modelo

A criação de Modelos de página é feita principalmente com o console modelo e o editor de modelo por um autor de modelo. Esta seção apresenta uma visão geral deste processo e apresenta uma descrição do que ocorre a nível técnico.

Ao criar um novo modelo editável:

  1. Crie uma pasta para os modelos. Isso não é obrigatório, mas é uma prática recomendada.

  2. Selecione um tipo de modelo a1/>. Isso é copiado para criar a definição do modelo a1/>.

    OBSERVAÇÃO

    Uma seleção de tipos de modelo é fornecida prontamente. Você também pode criar seus próprios tipos de modelo específicos do site, se necessário.

  3. Configure a estrutura, as políticas de conteúdo, o conteúdo inicial e o layout do novo modelo.

    Estrutura

    • A estrutura permite que você defina componentes e conteúdo para seu modelo.
    • Os componentes definidos na estrutura do modelo não podem ser movidos em uma página resultante ou excluídos de qualquer página resultante.
    • Se desejar que os autores da página possam adicionar e remover componentes, adicione um sistema de parágrafo ao modelo.
    • Os componentes podem ser desbloqueados e bloqueados novamente para permitir que você defina o conteúdo inicial.

    Para obter detalhes sobre como um autor de modelo define a estrutura, consulte Criação de modelos de página.

    Para obter detalhes técnicos da estrutura, consulte Estrutura neste documento.

    Políticas

    • As políticas de conteúdo definem as propriedades de design de um componente.

      • Por exemplo, os componentes disponíveis ou as dimensões mínimas/máximas.
    • Eles são aplicáveis ao modelo (e às páginas criadas com o modelo).

    Para obter detalhes sobre como um autor de modelo define políticas, consulte Criando Modelos de Página.

    Para obter detalhes técnicos das políticas, consulte Políticas de conteúdo neste documento.

    Conteúdo inicial

    • O Conteúdo inicial define o conteúdo que será exibido quando uma página for criada pela primeira vez com base no modelo.
    • O conteúdo inicial pode ser editado pelos autores da página.

    Para obter detalhes sobre como um autor de modelo define a estrutura, consulte Criação de modelos de página.

    Para obter detalhes técnicos sobre o conteúdo inicial, consulte Conteúdo inicial neste documento.

    Layout

    • É possível definir o layout do modelo para um intervalo de dispositivos.
    • O Layout responsivo para modelos funciona como na criação de página.

    Para obter detalhes sobre como um autor de modelo define o layout do modelo, consulte Criação de modelos de página.

    Para obter detalhes técnicos sobre o layout do modelo, consulte Layout neste documento.

  4. Habilite o modelo e, em seguida, permita-o para árvores de conteúdo específicas.

    • Um modelo pode ser ativado ou desativado para torná-lo disponível ou indisponível para autores de página.
    • Um modelo pode ser disponibilizado ou indisponibilizado para determinadas ramificações de página.

    Para obter detalhes sobre como um autor de modelo ativa um modelo, consulte Criação de modelos de página.

    Para obter detalhes técnicos sobre como ativar um modelo, consulte Ativar e Permitir um Modelo para Use neste documento

  5. Use-o para criar páginas de conteúdo.

    • Ao usar um modelo para criar uma nova página, não há diferenças visíveis e nenhuma indicação entre os modelos estáticos e editáveis.
    • Para o autor da página, o processo é transparente.

    Para obter detalhes sobre como um autor de página usa modelos para criar uma página, consulte Criação e organização de páginas.

    Para obter detalhes técnicos sobre como criar páginas com modelos editáveis, consulte Páginas de conteúdo resultante neste documento.

DICA

Nunca insira qualquer informação que precise ser internacionalizada em um modelo. Para fins de internalização, os recursos de localização dos Componentes Principais são recomendados.

OBSERVAÇÃO

Os modelos são ferramentas poderosas para simplificar o fluxo de trabalho de criação de página. No entanto, muitos modelos podem sobrecarregar os autores e tornar a criação da página confusa. Uma boa regra é manter o número de modelos abaixo de 100.

O Adobe não recomenda ter mais de 1000 modelos devido a possíveis impactos no desempenho.

OBSERVAÇÃO

A biblioteca do cliente do editor assume a presença da namespace cq.shared nas páginas de conteúdo e, se ela 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 a namespace cq.shared.

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

Pastas de Modelo

Para organizar seus modelos, você pode usar as seguintes pastas:

  • global
  • Específico do site
OBSERVAÇÃO

Mesmo que você possa aninhar suas pastas, quando o usuário as visualização no console Modelos, elas são apresentadas como uma estrutura simples.

Em uma instância padrão do AEM, a pasta global já existe no console modelo. Isso mantém modelos padrão e atua como um fallback se nenhuma política e/ou tipo de modelo for localizado na pasta atual. Você pode adicionar seus modelos padrão a esta pasta ou criar uma nova pasta (recomendado).

OBSERVAÇÃO

É prática recomendada criar uma nova pasta para manter seus modelos personalizados e não usar a pasta global.

CUIDADO

As pastas devem ser criadas por um usuário com direitos admin.

Os tipos de modelo e as políticas são herdados em todas as pastas de acordo com a seguinte ordem de precedência:

  1. A pasta atual
  2. Pai(s) da pasta atual
  3. /conf/global
  4. /apps
  5. /libs

Uma lista de todas as entradas permitidas é criada. Se qualquer configuração se sobrepuser ( path/ label), somente a instância mais próxima da pasta atual será apresentada ao usuário.

Para criar uma nova pasta, você pode:

Usando CRXDE Lite

  1. Uma nova pasta (em /conf) pode ser criada para sua instância de forma programática ou com CRXDE Lite.

    Deve ser utilizada a seguinte estrutura:

    /conf
        <your-folder-name> [sling:Folder]
            settings [sling:Folder]
                wcm [cq:Page]
                    templates [cq:Page]
                    policies [cq:Page]
    
  2. Em seguida, é possível definir as seguintes propriedades no nó raiz da pasta:

    <your-folder-name> [sling:Folder]

    • Nome: jcr:title
    • Tipo: String
    • Valor: O título (para a pasta) que você deseja exibir no console Modelos.
  3. Além das permissões e privilégios de criação padrão (por exemplo, content-authors) agora é necessário atribuir grupos e definir os direitos de acesso (ACLs) necessários para que seus autores possam criar modelos na nova pasta.

    O grupo template-authors é o grupo padrão que precisa ser atribuído. Consulte a seção ACLs e grupos para obter detalhes.

Usando o navegador de configuração

  1. Vá para Navegação Global -> Ferramentas > Navegador de Configuração.

    As pastas existentes são listadas à esquerda, incluindo a pasta global.

  2. Clique em Criar.

  3. Na caixa de diálogo Criar configuração, os seguintes campos precisam ser configurados:

    • Título: Fornecer um título para a pasta de configuração
    • Modelos editáveis: Clique para permitir modelos editáveis nesta pasta
  4. Clique em Criar

OBSERVAÇÃO

No Navegador de configuração, você pode editar a pasta global e ativar a opção Modelos editáveis se desejar criar modelos dentro dessa pasta, no entanto, essa não é a prática recomendada.

ACLs e grupos

Depois que as pastas de modelo são criadas (via CRXDE ou com o Navegador de configuração), as ACLs devem ser definidas para os grupos apropriados para as pastas de modelo para garantir a segurança adequada.

As pastas de modelo para o tutorial WKND podem ser usadas como exemplo.

O Grupo de autores de modelo

O grupo template-authors é o grupo usado para gerenciar o acesso aos modelos e vem como padrão com AEM, mas está vazio. Os usuários devem ser adicionados ao grupo para o projeto/site.

CUIDADO

O grupo template-authors é somente para usuários que precisam criar novos modelos.

A edição de modelos é muito poderosa e, se não for feita corretamente, os modelos existentes podem ser quebrados. Portanto, essa função deve ser focada e incluir apenas usuários qualificados.

A tabela a seguir detalha as permissões necessárias para a edição de modelos.

Caminho Função / Grupo Permissões
Descrição
/conf/<your-folder>/settings/wcm/templates Autores do modelo
ler, escrever, replicar Criadores de modelos que criam, leem, atualizam, excluem e replicam modelos em espaço /conf específico do site
Usuário da Web anônimo leitura Usuário da Web anônimo deve ler modelos ao renderizar uma página
Autores de conteúdo replicar replicateOs autores de conteúdo precisam ativar os modelos de uma página ao ativar uma página
/conf/<your-folder>/settings/wcm/policies Template Author ler, escrever, replicar Criadores de modelos que criam, leem, atualizam, excluem e replicam modelos em espaço /conf específico do site
Usuário da Web anônimo leitura Usuário da Web anônimo deve ler as políticas ao renderizar uma página
Autores de conteúdo replicar Os autores de conteúdo precisam ativar as políticas de um modelo de página ao ativar uma página
/conf/<site>/settings/template-types Autor do modelo leitura O autor do modelo cria um novo modelo com base em um dos tipos de modelo predefinidos.
Usuário da Web anônimo nenhum O Usuário Anônimo da Web não deve acessar os tipos de modelo

Este grupo padrão template-authors abrange apenas as configurações do projeto, onde todos os membros template-authors têm permissão para acessar e criar todos os modelos. Para configurações mais complexas, onde vários grupos de autores de modelo são necessários para separar o acesso a modelos, mais grupos de autores de modelo personalizados devem ser criados. No entanto, as permissões para os grupos de autores de modelo ainda seriam as mesmas.

Tipo de Modelo

Ao criar um novo modelo, é necessário especificar um tipo de modelo:

  • Os tipos de modelo fornecem modelos para um modelo. Ao criar um novo modelo, a estrutura e o conteúdo inicial do tipo de modelo selecionado são usados para criar o novo modelo.

    • O tipo de modelo é copiado para criar o modelo.
    • Após a cópia, a única conexão entre o modelo e o tipo de modelo é uma referência estática para fins de informação.
  • Os tipos de modelo permitem que você defina:

    • O tipo de recurso do componente de página.
    • A política do nó raiz, que define os componentes permitidos no editor de modelo.
    • É recomendável definir os pontos de interrupção para a grade responsiva e a configuração do emulador móvel no tipo de modelo.
  • AEM fornece uma pequena seleção de tipos de modelo prontos para uso, como Página HTML5 e Página de formulário adaptável.

    • Exemplos adicionais são fornecidos como parte do tutorial WKND.
  • Os tipos de modelo são tipicamente definidos pelos desenvolvedores.

Os tipos de modelo predefinidos são armazenados em:

  • /libs/settings/wcm/template-types
CUIDADO

Você não deve alterar nada no caminho /libs. Isso ocorre porque o conteúdo de /libs pode ser substituído a qualquer momento por uma atualização para AEM.

Os tipos de modelo específicos do site devem ser armazenados no local comparável de:

  • /apps/settings/wcm/template-types

As definições para seus tipos de modelos personalizados devem ser armazenadas em pastas definidas pelo usuário (recomendado) ou alternativamente em global. Por exemplo:

  • /conf/<my-folder-01>/<my-folder-02>/settings/wcm/template-types
  • /conf/<my-folder>/settings/wcm/template-types
  • /conf/global/settings/wcm/template-types
CUIDADO

Os tipos de modelo devem respeitar a estrutura correta de pastas (ou seja, /settings/wcm/...), caso contrário, os tipos de modelo não serão encontrados.

Criando Tipos de Modelo

Se você tiver criado um modelo que possa servir como a base de outros modelos, poderá copiar esse modelo como um tipo de modelo.

  1. Crie um modelo como faria com qualquer Modelo de página conforme documentado aqui, que servirá de base para o seu tipo de modelo.
  2. Usando o CRXDE Lite, copie o modelo recém-criado do nó templates para o nó template-types na pasta de modelo .
  3. Exclua o modelo do nó templates na pasta de modelo .
  4. Na cópia do modelo que está sob o nó template-types, exclua todas as propriedades cq:template e cq:templateType jcr:content.

Você também pode desenvolver seu próprio tipo de modelo usando um modelo editável de exemplo como base, disponível no GitHub.

CÓDIGO NO GITHUB

Você pode encontrar o código desta página no GitHub

Definições de Modelo

As definições para modelos editáveis são armazenadas pastas definidas pelo usuário (recomendado) ou alternativamente em global. Por exemplo:

  • /conf/<my-folder>/settings/wcm/templates
  • /conf/<my-folder-01>/<my-folder-02>/settings/wcm/templates
  • /conf/global/settings/wcm/templates

O nó raiz do modelo é do tipo cq:Template com uma estrutura de esqueleto de:

<template-name>
  initial
    jcr:content
      root
        <component>
        ...
        <component>
  jcr:content
    @property status
  policies
    jcr:content
      root
        @property cq:policy
        <component>
          @property cq:policy
        ...
        <component>
          @property cq:policy
  structure
    jcr:content
      root
        <component>
        ...
        <component>
      cq:responsive
        breakpoints
  thumbnail.png

Os principais elementos são:

  • <template-name>

    • [initial](#initial-content)
    • jcr:content
    • [structure](#structure)
    • [policies](#policies)
    • thumbnail.png

jcr:content

Este nó contém propriedades para o modelo:

  • Nome: jcr:title
  • Nome: status
    • ``Tipo: String
    • Valor: draft, enabled ou disabled

Estrutura

Define a estrutura da página resultante:

  • É unido ao conteúdo inicial ( /initial) ao criar uma nova página.

  • As alterações feitas na estrutura serão refletidas em qualquer página criada com o modelo.

  • O nó root ( structure/jcr:content/root) define a lista de componentes que estarão disponíveis na página resultante.

    • Os componentes definidos na estrutura do modelo não podem ser movidos para nenhuma página resultante ou excluídos dela.
    • Depois que um componente é desbloqueado, a propriedade editable é definida como true.
    • Quando um componente que já contém conteúdo for desbloqueado, esse conteúdo será movido para a ramificação initial.
  • O nó cq:responsive contém definições para o layout responsivo.

Conteúdo inicial

Define o conteúdo inicial que uma nova página terá na criação:

  • Contém um nó jcr:content que é copiado para qualquer nova página.
  • É unida à estrutura ( /structure) ao criar uma nova página.
  • Nenhuma página existente será atualizada se o conteúdo inicial for alterado após a criação.
  • O nó root contém uma lista de componentes para definir o que estará disponível na página resultante.
  • Se o conteúdo for adicionado a um componente no modo de estrutura e esse componente for desbloqueado posteriormente (ou vice-versa), esse conteúdo será usado como conteúdo inicial.

Layout

Quando editar um modelo você pode definir o layout, isso usa layout responsivo padrão.

Políticas de conteúdo

As políticas de conteúdo definem as propriedades de design de um componente. Por exemplo, os componentes disponíveis ou as dimensões mínimas/máximas. Eles são aplicáveis ao modelo (e às páginas criadas com o modelo). As políticas de conteúdo podem ser criadas e selecionadas no editor de modelos.

  • A propriedade cq:policy, no nó root
    /conf/<your-folder>/settings/wcm/templates/<your-template>/policies/jcr:content/root
    Fornece uma referência relativa à política de conteúdo para o sistema de parágrafo da página.

  • A propriedade cq:policy, nos nós explícitos de componentes em root, fornece links para as políticas dos componentes individuais.

  • As definições de política reais são armazenadas em:
    /conf/<your-folder>/settings/wcm/policies/wcm/foundation/components

OBSERVAÇÃO

Os caminhos das definições de política dependem do caminho do componente. cq:policy contém uma referência relativa à configuração propriamente dita.

Políticas da página

As políticas de página permitem que você defina a política de conteúdo para a página (parsys principal), no modelo ou nas páginas resultantes.

Ativando e permitindo um modelo para uso

  1. Ativar o modelo

    Antes que um modelo possa ser usado, ele deve ser habilitado por:

    • Habilitando o modelo do console ​Modelos.

    • Definindo a propriedade status no nó jcr:content.

      • Por exemplo, em:

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

      • Defina a propriedade:

        • Nome: status
        • Tipo: String
        • Valor: enabled
  2. Modelos permitidos

    /conf/<your-folder>/settings/wcm/templates/.*

Páginas de conteúdo resultante

Páginas criadas a partir de modelos editáveis:

  • São criados com uma subárvore que é unida de structure e initial no modelo

  • Ter referências às informações contidas no modelo e no tipo de modelo. Isso é obtido com um nó jcr:content com as propriedades:

    • cq:template - Fornece a referência dinâmica ao modelo real; permite que as alterações no modelo sejam refletidas nas páginas reais.

    • cq:templateType - Fornece uma referência ao tipo de modelo.

Como os modelos, o conteúdo e os componentes se interrelacionam

O diagrama acima mostra como os modelos, o conteúdo e os componentes se interrelacionam:

  • Controller - /content/<my-site>/<my-page> - A página resultante que faz referência ao modelo. O conteúdo controla todo o processo. De acordo com as definições, acessa o modelo e os componentes apropriados.
  • Configuração - /conf/<my-folder>/settings/wcm/templates/<my-template> - O modelo e as políticas de conteúdo relacionadas definem a configuração da página.
  • Modelo - pacotes OSGi - Os pacotes OSGI implementam a funcionalidade.
  • Visualização - /apps/<my-site>/components - nos ambientes de autor e publicação, o conteúdo é renderizado pelos componentes.

Ao renderizar uma página:

  • Modelos:

    • A propriedade cq:template do nó jcr:content será referenciada para acessar o modelo que corresponde a essa página.
  • Componentes:

    • O componente de página unirá a árvore structure/jcr:content do modelo à árvore jcr:content da página.
      • O componente de página permitirá que o autor edite apenas os nós da estrutura do modelo que foram sinalizados como editáveis (bem como quaisquer filhos).
      • Ao renderizar um componente em uma página, o caminho relativo desse componente será retirado do nó jcr:content; o mesmo caminho sob o nó policies/jcr:content do modelo será então pesquisado.
        • A propriedade cq:policy desse nó aponta para a política de conteúdo real (isto é, ela contém a configuração de design desse componente).
          • Isso permite que você tenha vários modelos que reusam as mesmas configurações de política de conteúdo.

Disponibilidade do modelo

Ao criar uma nova página na interface do administrador do site, a lista de modelos disponíveis depende do local da nova página e das restrições de posicionamento especificadas em cada modelo.

As propriedades a seguir determinam se um modelo T tem permissão para ser usado para uma nova página ser colocada como um filho da página P. Cada uma dessas propriedades é uma string de vários valores contendo zero ou mais Expressões Regulares usadas para correspondência com caminhos:

  • A propriedade cq:allowedTemplates do subnó jcr:content de P ou um ancestral de P.

  • A propriedade allowedPaths de T.

  • A propriedade allowedParents de T.

  • A propriedade allowedChildren do modelo de P.

A avaliação funciona do seguinte modo:

  • A primeira propriedade cq:allowedTemplates não vazia encontrada ao ascender à hierarquia de páginas começando com P é comparada com o caminho de T. Se nenhum dos valores corresponder, T será rejeitado.

  • Se T tiver uma propriedade allowedPaths não vazia, mas nenhum dos valores corresponder ao caminho de P, T será rejeitado.

  • Se ambas as propriedades acima estiverem vazias ou inexistentes, T será rejeitado, a menos que pertença ao mesmo aplicativo que P. T pertence ao mesmo aplicativo como P se e somente se o nome do segundo nível do caminho T for igual ao nome do segundo nível do caminho P. Por exemplo, o modelo /apps/wknd/templates/foo pertence ao mesmo aplicativo que a página /content/wknd.

  • Se T tiver uma propriedade allowedParents não vazia, mas nenhum dos valores corresponder ao caminho de P, T será rejeitado.

  • Se o modelo de P tiver uma propriedade allowedChildren não vazia, mas nenhum dos valores corresponder ao caminho de T, T será rejeitado.

  • Em todos os outros casos, T é permitido.

O diagrama a seguir descreve o processo de avaliação do modelo:

Processo de avaliação do modelo

CUIDADO

AEM oferta várias propriedades para controlar os modelos permitidos em Sites. No entanto, combiná-las pode levar a regras muito complexas que são difíceis de rastrear e gerenciar.

Portanto, o Adobe recomenda que você start de forma simples, definindo:

  • somente a propriedade cq:allowedTemplates

  • somente na raiz do site

Para ver um exemplo, consulte o tutorial WKND conteúdo: /content/wknd/jcr:content

As propriedades allowedPaths, allowedParents e allowedChildren também podem ser colocadas nos modelos para definir regras mais sofisticadas. No entanto, quando possível, é muito mais simples definir outras propriedades cq:allowedTemplates nas subseções do site, caso haja necessidade de restringir ainda mais os modelos permitidos.

Uma vantagem adicional é que as propriedades cq:allowedTemplates podem ser atualizadas por um autor na guia Avançado das Propriedades da página. As outras propriedades do modelo não podem ser atualizadas usando a interface do usuário (padrão), portanto, seria necessário um desenvolvedor para manter as regras e uma implantação de código para cada alteração.

Limitação de modelos usados em páginas secundárias

Para limitar quais modelos podem ser usados para criar páginas secundárias em uma determinada página, use a propriedade cq:allowedTemplates do nó jcr:content da página para especificar a lista de modelos a serem permitidos como páginas secundárias. Cada valor na lista deve ser um caminho absoluto para um modelo para uma página secundária permitida, por exemplo /apps/wknd/templates/page-content.

Você pode usar a propriedade cq:allowedTemplates no nó jcr:content do modelo para aplicar essa configuração a todas as páginas recém-criadas que usam esse modelo.

Se desejar adicionar mais restrições, por exemplo, em relação à hierarquia do modelo, você pode usar as propriedades allowedParents/allowedChildren no modelo. Você pode especificar explicitamente que as páginas criadas a partir de um modelo T devem ser pais/filhos de páginas criadas a partir de um modelo T.

Nesta página

Adobe Summit Banner

A virtual event April 27-28.

Expand your skills and get inspired.

Register for free
Adobe Summit Banner

A virtual event April 27-28.

Expand your skills and get inspired.

Register for free