Páginas e modelos pages-and-template

Confira a ramificação tutorial/pages-templates-start do GitHub

$ cd ~/code/aem-guides-wknd
$ git checkout tutorial/pages-templates-start

Implante a base de código em uma instância de AEM local usando suas habilidades de Maven:

$ mvn clean install -PautoInstallSinglePackage

$ mvn clean install -PautoInstallSinglePackage -Pclassic

Crie um modelo usando o Tipo de Modelo de Página, chamado Página de Artigo.

Mudar para o modo Estrutura.

Adicione um componente Fragmento de experiência para agir como o Cabeçalho na parte superior do modelo.

• Configure o componente para apontar para /content/experience-fragments/wknd/us/en/site/header/master.
• Defina a política como Cabeçalho da página e verifique se o Elemento Padrão está definido como header. O elemento header é direcionado com CSS no próximo capítulo.

Adicione um componente Fragmento de experiência para atuar como Rodapé na parte inferior do modelo.

• Configure o componente para apontar para /content/experience-fragments/wknd/us/en/site/footer/master.
• Defina a política como Rodapé da página e verifique se o Elemento Padrão está definido como footer. O elemento footer é direcionado com CSS no próximo capítulo.

Bloqueie o contêiner principal que foi incluído quando o modelo foi criado inicialmente.

• Defina a política como Página principal e verifique se o Elemento padrão está definido como main. O elemento main é direcionado com CSS no próximo capítulo.

Adicione um componente Imagem ao contêiner principal.

• Desbloquear o componente Imagem.

Adicione um componente de Navegação estrutural abaixo do componente Imagem no contêiner principal.

• Crie uma política para o componente Navegação estrutural chamado Página de Artigo - Navegação estrutural. Defina o Nível de Início da Navegação como 4.

Adicione um componente Contêiner abaixo do componente Navegação estrutural e dentro do contêiner principal. Isto atua como o Contêiner de conteúdo do modelo.

• Desbloqueie o contêiner Conteúdo.
• Defina a política como Conteúdo da Página.

Adicione outro componente Contêiner abaixo do Contêiner de conteúdo. Funciona como o contêiner Painel lateral do modelo.

• Desbloqueie o contêiner Painel lateral.
• Crie uma política chamada Página de Artigo - Painel Lateral.
• Configure os Componentes Permitidos em Projeto de Sites WKND - Conteúdo para incluir: Botão, Download, Imagem, Lista, Separador, Compartilhamento em Redes Sociais, Texto e Título.

Atualize a política do container Raiz da página. Este é o contêiner mais externo do modelo. Defina a política como Raiz da página.

• Em Configurações do Contêiner, defina o Layout como Grade Responsiva.

Ativar Modo de Layout para o Contêiner de conteúdo. Arraste a alça da direita para a esquerda e reduza o contêiner para oito colunas de largura.

Ativar modo de layout para o contêiner do painel lateral. Arraste a alça da direita para a esquerda e reduza o contêiner para ter quatro colunas de largura. Em seguida, arraste a alça esquerda da esquerda para a direita uma coluna para tornar o contêiner de 3 colunas largo e deixe um intervalo de 1 coluna entre o contêiner de conteúdo.

Abra o emulador móvel e alterne para um ponto de interrupção móvel. Ative o modo de layout novamente e torne o Contêiner de conteúdo e o Contêiner de painel lateral a largura total da página. Isso empilha os contêineres verticalmente no ponto de interrupção móvel.

Atualize a política do componente Texto no Contêiner de conteúdo.

• Defina a política como Texto de conteúdo.
• Em Plug-ins > Estilos de parágrafo, marque a opção Habilitar estilos de parágrafo e verifique se o Bloco de aspas está habilitado.

Alternar para o modo Conteúdo Inicial.

Adicione um componente Título ao Contêiner de conteúdo. Atua como o título do Artigo. Quando deixado em branco, ele exibe automaticamente o Título da página atual.

Adicione um segundo componente Title abaixo do primeiro componente de Título.

• Configure o componente com o texto: "Por autor". Este é um espaço reservado para texto.
• Defina o tipo como H4.

Adicione um componente Texto abaixo do componente de Título Por Autor.

Adicione um componente Título ao Contêiner do Painel Lateral.

• Configure o componente com o texto: "Compartilhar esta história".
• Defina o tipo como H5.

Adicione um componente Compartilhamento em redes sociais abaixo do componente de Título Compartilhar esta história.

Adicione um componente Separador abaixo do componente Compartilhamento em Redes Sociais.

Adicione um componente Download abaixo do componente Separador.

Adicione um componente Lista abaixo do componente Download.

Atualize as Propriedades da Página Inicial do modelo.

• Em Redes sociais > Compartilhamento em Redes Sociais, marque Facebook e Pinterest

Exiba o modelo no console Modelo navegando até http://localhost:4502/libs/wcm/core/content/sites/templates.html/conf/wknd

Habilitar o modelo de Página de Artigo.

Edite as propriedades do modelo Página de artigo e faça upload da seguinte miniatura para identificar rapidamente as páginas criadas usando o modelo Página de artigo:

Baixe o pacote de conteúdo de exemplo WKND-PagesTemplates-Content-Assets.zip.

Carregue e instale o pacote de conteúdo usando o Gerenciador de Pacotes em http://localhost:4502/crx/packmgr/index.jsp

Atualize o modelo de Variação da Web, que é o modelo usado para Fragmentos de experiência em http://localhost:4502/editor.html/conf/wknd/settings/wcm/templates/xf-web-variation/structure.html

• Atualize a política para o componente Contêiner no modelo.
• Defina a política como Raiz XF.
• Em, os Componentes Permitidos selecionam o grupo de componentes Projeto de Sites WKND - Estrutura para incluir componentes de Navegação de Idioma, Navegação e Pesquisa Rápida.

Abra o Fragmento de experiência que renderiza o Cabeçalho em http://localhost:4502/editor.html/content/experience-fragments/wknd/us/en/site/header/master.html

Configure o Contêiner raiz do fragmento. Este é o mais externo Contêiner.

• Definir o Layout como Grade responsiva

Adicione o Logotipo Escuro WKND como uma imagem à parte superior do Contêiner. O logotipo foi incluído no pacote instalado em uma etapa anterior.

• Modifique o layout do Logotipo Escuro do WKND para ter duas colunas de largura. Arraste as alças da direita para a esquerda.
• Configure o logotipo com Texto alternativo do "Logotipo WKND".
• Configure o logotipo para Link para /content/wknd/us/en a Home page.

Configure o componente de Navegação que já foi colocado na página.

• Defina os Excluir Níveis de Raiz para 1.
• Defina a Profundidade da Estrutura de Navegação como 1.
• Modifique o layout do componente Navegação para ter oito colunas de largura. Arraste as alças da direita para a esquerda.

Remova o componente Navegação por idiomas.

Modifique o layout do componente Pesquisa para ter duas colunas de largura. Arraste as alças da direita para a esquerda. Todos os componentes agora devem ser alinhados horizontalmente em uma única linha.

Abra o Fragmento de experiência que renderiza o Rodapé em http://localhost:4502/editor.html/content/experience-fragments/wknd/us/en/site/footer/master.html

Configure o Contêiner raiz do fragmento. Este é o mais externo Contêiner.

• Definir o Layout como Grade responsiva

Adicione o Logotipo de Luz WKND como uma imagem à parte superior do Contêiner. O logotipo foi incluído no pacote instalado em uma etapa anterior.

• Modifique o layout do Logotipo Leve do WKND para ter duas colunas de largura. Arraste as alças da direita para a esquerda.
• Configure o logotipo com Texto alternativo de "Luz de logotipo WKND".
• Configure o logotipo para Link para /content/wknd/us/en a Home page.

Adicione um componente Navegação abaixo do logotipo. Configurar o componente de Navegação:

• Defina os Excluir Níveis de Raiz para 1.
• Desmarcar Coletar todas as páginas secundárias.
• Defina a Profundidade da Estrutura de Navegação como 1.
• Modifique o layout do componente Navegação para ter oito colunas de largura. Arraste as alças da direita para a esquerda.

Navegue até o console Sites em http://localhost:4502/sites.html/content/wknd/us/en/magazine.

Crie uma página abaixo de WKND > US > EN > Magazine.

• Escolha o modelo da Página de Artigo.
• Em Propriedades, defina o Título como "Guia Final para Skateparks de Los Angeles"
• Defina o Nome como "guide-la-skateparks"

Substituir o Título Por Autor pelo texto "Por Stacey Roswells".

Atualize o componente Texto para incluir um parágrafo para preencher o artigo. Você pode usar o seguinte arquivo de texto como cópia: la-skate-parks-copy.txt.

Adicionar outro componente Texto.

• Atualize o componente para incluir a citação: "Não há lugar melhor para destruir do que Los Angeles".
• Edite o Editor de Rich Text no modo de tela cheia e modifique a citação acima para usar o elemento Bloco de citações.

Continue preenchendo o corpo do artigo para corresponder aos modelos.

Configure o componente Download para usar uma versão PDF do artigo.

• Em Download > Propriedades, clique na caixa de seleção para Obter o título do ativo DAM.
• Defina a Descrição como: "Obter a História Completa".
• Defina o Texto de Ação como: "Baixar PDF".

Configurar o componente Lista.

• Em Configurações da Lista > Criar Lista Usando, selecione Páginas Secundárias.
• Definir a Página Pai como /content/wknd/us/en/magazine.
• Em, as Configurações de Item verificam Vincular Itens e verificam Mostrar data.

Abra o CRXDE-Lite e use a navegação em árvore para navegar até /content/wknd/us/en/magazine/guide-la-skateparks.

Clique no nó jcr:content abaixo da página la-skateparks e exiba as propriedades:

Observe o valor de cq:template, que aponta para /conf/wknd/settings/wcm/templates/article-page, o Modelo de página de artigo criado anteriormente.

Observe também o valor de sling:resourceType, que aponta para wknd/components/page. É o componente Página criado pelo arquétipo de projeto AEM e é responsável pela renderização da página com base no modelo.

Expanda o nó jcr:content abaixo de /content/wknd/us/en/magazine/guide-la-skateparks/jcr:content e exiba a hierarquia do nó:

Você deve ser capaz de mapear livremente cada um dos nós para componentes que foram criados. Veja se você pode identificar os diferentes Contêineres de Layout usados ao inspecionar os nós com o prefixo container.

Em seguida, inspecione o componente da página em /apps/wknd/components/page. Veja as propriedades do componente no CRXDE Lite:

Há apenas dois scripts HTL, customfooterlibs.html e customheaderlibs.html abaixo do componente página. Como este componente renderiza a página?

A propriedade sling:resourceSuperType aponta para core/wcm/components/page/v2/page. Esta propriedade permite que o componente de página da WKND herde all a funcionalidade do componente de página, dos Componentes principais. Este é o primeiro exemplo de algo chamado de Padrão de Componente Proxy. Mais informações podem ser encontradas aqui.

Inspect é outro componente dentro dos componentes WKND, o componente Breadcrumb de: /apps/wknd/components/breadcrumb. Observe que a mesma propriedade sling:resourceSuperType pode ser encontrada, mas desta vez ela aponta para core/wcm/components/breadcrumb/v2/breadcrumb. Este é outro exemplo de como usar o padrão do componente Proxy para incluir um Componente principal. Na verdade, todos os componentes na base de código WKND são proxies de componentes principais AEM (exceto para o componente de demonstração personalizada HelloWorld ). É uma prática recomendada reutilizar o máximo possível da funcionalidade dos Componentes principais antes de gravar o código personalizado.

Em seguida, inspecione a página dos Componentes principais em /libs/core/wcm/components/page/v2/page usando o CRXDE Lite:

Observe que muitos arquivos de script estão incluídos abaixo dessa página. A página dos Componentes principais contém várias funcionalidades. Essa funcionalidade é dividida em vários scripts para facilitar a manutenção e a leitura. Você pode rastrear a inclusão dos scripts HTL abrindo o page.html e procurando por data-sly-include:

<!--/* /libs/core/wcm/components/page/v2/page/page.html */-->
<!DOCTYPE HTML>
<html data-sly-use.page="com.adobe.cq.wcm.core.components.models.Page" lang="${page.language}"
    data-sly-use.head="head.html"
    data-sly-use.footer="footer.html"
    data-sly-use.redirect="redirect.html">
    <head data-sly-call="${head.head @ page = page}"></head>
    <body class="${page.cssClassNames}"
        id="${page.id}"
        data-cmp-data-layer-enabled="${page.data ? true : false}">
        <script data-sly-test.dataLayerEnabled="${page.data}">
        window.adobeDataLayer = window.adobeDataLayer || [];
        adobeDataLayer.push({
            page: JSON.parse("${page.data.json @ context='scriptString'}"),
            event:'cmp:show',
            eventInfo: {
                path: 'page.${page.id @ context="scriptString"}'
            }
        });
        </script>
        <sly data-sly-test.isRedirectPage="${page.redirectTarget && (wcmmode.edit || wcmmode.preview)}"
            data-sly-call="${redirect.redirect @ redirectTarget = page.redirectTarget}"></sly>
        <sly data-sly-test="${!isRedirectPage}">
            <sly data-sly-include="body.skiptomaincontent.html"></sly>
            <sly data-sly-include="body.socialmedia_begin.html"></sly>
            <sly data-sly-include="body.html"></sly>
            <sly data-sly-call="${footer.footer @ page = page}"></sly>
            <sly data-sly-include="body.socialmedia_end.html"></sly>
        </sly>
    </body>
</html>

O outro motivo para dividir o HTL em vários scripts é permitir que os componentes proxy substituam scripts individuais para implementar uma lógica de negócios personalizada. Os scripts HTL customfooterlibs.html e customheaderlibs.html são criados para que a finalidade explícita seja substituída pela implementação de projetos.

Você pode saber mais sobre como o Modelo Editável influencia a renderização da página de conteúdo lendo este artigo.

Inspect é outro Componente Principal, como a Navegação Estrutural em /libs/core/wcm/components/breadcrumb/v2/breadcrumb. Visualize o script breadcrumb.html para entender como a marcação do componente de Navegação estrutural é gerada.

No, o VSCode abre o projeto aem-guides-wknd.

Expanda o módulo ui.content no Gerenciador de projetos. Expanda a pasta src e navegue até /conf/wknd/settings/wcm/templates.

Clique com o botão direito do mouse na pasta templates e selecione Importar do Servidor AEM:

O article-page deve ser importado, e os modelos page-content, xf-web-variation também devem ser atualizados.

Repita as etapas para importar o conteúdo, mas selecione a pasta políticas de /conf/wknd/settings/wcm/policies.

Inspect o arquivo filter.xml de ui.content/src/main/content/META-INF/vault/filter.xml.

<!--ui.content filter.xml-->
<?xml version="1.0" encoding="UTF-8"?>
<workspaceFilter version="1.0">
    <filter root="/conf/wknd" mode="merge"/>
    <filter root="/content/wknd" mode="merge"/>
    <filter root="/content/dam/wknd" mode="merge"/>
    <filter root="/content/experience-fragments/wknd" mode="merge"/>
</workspaceFilter>

O arquivo filter.xml é responsável por identificar os caminhos dos nós instalados com o pacote. Observe o mode="merge" em cada filtro que indica que o conteúdo existente não deve ser modificado, somente o novo conteúdo será adicionado. Como os autores de conteúdo podem estar atualizando esses caminhos, é importante que uma implantação de código não substitua o conteúdo. Consulte a documentação do FileVault para obter mais detalhes sobre como trabalhar com elementos de filtro.

Compare ui.content/src/main/content/META-INF/vault/filter.xml e ui.apps/src/main/content/META-INF/vault/filter.xml para entender os diferentes nós gerenciados por cada módulo.