Fluxo de trabalho de temas

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 conforme codificamos no site ativo. Este tutorial também abordará como implantar atualizações de temas em um site AEM usando o pipeline front-end do Adobe Cloud Manager.

No final, nosso site é atualizado para incluir estilos para corresponder à marca WKND.

Pré-requisitos

Este é um tutorial de várias partes e presume-se que as etapas descritas na seção Modelos de página capítulo foi concluído.

Objetivos

  1. Saiba como as fontes de tema de um site podem ser baixadas e modificadas.
  2. Saiba mais sobre o código do site ativo para uma visualização em tempo real.
  3. Entenda o fluxo de trabalho completo do fornecimento de atualizações de CSS e JavaScript compiladas como parte de um tema usando o pipeline 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. Crie um usuário local no AEM para uso com um servidor de desenvolvimento de proxy.
  2. Baixe as fontes de tema do AEM e abra usando um IDE local, como VSCode.
  3. Modifique as fontes de temas e use um servidor dev de proxy para visualizar as alterações de CSS e JavaScript em tempo real.
  4. Atualize as fontes de temas para que o artigo da revista corresponda aos estilos e modelos da marca WKND.

Arquivos de solução

Baixe os estilos concluídos para a Tema de amostra WKND

Implantar um tema usando um pipeline de front-end

Implante atualizações em um tema em um ambiente de AEM usando o pipeline 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 seu projeto de fontes de temas 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. 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 de AEM de destino.

Exemplo de acordos de recompra

Há alguns exemplos de acordos de recompra do 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

Faça um mergulho mais profundo no desenvolvimento AEM e entenda mais a tecnologia subjacente criando um site usando o Arquétipo de projeto AEM.

Nesta página