Fluxo de trabalho de temas theming
Neste capítulo, vamos atualizar as fontes do tema de um site do Adobe Experience Manager para aplicar estilos específicos da marca. Vamos aprender a usar um servidor de proxy para visualizar as atualizações do CSS e do JavaScript ao codificarmos para o site ativo. Este tutorial também abordará como implantar atualizações de temas em um site do AEM por meio do pipeline de front-end do Adobe Cloud Manager.
No fim, o nosso site será atualizado para incluir estilos que correspondam à marca da WKND.
Pré-requisitos prerequisites
Este é um tutorial em várias partes, e presume-se que as etapas descritas no capítulo Modelos de página tenham sido concluídas.
Objetivos
- Aprender como as fontes do tema de um site podem ser baixadas e modificadas.
- Aprender a codificar para o site ativo e exibir uma visualização em tempo real.
- Entender o fluxo de trabalho de ponta a ponta de entrega de atualizações do CSS e do JavaScript compiladas como parte de um tema por meio do pipeline de front-end do Adobe Cloud Manager.
Atualizar um tema theme-update
Em seguida, faça alterações nas fontes do tema, de modo que o site corresponda à aparência da marca da WKND.
Etapas de alto nível do vídeo:
- Crie um usuário local no AEM para usar com um servidor de desenvolvimento de proxy.
- Baixe as fontes do tema do AEM e abra-as com um IDE local, como o VSCode.
- Modifique as fontes do tema e use um servidor de desenvolvimento de proxy para visualizar as alterações do CSS e do JavaScript em tempo real.
- Atualize as fontes do tema, de modo que o artigo de revista corresponda aos estilos e modelos da marca da WKND.
Arquivos de solução
Baixe os estilos completos do Tema de amostra da WKND
Implantar um tema com um pipeline de front-end deploy-theme
Implante as atualizações de um tema em um ambiente do AEM com o pipeline de front-end do Cloud Manager.
Etapas de alto nível do vídeo:
-
Criar um novo repositório do Git no Cloud Manager
-
Adicione o projeto de fontes do tema ao repositório do 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 do AEM de destino.
Exemplos de repositório
Há alguns exemplos de repositório do GitHub que podem ser usados como referência:
- aem-site-template-standard
- aem-site-template-basic-theme-e2e: usado como exemplo para projetos do “mundo real”.
Parabéns! congratulations
Parabéns, você acabou de atualizar e implantar um tema no AEM!
Próximas etapas next-steps
Saiba mais sobre o desenvolvimento no AEM e entenda mais sobre a tecnologia subjacente, criando um site com o Arquétipo de projeto do AEM.