Criar site a partir de modelo

Saiba como criar rapidamente um novo site do AEM usando um modelo de site.

A história até agora

No documento anterior da jornada de criação rápida de site do AEM, Entender o Cloud Manager e o fluxo de trabalho de criação rápida de site, você aprendeu sobre o Cloud Manager e como ele se vincula ao novo processo de criação rápida de site e agora deve:

• Entenda como o AEM Sites e o Cloud Manager trabalham juntos para facilitar o desenvolvimento de front-end
• Veja como a etapa de personalização de front-end é totalmente dissociada do AEM e não requer conhecimento sobre ele.

Este artigo se baseia nesses fundamentos para que você possa executar a primeira etapa de configuração e criar um novo site a partir de um modelo, que pode ser personalizado posteriormente usando ferramentas de front-end.

Objetivo

Este documento ajuda você a entender como criar rapidamente um novo site do AEM usando um modelo de site. Depois de ler esse documento, você deverá:

• Entenda como obter modelos de site do AEM.
• Saiba como criar um novo site usando um modelo.
• Veja como baixar o modelo do seu novo site para fornecer ao desenvolvedor de front-end.

Função de responsabilidade

Essa parte da jornada se aplica ao administrador do AEM.

Modelos de site

Os modelos de site são uma maneira de combinar conteúdo básico do site em um pacote conveniente e reutilizável. Os modelos de site geralmente contêm o conteúdo básico e a estrutura do site, bem como informações de estilo para iniciar o novo site rapidamente. A estrutura real é a seguinte:

• files: pasta com o kit de interface, arquivo XD e possivelmente outros arquivos
• previews: pasta com capturas de tela do modelo de site
• site: pacote de conteúdo do conteúdo que é copiado para cada site criado a partir deste modelo, como modelos de página, páginas, etc.
• theme: fontes do tema do modelo para modificar a aparência do site, incluindo CSS, JavaScript, etc.

Os modelos são eficientes porque são reutilizáveis para que os autores de conteúdo possam criar um site rapidamente. E como é possível ter vários modelos disponíveis na instalação do AEM, você tem a flexibilidade para atender a várias necessidades do negócio.

Obter um modelo de site

A maneira mais simples de começar é baixar a versão mais recente do modelo de site padrão do AEM no repositório do GitHub.

Após o download, você pode carregá-lo no ambiente do AEM como faria com qualquer outro pacote. Consulte a seção Recursos adicionais para obter detalhes sobre como trabalhar com pacotes se precisar de mais informações sobre este tópico.

Instalar um modelo de site

Usar um modelo para criar um novo site é muito fácil.

1. Faça logon no ambiente de criação do AEM e navegue até o console de sites

   • https://<your-author-environment>.adobeaemcloud.com/sites.html/content

2. Toque ou clique em Criar, no canto superior direito da tela e, no menu suspenso, selecione Site a partir de modelo.

   

3. No assistente Criar site, toque ou clique em Importar na parte superior da coluna à esquerda.

   

4. No navegador de arquivos, localize o modelo que você baixou anteriormente e toque ou clique Fazer upload.

5. Depois de carregado, ele aparece na lista de modelos disponíveis. Toque ou clique nele para selecioná-lo (o que também revela informações sobre o modelo na coluna direita) e toque ou clique em Próximo.

   

6. Forneça um título para o site. É possível fornecer um nome de site ou, se omitido, ele será gerado a partir do título.

   • O título do site aparece na barra de título dos navegadores.
   • O nome do site se torna parte do URL.

7. Toque ou clique em Criar e o novo site será criado a partir do modelo de site.

   

8. Na caixa de diálogo de confirmação exibida, toque ou clique em Concluído.

   

9. No console Sites, os novos sites estarão visíveis e poderão ser navegados para explorar sua estrutura básica, conforme definido pelo modelo.

   

Os autores de conteúdo agora podem começar a criar.

É necessária mais personalização?

Os modelos de site são muito eficientes e flexíveis, e vários podem ser criados para um projeto, permitindo variações de site de fácil criação. Dependendo do nível de personalização já executado no modelo de site utilizado, talvez você nem precise de mais personalizações do front-end.

• Se o site não requer mais personalizações, parabéns. Sua jornada termina aqui.
• Se ainda precisar personalizar mais front-end ou se simplesmente quiser entender o processo completo caso precise personalizar futuramente, continue lendo.

Página de exemplo

Se você precisar personalizar mais o front-end, lembre-se de que o desenvolvedor de front-end pode não estar familiarizado com os detalhes do seu conteúdo. Portanto, é uma boa ideia fornecer ao desenvolvedor um caminho para um conteúdo característico que possa ser usado como base de referência, à medida que o tema é personalizado. Um exemplo típico é a página inicial do idioma principal do site.

1. No navegador de sites, navegue até a página inicial do idioma principal do site e toque ou clique na página para selecioná-la e, em seguida, toque ou clique em Editar na barra de menu.

   

2. No editor, selecione o botão Informações da página na barra de ferramentas e Exibir conforme publicado.

   

3. Na guia que é aberta, copie o caminho do conteúdo da barra de endereços. Será algo parecido com /content/<your-site>/en/home.html?wcmmode=disabled.

   

4. Salve o caminho para fornecer posteriormente ao desenvolvedor de front-end.

Baixar o tema

Agora que o site foi criado, o tema do site conforme gerado pelo modelo pode ser baixado e fornecido ao desenvolvedor de front-end para personalização.

1. No console de sites, exiba o painel Site.

   

2. Toque ou clique na raiz do novo site e, em seguida, toque ou clique em Baixar fontes de tema no painel do site.

   

Agora você tem uma cópia dos arquivos da fonte do tema nos arquivos baixados.

Configurar usuário proxy

Para que o desenvolvedor de front-end visualize as personalizações usando o conteúdo real do AEM do site, é necessário configurar um usuário proxy.

1. Na navegação principal do AEM, vá até Ferramentas -> Segurança -> Usuários.

2. No console de gerenciamento de usuários, toque ou clique em Criar.

   

3. Na janela Criar novo usuário, você deverá ao menos fornecer:

   • ID - Anote esse valor, pois ele deve ser fornecido ao desenvolvedor front-end.
   • Senha - Salve esse valor com segurança em um cofre de senhas, pois ele deve ser fornecido ao desenvolvedor front-end.

   

4. Na guia Grupos, adicione o usuário proxy ao grupo contributors.

   • Digitar o termo contributors aciona o recurso de preenchimento automático do AEM, para facilitar a seleção do grupo.

   

5. Toque ou clique em Salvar e fechar.

Agora você concluiu a configuração. Agora os autores de conteúdo podem começar a criar conteúdo no site; a preparação para personalização de front-end começa na próxima etapa da jornada.

O que vem a seguir

Agora que concluiu esta parte da jornada de Criação rápida de sites do AEM, você deve:

• Entenda como obter modelos de site do AEM.
• Saiba como criar um novo site usando um modelo.
• Veja como baixar o modelo do seu novo site para fornecer ao desenvolvedor de front-end.

Aplique esse conhecimento e prossiga com sua jornada de criação rápida de sites do AEM, revisando a seguir o documento Configurar o pipeline, onde você criará um pipeline de front-end para gerenciar a personalização do tema do site.

Recursos adicionais

Embora seja recomendável seguir para a próxima parte da jornada de Criação rápida de sites revisando o documento Configurar o pipeline, os recursos opcionais a seguir fornecerão uma melhor explicação dos conceitos mencionados neste documento. Porém, eles não são obrigatórios para continuar na jornada.

• Modelo de site padrão do AEM - Este é o repositório GitHub do modelo de site padrão do AEM.
• Criar e organizar páginas - Este guia detalha como gerenciar páginas do seu site do AEM, caso deseje personalizá-lo ainda mais após criá-lo a partir do modelo.
• Como trabalhar com pacotes - Os pacotes permitem a importação e exportação de conteúdo do repositório. Este documento explica como trabalhar com pacotes no AEM 6.5, o que também se aplica ao AEMaaCS.
• Documentação de administração do site - Consulte os documentos técnicos sobre criação de sites para obter mais detalhes sobre os recursos da ferramenta de Criação rápida de sites.

Recursos de Business.Adobe.com