Arbetsflöde för teman theming
I det här kapitlet uppdaterar vi temakällorna för en Adobe Experience Manager-webbplats för att tillämpa varumärkesspecifika format. Vi lär oss hur du använder en proxyserver för att förhandsgranska CSS- och Javascript-uppdateringar när vi kodar mot den aktiva webbplatsen. Den här självstudiekursen handlar också om hur du distribuerar temauppdateringar till en AEM webbplats med Adobe Cloud Manager Front End Pipeline.
Slutligen uppdateras vår webbplats med format som matchar WKND-varumärket.
Förutsättningar prerequisites
Det här är en självstudiekurs i flera delar och det antas att stegen som beskrivs i kapitlet Sidmallar har slutförts.
Mål
- Lär dig hur temakällorna för en webbplats kan hämtas och ändras.
- Lär dig hur koden mot den publicerade webbplatsen ser ut i realtid.
- Förstå hela arbetsflödet med att leverera kompilerade CSS- och JavaScript-uppdateringar som en del av ett tema med Adobe Cloud Manager Front End Pipeline.
Uppdatera ett tema theme-update
Gör sedan ändringar i temakällorna så att webbplatsen matchar utseendet och känslan hos WKND-varumärket.
Stegen på hög nivå för videon:
- Skapa en lokal användare i AEM som kan användas med en proxyutvecklingsserver.
- Hämta temakällorna från AEM och öppna med en lokal utvecklingsmiljö, som VSCode.
- Ändra temakällorna och använd en proxyserver för att förhandsgranska CSS- och JavaScript-ändringar i realtid.
- Uppdatera temakällorna så att tidskriftsartikeln matchar WKND-profilerade stilar och dummies.
Lösningsfiler
Hämta de färdiga formaten för exempeltemat WKND
Distribuera ett tema med hjälp av en frontpipeline deploy-theme
Distribuera uppdateringar av ett tema till en AEM miljö med Cloud Manager Front End Pipeline.
Stegen på hög nivå för videon:
-
Skapa en ny Git -databas i Cloud Manager
-
Lägg till ditt temakällprojekt i Cloud Manager Git-databasen:
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> -
Konfigurera en frontpipeline i Cloud Manager för att distribuera frontslutskoden.
-
Kör Front End Pipeline för att distribuera uppdateringar till AEM.
Exempelrapporter
Det finns några exempel på GitHub-repor som kan användas som referens:
- aem-site-template-standard
- aem-site-template-basic-theme-e2e - Används som exempel för verkliga projekt.
Grattis! congratulations
Grattis, du har precis uppdaterat och distribuerat ett tema till AEM!
Nästa steg next-steps
Ta en djupdykning AEM utvecklingen och förstå mer av den underliggande tekniken genom att skapa en webbplats med AEM Project Archetype.