Fluxo de trabalho de tema

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

Este é um tutorial em várias partes e presume-se que as etapas descritas no Modelos de página capítulo foram concluídas.

Objetivos

  1. Saiba como as fontes de tema de um site podem ser baixadas e modificadas.
  2. Saiba como codificar no site ativo para uma visualização em tempo real.
  3. 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

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:

  1. Criar um usuário local no AEM para uso com um servidor de desenvolvimento proxy.
  2. Baixe as fontes de tema do AEM e abra o usando um IDE local, como o VSCode.
  3. Modifique as fontes de tema e use um servidor proxy dev para visualizar as alterações de CSS e JavaScript em tempo real.
  4. 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

Implante atualizações em um tema para um ambiente AEM usando o pipeline de front-end do Cloud Manager.

Etapas de alto nível para o vídeo:

  1. Criar um novo Git repositório no Cloud Manager

  2. Adicione o projeto de fontes de tema ao repositório Git do Cloud Manager:

    $ 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>

  3. Configurar um Pipeline de front-end no Cloud Manager para implantar o código de front-end.

  4. 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:

Parabéns!

Parabéns, você acabou de atualizar e implantar um tema para AEM!

Próximas etapas

Aprofunde-se no desenvolvimento do AEM e entenda mais sobre a tecnologia subjacente criando um site usando o Arquétipo de projeto AEM.

Nesta página