Webbplatsteman site-themes

Lär dig hur AEM webbplatsteman kan användas för att anpassa webbplatsens stil och design.

Översikt overview

Ett AEM webbplatstema är ett paket som innehåller CSS-, JavaScript- och statiska resurser som definierar formateringen för din AEM och som följer strukturen för ett AEM webbplatstema.

Webbplatser som skapats med AEM webbplatsmallar gör det enkelt att hämta, anpassa och omdistribuera teman.

NOTE
AEM teman ska inte blandas ihop med AEM webbplatsmallar. AEM webbplatsteman innehåller bara formatinformation för en AEM. AEM webbplatsmallar definierar webbplatsens struktur och innehåll samt innehåller ett AEM webbplatstema för skapa webbplatser snabbt.

Använda webbplatsteman using-themes

Webbplatsteman används på två olika sätt:

  • De används som en del av en webbplatsmall för att definiera format när skapa en plats.
  • De laddas ned när du har skapat en webbplats baserad på en webbplatsmall så att en gränssnittsutvecklare kan anpassa formatet ytterligare.
TIP
En fullständig beskrivning av processen att skapa en webbplats från en mall och anpassa dess tema finns i Skapa snabbt webbplatser.

Platstemastruktur structure

Webbplatsteman är helt enkelt paket med en logisk struktur som tydligt återspeglar syftet med paketinnehållet. Ett webbplatstema har följande struktur som är typisk för ett frontendprojekt.

  • src/main.ts: Huvudingångspunkten för JS- och CSS-temat
  • src/site: JS- och CSS-filer som gäller för hela platsen
  • src/components: JS- och CSS-filer som är specifika för AEM
  • src/resources: Statiska filer som ikoner, logotyper och teckensnitt

Standardtema för webbplats standard-site-theme

Adobe tillhandahåller ett referenstema som du kan använda som utgångspunkt för att skapa ett eget tema. Standardwebbplatstemat är tillgängligt på GitHub.

Utveckla webbplatsteman developing-themes

Adobe tillhandahåller en AEM Site Theme Builder som en uppsättning skript för att skapa nya webbplatsteman.

AEM Site Theme Builder är tillgänglig tillsammans med användningsdokumentation för GitHub. Utvecklingsupplevelsen i gränssnittet krävs för att anpassa temat.

recommendation-more-help
fbcff2a9-b6fe-4574-b04a-21e75df764ab