Flujo de trabajo de temas theming
En este capítulo actualizamos las fuentes temáticas de un sitio Adobe Experience Manager para aplicar estilos específicos de marca. Aprendemos a utilizar un servidor proxy para ver una previsualización de las actualizaciones de CSS y Javascript a medida que codificamos en el sitio activo. Este tutorial también explica cómo implementar actualizaciones de temas en un sitio de AEM mediante la canalización front-end de Adobe Cloud Manager.
Al final, nuestro sitio se actualiza para incluir estilos que coincidan con la marca WKND.
Requisitos previos prerequisites
Este es un tutorial de varias partes y se da por hecho que los pasos descritos en el capítulo Plantillas de página se han completado.
Objetivos
- Descubra cómo se pueden descargar y modificar las fuentes de temas de un sitio.
- Aprenda a codificar el sitio en directo para una previsualización en tiempo real.
- Comprenda el flujo de trabajo completo de entrega de actualizaciones compiladas de CSS y JavaScript como parte de un tema mediante la canalización front-end de Adobe Cloud Manager.
Actualizar una temática theme-update
A continuación, realice cambios en las fuentes de temas para que el sitio coincida con el aspecto de la marca WKND.
Pasos de alto nivel para el vídeo:
- Cree un usuario local en AEM para utilizarlo con un servidor de desarrollo proxy.
- Descargue las fuentes de temas de AEM y ábralas con un IDE local, como VSCode.
- Modifique las fuentes de temas y utilice un servidor de desarrollo proxy para previsualizar los cambios de CSS y JavaScript en tiempo real.
- Actualice las fuentes del tema para que el artículo de la revista coincida con los estilos y maquetas de la marca WKND.
Archivos de solución
Descargar los estilos finalizados para el Tema de muestra WKND
Implementar un tema mediante una canalización front-end deploy-theme
Implementar actualizaciones en un tema en un entorno de AEM mediante la canalización front-end de Cloud Manager.
Pasos de alto nivel para el vídeo:
-
Crear un nuevo repositorio de Git en Cloud Manager
-
Añada el proyecto de fuentes temáticas al repositorio de Git de 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 una canalización front-end en Cloud Manager para implementar el código front-end.
-
Ejecute la canalización front-end para implementar actualizaciones en el entorno de AEM de destino.
Cesiones temporales de ejemplo
Hay un par de repositorios de GitHub de ejemplo que pueden utilizarse como referencia:
- aem-site-template-standard
- aem-site-template-basic-theme-e2e: se utiliza como ejemplo para proyectos "reales".
Enhorabuena. congratulations
¡Felicidades, acaba de actualizar e implementar un tema en AEM!
Siguientes pasos next-steps
Obtenga información más detallada sobre el desarrollo de AEM y comprenda más sobre la tecnología subyacente creando un sitio con el Arquetipo de proyecto de AEM.