Het sitethema aanpassen customize-the-site-theme
Leer hoe het thema van de site is opgebouwd, hoe u het kunt aanpassen en hoe u live-AEM kunt testen.
Het verhaal tot nu toe story-so-far
In het vorige document van de AEM Snelle reis van de Verwezenlijking van de Plaats, wint de Informatie van de Toegang van de Toegang van de Bewaarplaats van de it,u leerde hoe de front-end ontwikkelaarsgebruikers Cloud Manager om tot informatie van de gokbewaarplaats toegang te hebben, en u zou nu moeten:
- Begrijp op een hoog niveau wat Cloud Manager is.
- Uw referenties zijn opgehaald voor toegang tot de AEM, zodat u uw aanpassingen kunt doorvoeren.
Dit deel van de reis neemt de volgende stap en graaft in het plaatsthema en toont u hoe te om het aan te passen en dan die aanpassingen te begaan gebruikend de toegangsgeloofsbrieven u terugwond.
Doelstelling objective
In dit document wordt uitgelegd hoe het thema van de AEM site is opgebouwd, hoe u het kunt aanpassen en hoe u het kunt testen met live AEM-inhoud. Na het lezen moet u:
- Begrijp de basisstructuur van het sitethema en hoe u dit kunt bewerken.
- Zie hoe u themaaanpassingen kunt testen met echte AEM inhoud via lokale proxy.
- Weet hoe u uw wijzigingen in de AEM-git-opslagplaats kunt doorvoeren.
Verantwoordelijke rol responsible-role
Dit deel van de reis geldt voor de front-end ontwikkelaar.
Begrijp de Themastructuur understand-theme
Extraheer het thema dat door de AEM beheerder wordt geboden naar de locatie waar u het thema wilt bewerken en open het in de gewenste editor.
U ziet dat het thema een typisch front-end project is. De belangrijkste onderdelen van de structuur zijn:
src/main.ts: Het belangrijkste ingangspunt van uw JS & CSS-themasrc/site: JS- en CSS-bestanden die van toepassing zijn op de gehele sitesrc/components: JS- en CSS-bestanden die specifiek zijn voor AEM componentensrc/resources: statische bestanden zoals pictogrammen, logo's en lettertypen
Zodra u met de structuur van het themaproject vertrouwd bent, begin de lokale volmacht zodat kunt u om het even welke themaaanpassingen in real time zien die op daadwerkelijke AEM inhoud worden gebaseerd.
De lokale proxy starten starting-proxy
-
Navigeer vanaf de opdrachtregel naar de basis van het thema op uw lokale computer.
-
Uitvoeren
npm installen npm halen gebiedsdelen terug en installeert het project.
-
Uitvoeren
npm run liveen de proxyserver start.
-
Wanneer de proxyserver wordt gestart, opent deze automatisch een browser naar
http://localhost:7001/. Selecteer LOKAAL ONDERTEKENEN (ALLEEN TAKEN VAN ADMIN) en ondertekenen binnen met de geloofsbrieven van de volmachtsgebruiker die aan u door de AEM beheerder worden verstrekt.
note tip TIP Als u deze geloofsbrieven niet hebt, spreek met uw beheerder die de sectie van de Gebruiker van de Volmacht van de Opstelling van Create Plaats van het artikel van het Malplaatjein deze reis van verwijzingen voorzien. -
Als u zich eenmaal hebt aangemeld, wijzigt u de URL in de browser zodat deze verwijst naar het pad naar de voorbeeldinhoud die de AEM aan u heeft gegeven.
- Als het opgegeven pad bijvoorbeeld
/content/<your-site>/en/home.html?wcmmode=disabledwas - U verandert de URL in
http://localhost:7001/content/<your-site>/en/home.html?wcmmode=disabled
- Als het opgegeven pad bijvoorbeeld
U kunt op de site navigeren om de inhoud te verkennen. De site wordt live opgehaald uit de live AEM-instantie, zodat u uw thema kunt aanpassen aan de werkelijke inhoud.
Het thema aanpassen customize-theme
Nu kunt u beginnen het thema aan te passen. In het volgende voorbeeld ziet u hoe u uw wijzigingen live kunt zien via de proxy.
-
Open het bestand in de editor
<your-theme-sources>/src/site/_variables.scss -
Bewerk de variabele
$color-backgrounden stel deze in op een andere waarde dan wit. In dit voorbeeld wordtorangegebruikt.
-
Wanneer u het bestand opslaat, ziet u dat de proxyserver de wijziging herkent via de regel
[Browsersync] File event [change].
-
Als u terugschakelt naar uw browser van de proxyserver, is de wijziging direct zichtbaar.
U kunt doorgaan met het aanpassen van het thema op basis van de vereisten die de AEM u biedt.
Wijzigingen vastleggen committing-changes
Zodra uw aanpassingen volledig zijn, kunt u hen aan de AEM git bewaarplaats begaan. Eerst moet u de repository klonen op uw lokale computer.
-
Navigeer vanaf de opdrachtregel naar de locatie waar u de repo wilt klonen.
-
Voer het bevel uit u eerder van Cloud Manager teruggewonnen. Deze zou vergelijkbaar moeten zijn met
git clone https://git.cloudmanager.adobe.com/<my-org>/<my-program>/. Gebruik de naam en het wachtwoord van de gokgebruiker die u in het vorige deel van deze reis terugwon.
-
Verplaats het themaproject dat u aan het bewerken was naar het gekloonde antwoord met een opdracht vergelijkbaar met
mv <site-theme-sources> <cloned-repo> -
Wijs in de map met de gekloonde repo de themabestanden toe waarnaar u zojuist hebt verplaatst met de volgende opdrachten.
code language-text git add . git commit -m "Adding theme sources" git push -
De aanpassingen worden doorgestuurd naar de AEM git-opslagplaats.
Uw aanpassingen worden nu veilig opgeslagen in de AEM git-opslagplaats.
Volgende functies what-is-next
Nu u dit gedeelte van de AEM Quick Site Creation-reis hebt voltooid, moet u:
- Begrijp de basisstructuur van het sitethema en hoe u dit kunt bewerken.
- Zie hoe u themaaanpassingen kunt testen met echte AEM inhoud via lokale proxy.
- Weet hoe u uw wijzigingen in de AEM-git-opslagplaats kunt doorvoeren.
Bouw op deze kennis voort en ga uw AEM Snelle reis van de Aanmaak van de Plaats door het document opnieuw te bekijken opstellen Uw Aangepast Thema,voort waar u leert hoe te om het thema op te stellen gebruikend de front-end pijpleiding.
Aanvullende bronnen additional-resources
Terwijl het wordt geadviseerd dat u zich op het volgende deel van de Snelle reis van de Verwezenlijking van de Plaats door het document te herzien uw Aangepast Thema opstelt,het volgende zijn sommige extra, facultatieve middelen die een diepere duik op sommige die concepten doen in dit document worden vermeld, maar zij worden niet vereist om op de reis verder te gaan.
- AEM het Thema van de Plaats- dit is de bewaarplaats GitHub van het Thema van de Plaats van de AEM.
- npm- AEM thema's worden gebruikt om plaatsen snel te bouwen zijn gebaseerd op npm die.
- webpack- AEM thema's worden gebruikt om sites snel te bouwen baseren zich op webpack die.