Anpassa webbplatstemat customize-the-site-theme
Lär dig hur webbplatstemat byggs, hur du anpassar och hur du testar med AEM.
Story hittills story-so-far
I det föregående dokumentet från den AEM snabbwebbplatsprocessen Hämta information om Git-databasåtkomst lärde du dig hur gränssnittsutvecklarna använder Cloud Manager för att få åtkomst till Git-databasinformation. Nu bör du:
- Lär dig mer om vad Cloud Manager är.
- Har hämtat dina autentiseringsuppgifter för att få åtkomst till AEM Git så att du kan genomföra dina anpassningar.
Den här delen av resan tar nästa steg och går in i webbplatstemat och visar hur du anpassar det och sedan implementerar anpassningarna med de åtkomstautentiseringsuppgifter som du hämtade.
Syfte objective
I det här dokumentet förklaras hur det AEM webbplatstemat byggs, hur det anpassas och hur du testar det med AEM. När du har läst bör du:
- Förstå webbplatsens grundläggande struktur och hur du redigerar den.
- Se hur du testar dina temaanpassningar med verkligt AEM innehåll via lokala utkast.
- Lär dig hur du implementerar dina ändringar i AEM Git-databasen.
Ansvarig roll responsible-role
Den här delen av resan gäller för den som utvecklar gränssnittet.
Förstå temastrukturen understand-theme
Extrahera temat från AEM administratör till den plats där du vill redigera temat och öppna det i den redigerare du vill använda.
Du ser att temat är ett typiskt frontprojekt. De viktigaste delarna i strukturen är:
src/main.ts: Huvudstartpunkten för JS- och CSS-tematsrc/site: JS- och CSS-filer som gäller för hela platsensrc/components: JS- och CSS-filer som är specifika för AEMsrc/resources: Statiska filer som ikoner, logotyper och teckensnitt
När du känner dig trygg med temaprojektets struktur kan du starta den lokala proxyn så att du kan se alla temaanpassningar i realtid baserat på det faktiska AEM innehållet.
Starta den lokala proxyn starting-proxy
-
Navigera från kommandoraden till temats rot på din lokala dator.
-
Kör
npm installoch npm hämtar beroenden och installerar projektet.
-
Kör
npm run liveoch proxyservern startar.
-
När proxyservern startas öppnas automatiskt en webbläsare till
http://localhost:7001/. Välj LOGGA IN LOKALT (ENDAST ADMIN TASKS) och logga in med de autentiseringsuppgifter för proxyanvändare som du har fått från AEM.
note tip TIP Om du inte har dessa autentiseringsuppgifter kan du kontakta administratören och hänvisa till avsnittet Konfigurera proxyanvändare i artikeln Skapa webbplats från mall under den här resan. -
När du är inloggad ändrar du URL:en i webbläsaren så att den pekar på sökvägen till exempelinnehållet som AEM har gett dig.
- Om den angivna sökvägen till exempel var
/content/<your-site>/en/home.html?wcmmode=disabled - Du ändrar URL:en till
http://localhost:7001/content/<your-site>/en/home.html?wcmmode=disabled
- Om den angivna sökvägen till exempel var
Du kan navigera på webbplatsen för att utforska innehållet. Webbplatsen hämtas direkt från live-AEM så att du kan anpassa temat efter det verkliga innehållet.
Anpassa temat customize-theme
Nu kan du börja anpassa temat. Följande är ett enkelt exempel som illustrerar hur du kan se ändringarna direkt via utkastet.
-
Öppna filen
<your-theme-sources>/src/site/_variables.scssi redigeraren
-
Redigera variabeln
$color-backgroundoch ange ett annat värde än vitt. I detta exempel användsorange.
-
När du sparar filen ser du att proxyservern känner igen ändringen via raden
[Browsersync] File event [change].
-
När du växlar tillbaka till webbläsaren på proxyservern visas ändringen omedelbart.
Du kan fortsätta att anpassa temat baserat på de krav som du har fått från AEM.
Genomför ändringarna committing-changes
När anpassningarna är klara kan du implementera dem i AEM Git-databasen. Först måste du klona databasen till din lokala dator.
-
Navigera från kommandoraden till den plats där du vill klona svaret.
-
Kör det kommando som du tidigare har hämtat från Cloud Manager. Det ska likna
git clone https://git.cloudmanager.adobe.com/<my-org>/<my-program>/. Använd Git-användarnamnet och lösenordet som du hämtade i föregående del av den här resan.
-
Flytta temaprojektet som du redigerade till det klonade svaret med ett kommando som liknar
mv <site-theme-sources> <cloned-repo> -
I katalogen för den klonade kopian implementerar du de temafiler som du just har flyttat till med följande kommandon.
code language-text git add . git commit -m "Adding theme sources" git push -
Anpassningarna överförs till databasen för AEM Git.
Dina anpassningar lagras nu säkert i AEM Git-databasen.
What's Next what-is-next
Nu när du är klar med den här delen av AEM snabbwebbplats:
- Förstå webbplatsens grundläggande struktur och hur du redigerar den.
- Se hur du testar dina temaanpassningar med verkligt AEM innehåll via lokala utkast.
- Lär dig hur du implementerar dina ändringar i AEM Git-databasen.
Bygg vidare på den här kunskapen och fortsätt din resa med att skapa AEM snabbwebbplats genom att gå igenom dokumentet Distribuera ditt anpassade tema där du får lära dig hur du distribuerar temat med hjälp av frontendpipeline.
Ytterligare resurser additional-resources
Vi rekommenderar att du går vidare till nästa del av processen för att skapa snabbwebbplats genom att granska dokumentet Distribuera ditt anpassade tema, men följande är ytterligare, valfria resurser som gör en djupdykning i vissa koncept som nämns i det här dokumentet, men de behöver inte fortsätta på resan.
- AEM webbplatstema - Detta är GitHub-databasen för det AEM platstemat.
- npm - AEM teman som används för att snabbt skapa webbplatser baseras på npm.
- webpack - AEM teman som används för att snabbt skapa webbplatser är beroende av webbpaket.