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-målmiljön.
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 i utvecklingen av AEM och förstå mer av den underliggande tekniken genom att skapa en webbplats med AEM Project Archetype.