Anpassa webbplatstemat customize-the-site-theme
Lär dig hur webbplatstemat byggs, hur du anpassar och hur du testar med AEM-innehåll.
Story hittills story-so-far
I det föregående dokumentet på 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 inloggningsuppgifter för att få tillgång till AEM Git så att du kan implementera 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 AEM webbplatstema är uppbyggt, hur man anpassar det och hur man testar det med AEM direktinnehåll. 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 en lokal proxy.
- Lär dig implementera ändringarna 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ören till den plats där du vill redigera temat och öppna det i den redigerare du vill.
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 specifika för AEM-komponentersrc/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 proxyanvändarautentiseringsuppgifter som tillhandahålls av AEM-administratören.
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-administratören 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 AEM-instansen 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-administratören.
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 kommandot 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 den tidigare delen 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 skickas till AEM Git-databasen.
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 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 en lokal proxy.
- Lär dig implementera ändringarna i AEM Git-databasen.
Bygg vidare på den här kunskapen och fortsätt din resa till AEM Quick Site Creation 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 pipeline i gränssnittet.
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 Site Theme - Detta är GitHub-databasen för AEM Site Theme.
- 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.