Fluxo de trabalho de tema theming
Neste capítulo, atualizamos as fontes de tema de um site do Adobe Experience Manager para aplicar estilos específicos da marca. Aprendemos a usar um servidor proxy para visualizar as atualizações de CSS e JavaScript ao codificarmos para o site ativo. Este tutorial também abordará como implantar atualizações de temas em um site AEM usando o pipeline de front-end do Adobe Cloud Manager.
No final, nosso site é atualizado para incluir estilos que correspondam à marca WKND.
Pré-requisitos prerequisites
Este é um tutorial de várias partes e presume-se que as etapas descritas no capítulo Modelos de página foram concluídas.
Objetivos
- Saiba como as fontes de tema de um site podem ser baixadas e modificadas.
- Saiba como codificar no site ativo para uma visualização em tempo real.
- Entenda o fluxo de trabalho completo de entrega de atualizações de CSS e JavaScript compiladas como parte de um tema usando o pipeline de front-end do Adobe Cloud Manager.
Atualizar um tema theme-update
Em seguida, faça alterações nas fontes de tema para que o site corresponda à aparência da Marca WKND.
Etapas de alto nível para o vídeo:
- Criar um usuário local no AEM para uso com um servidor de desenvolvimento proxy.
- Baixe as fontes de tema do AEM e abra o usando um IDE local, como o VSCode.
- Modifique as fontes de tema e use um servidor proxy dev para visualizar as alterações de CSS e JavaScript em tempo real.
- Atualize as fontes de tema para que o artigo da revista corresponda aos estilos e modelos da marca WKND.
Arquivos de solução
Baixe os estilos concluídos para o Tema de Amostra do WKND
Implantar um tema usando um pipeline de front-end deploy-theme
Implante atualizações em um tema para um ambiente AEM usando o pipeline front-end do Cloud Manager.
Etapas de alto nível para o vídeo:
-
Criar um novo repositório Git no Cloud Manager
-
Adicione o projeto de fontes de tema ao repositório Git do Cloud Manager:
code language-shell $ cd <PATH_TO_THEME_SOURCES_FOLDER> $ git init -b main $ git add . $ git commit -m "initial commit" $ git remote add origin <CLOUD_MANAGER_GIT_REPOSITORY_URL> -
Configure um Pipeline de front-end no Cloud Manager para implantar o código de front-end.
-
Execute o pipeline de front-end para implantar atualizações no ambiente AEM de destino.
Exemplo de acordos de recompra
Há alguns exemplos de repositórios GitHub que podem ser usados como referência:
- aem-site-template-standard
- aem-site-template-basic-theme-e2e - Usado como exemplo para projetos "reais".
Parabéns. congratulations
Parabéns, você acabou de atualizar e implantar um tema para AEM!
Próximas etapas next-steps
Saiba mais sobre o desenvolvimento do AEM e entenda mais sobre a tecnologia subjacente criando um site usando o Arquétipo de projeto do AEM.