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

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

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

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

  2. 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>
    
  3. Configure 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. 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.

recommendation-more-help
b2a561c1-47c0-4182-b8c1-757a197484f9