Thematische workflow theming
In dit hoofdstuk werken we de themabronnen van een Adobe Experience Manager-site bij om merkspecifieke stijlen toe te passen. We leren hoe u een proxyserver kunt gebruiken om een voorvertoning van CSS- en JavaScript-updates weer te geven terwijl we code schrijven op de livesite. Dit leerprogramma zal ook behandelen hoe te om themaupdates aan een AEMPlaats op te stellen gebruikend Adobe Cloud Manager Front End Pipeline.
Uiteindelijk wordt onze site bijgewerkt en worden er stijlen in opgenomen die passen bij het WKND-merk.
Vereisten prerequisites
Dit is een meerdelig leerprogramma en men veronderstelt dat de stappen die in het hoofdstuk van de Malplaatjes van de Paginaworden geschetst zijn voltooid.
Doelstellingen
- Leer hoe u de themabronnen voor een site kunt downloaden en wijzigen.
- Leer hoe u code kunt vergelijken met de livesite voor een real-time voorvertoning.
- Begrijp de werkschema van begin tot eind van het leveren van gecompileerde CSS en JavaScript updates als deel van een thema gebruikend de Adobe Voorste Pijpleiding van Cloud Manager.
Een thema bijwerken theme-update
Breng vervolgens wijzigingen aan in de themabronnen, zodat de site overeenkomt met de vormgeving van het WKND-merk.
Stappen op hoog niveau voor de video:
- Creeer een lokale gebruiker in AEM voor gebruik met een server van de volmachtsontwikkeling.
- Download de themabronnen van AEM en open gebruikend lokale winde, zoals VSCode.
- Wijzig de themabronnen en gebruik een proxy-ontwikkelserver om een voorvertoning van CSS- en JavaScript-wijzigingen in real-time weer te geven.
- Werk de themabronnen bij zodat het artikel van het tijdschrift overeenkomt met de stijlen en modellen van het merk WKND.
Oplossingsbestanden
Download de gebeëindigde stijlen voor het Thema van de Steekproef WKND
Een thema implementeren met behulp van een vooruiteindepipet deploy-theme
Implementeer updates van een thema in een AEM omgeving met behulp van Cloud Manager Front End Pipeline.
Stappen op hoog niveau voor de video:
-
Creeer een nieuwe git bewaarplaats in Cloud Manager
-
Voeg uw project met themabronnen toe aan de Cloud Manager Git-opslagplaats:
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> -
Vorm a Voorste Pijpleiding van het Eindin Cloud Manager om de front eindcode op te stellen.
-
Stel de Voorste Pijpleiding van het Eind in werking om updates aan het doel AEM milieu op te stellen.
Voorbeeldrepo's
Er zijn een paar rapporten van voorbeeld GitHub die als verwijzing kunnen worden gebruikt:
- aem-plaats-plaats-malplaatje-standaard
- a-plaats-plaats-malplaatje-basic-theme-e2e- gebruikt als voorbeeld voor "real-world"projecten.
Gefeliciteerd! congratulations
U hebt zojuist een thema bijgewerkt en geïmplementeerd om dit te AEM.
Volgende stappen next-steps
Neem een diepere duik binnen aan AEM ontwikkeling en begrijp meer van de onderliggende technologie door een plaats te creëren gebruikend AEM Archetype van het Project.