Flujo de trabajo de temáticas theming
En este capítulo vamos a actualizar las fuentes temáticas de un sitio 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 codifiquemos en el sitio activo. En este tutorial también se 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 que consta de varias partes y se da por hecho que los pasos descritos en el capítulo Plantillas de página se han completado.
Objetivos
- Descubrir cómo se pueden descargar y modificar las fuentes de temas de un sitio.
- Aprender a codificar el sitio en directo para una vista previa en tiempo real.
- Comprender el flujo de trabajo completo de envío de actualizaciones compiladas de CSS y JavaScript como parte de un tema mediante la canalización front-end de Adobe Cloud Manager.
Actualización de un tema theme-update
A continuación, realice cambios en las fuentes de temáticas 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 temáticas y utilice un servidor de desarrollo proxy para obtener una vista previa de 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
Descargue los estilos finalizados para el Tema de muestra WKND
Implementación de un tema mediante una canalización front-end deploy-theme
Implemente 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:
-
Cree 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.
Repositorios 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
Enhorabuena. Acaba de actualizar e implementar un tema en AEM.
Próximos 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.