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 do AEM local, usando as suas habilidades do Maven:

$ mvn clean install -PautoInstallSinglePackage

$ mvn clean install -PautoInstallSinglePackage -Pclassic

Crie um modelo com o Tipo de modelo de página chamado Página de artigo.

Alterne para o modo Estrutura.

Adicione um componente de Fragmento de experiência para agir como 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 será direcionado com o CSS no próximo capítulo.

Adicione um componente de 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 será direcionado com o CSS no próximo capítulo.

Bloqueie o container 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 será direcionado com o CSS no próximo capítulo.

Adicione um componente de Imagem ao container principal.

• Desbloqueie o componente de Imagem.

Adicione um componente de Navegação estrutural abaixo do componente de Imagem no container principal.

• Crie uma política para o componente de Navegação estrutural chamada Página de artigo - navegação estrutural. Defina o Nível inicial da navegação como 4.

Adicione um componente de Container abaixo do componente de Navegação estrutural e dentro do container principal. Ele atuará como Container de conteúdo do modelo.

• Desbloqueie o container de Conteúdo.
• Defina a política como Conteúdo da página.

Adicione outro componente de Container abaixo do Container de conteúdo. Ele atuará como container do Painel lateral do modelo.

• Desbloqueie o container do Painel lateral.
• Crie uma política chamada Página de artigo - painel lateral.
• Configure os Componentes permitidos em Projeto de sites da 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 de raiz da página. Esse é o contêiner mais externo do modelo. Defina a política como Raiz da página.

• Em Configurações do container, defina o Layout como Grade responsiva.

Ative modo de layout do Container de conteúdo. Arraste a alça da direita para a esquerda e reduza o container para oito colunas de largura.

Ative o modo de layout para o Container do painel lateral. Arraste a alça da direita para a esquerda e reduza o container para quatro colunas de largura. Em seguida, arraste a alça esquerda da esquerda para a direita por uma coluna para reduzir o container para três colunas de largura e deixe um intervalo de uma coluna entre o Container de conteúdo.

Abra o emulador móvel e alterne para um ponto de quebra móvel. Ative o modo de layout novamente e aumente o Container de conteúdo e o Container do painel lateral para ocuparem a largura total da página. Isso empilha os containers verticalmente no ponto de quebra móvel.

Atualize a política do componente Texto no Container de conteúdo.

• Defina a política como Texto do 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.

Alterne para o modo Conteúdo inicial.

Adicione um componente de Título ao Container de conteúdo. Ele atuará como título do artigo. Se deixado em branco, ele exibirá automaticamente o título da página atual.

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

• Configure o componente com o texto: “Pelo autor”. Esse é um espaço reservado para texto.
• Defina o tipo como H4.

Adicione um componente de Texto abaixo do componente de título Pelo autor.

Adicione um componente de Título ao Container do painel lateral.

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

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

Adicione um componente de Separador abaixo do componente de Compartilhar em redes sociais.

Adicione um componente de Download abaixo do componente de Separador.

Adicione um componente de Lista abaixo do componente de Download.

Atualize as Propriedades da página inicial do modelo.

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

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

Habilite o modelo de página de artigo.

Edite as propriedades do modelo de página de artigo e carregue a seguinte miniatura para identificar rapidamente as páginas criadas com o modelo de 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 com o gerenciador de pacotes em http://localhost:4502/crx/packmgr/index.jsp

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

• Atualize a política do componente de Container no modelo.
• Defina a política como Raiz XF.
• Os Componentes permitidos selecionam o grupo de componentes de Projeto de sites da WKND: estrutura para incluir componentes de Navegação em idiomas, 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 Container de raiz do fragmento. É o Container mais externo.

• Defina o Layout como Grade responsiva.

Adicione o Logotipo escuro da WKND como imagem à parte superior do Container. O logotipo foi incluído no pacote instalado em uma etapa anterior.

• Modifique o layout do Logotipo escuro da WKND para ter duas colunas de largura. Arraste as alças da direita para a esquerda.
• Configure o logotipo com o Texto alternativo “Logotipo da WKND”.
• Configure o logotipo para Vincular /content/wknd/us/en à página inicial.

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

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

Remova o componente de Navegação em idiomas.

Modifique o layout do componente de Pesquisa para ter duas colunas de largura. Arraste as alças da direita para a esquerda. Todos os componentes agora devem estar alinhados horizontalmente na mesma linha.

Abra o fFragmento 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 Container de raiz do fragmento. É o Container mais externo.

• Defina o Layout como Grade responsiva.

Adicione o Logotipo claro da WKND como imagem à parte superior do Container. O logotipo foi incluído no pacote instalado em uma etapa anterior.

• Modifique o layout do Logotipo claro da WKND para ter duas colunas de largura. Arraste as alças da direita para a esquerda.
• Configure o logotipo com o Texto alternativo “Logotipo claro da WKND”.
• Configure o logotipo para Vincular /content/wknd/us/en à página inicial.

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

• Defina os Níveis de exclusão de raiz como 1.
• Desmarque Coletar todas as páginas secundárias.
• Defina a Profundidade da estrutura de navegação como 1.
• Modifique o layout do componente de 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 > BR > PT > Revista.

• Escolha o modelo de Página de artigo.
• Em Propriedades, defina o Título como “Ultimate Guide to LA Skateparks”
• Defina o Nome como “guide-la-skateparks”.

Substitua o título Pelo autor pelo texto “Por Stacey Roswells”.

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

Adicione outro componente de Texto.

• Atualize o componente para incluir a citação: “Não há lugar melhor para andar de skate que Los Angeles”.
• Edite no editor de rich text no modo de tela cheia e modifique a citação acima para usar o elemento de Bloco de aspas.

Continue preenchendo o corpo do artigo conforme as simulações.

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

• Em Download > Propriedades, clique na caixa de seleção para Obter o título do ativo do DAM.
• Defina a Descrição como: “Leia a história completa”.
• Defina o Texto de ação como: “Baixar o PDF”.

Configure o componente de Lista.

• Em Configurações da lista > Criar lista com, selecione Páginas secundárias.
• Defina a Página primária como /content/wknd/us/en/magazine.
• Em Configurações dos itens, marque Vincular itens e 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 visualize 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 de página criado pelo arquétipo de projeto do AEM, sendo 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 visualize a hierarquia de nós:

Você deve ser capaz de mapear livremente cada um dos nós para os componentes criados. Confira se você é capaz de identificar os diferentes containers 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. Visualize as propriedades do componente no CRXDE Lite:

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

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

Inspecione outro componente dentro dos componentes da 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 de componente de proxy para incluir um componente principal. Na verdade, todos os componentes na base de código da WKND são proxies dos componentes principais do AEM (exceto o componente de demonstração personalizada “Olá, mundo”). É 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 com 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. Elas se dividem 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 de 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 neste artigo.

Inspecione 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 VSCode, abra 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 do 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 de políticas de /conf/wknd/settings/wcm/policies.

Inspecione 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, e somente o novo conteúdo será adicionado. Como os criadores de conteúdo podem estar atualizando esses caminhos, é importante que uma implantação do código não substitua o conteúdo. Consulte a documentação do FileVault para 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.