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. AEM Este tutorial también explicará cómo implementar actualizaciones de temas en un sitio de 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 la sección Plantillas de página se han completado los capítulos.
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:
- AEM Cree un usuario local en el entorno de trabajo para utilizarlo con un servidor de desarrollo de proxy.
- AEM Descargue las fuentes de temas desde el entorno de trabajo 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
Descargue los estilos finalizados para la Tema de muestra de WKND
Implementar un tema mediante una canalización front-end deploy-theme
AEM Implemente actualizaciones de un tema en un entorno de mediante la canalización front-end de Cloud Manager.
Pasos de alto nivel para el vídeo:
-
Crear un nuevo Git repositorio 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> -
Configurar un Canalización front-end en Cloud Manager para implementar el código front-end.
-
AEM Ejecute la canalización front-end para implementar actualizaciones en el entorno de destino de la aplicación 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 del mundo real.
Enhorabuena. congratulations
AEM ¡Enhorabuena, acaba de actualizar e implementar un tema para la creación de informes
Pasos siguientes next-steps
AEM Obtenga información más detallada sobre el desarrollo de la y comprenda mejor la tecnología subyacente creando un sitio con la variable AEM Tipo de archivo del proyecto.