Flujo de trabajo temático

En este capítulo actualizaremos las fuentes temáticas de un sitio de Adobe Experience Manager para aplicar estilos específicos de marca. Aprenderemos a utilizar un servidor proxy para ver una vista previa de las actualizaciones de CSS y Javascript a medida que se codifica en el sitio activo. Este tutorial también tratará sobre cómo implementar actualizaciones de temas en un sitio AEM mediante la canalización front-end de Adobe Cloud Manager.

Al final, nuestro sitio se actualizará para incluir estilos que coincidan con la marca WKND.

Requisitos previos

Este es un tutorial de varias partes y se da por hecho que los pasos descritos en la sección Plantillas de página se ha completado el capítulo.

Objetivos

  1. Descubra cómo se pueden descargar y modificar las fuentes temáticas de un sitio.
  2. Aprenda cómo codificar el sitio activo para obtener una vista previa en tiempo real.
  3. Comprenda el flujo de trabajo completo de entrega de actualizaciones de JavaScript y CSS compiladas como parte de un tema mediante la canalización front-end de Adobe Cloud Manager.

Actualizar un tema

A continuación, realice cambios en los orígenes de los temas para que el sitio coincida con el aspecto de la marca WKND.

Pasos de alto nivel para el vídeo:

  1. Cree un usuario local en AEM para utilizarlo con un servidor de desarrollo de proxy.
  2. Descargue los orígenes de los temas de AEM y ábralo con un IDE local, como VSCode.
  3. Modifique los orígenes de los temas y utilice un servidor de desarrollo proxy para previsualizar los cambios de CSS y JavaScript en tiempo real.
  4. Actualice las fuentes temáticas para que el artículo de la revista coincida con los estilos y maquetas de marca WKND.

Archivos de solución

Descargue los estilos terminados para el Tema de muestra de WKND

Implementar un tema mediante una canalización de front-end

Implemente actualizaciones en un tema en un entorno AEM mediante la canalización front-end de Cloud Manager.

Pasos de alto nivel para el vídeo:

  1. Crear una nueva Git repositorio en Cloud Manager

  2. Añada su proyecto de fuentes de temas al repositorio de Git de 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 un Canalización front-end en Cloud Manager para implementar el código de front-end.

  4. Ejecute la canalización de front-end para implementar actualizaciones en el entorno de AEM de destino.

Ejemplos de repos

Hay un par de repositorios de GitHub de ejemplo que se pueden usar como referencia:

Felicitaciones!

¡Felicidades, acaba de crear y actualizar un tema para AEM!

Siguientes pasos

Participe más profundamente en AEM desarrollo y comprenda más de la tecnología subyacente creando un sitio con el Tipo de archivo del proyecto AEM.

En esta página