Lär dig hur webbplatstemat byggs, hur du anpassar och hur du testar med AEM.
I det föregående dokumentet från den AEM snabbplatsgenereringsresan Hämta information om Git-databasåtkomst, du har lärt dig hur gränssnittsutvecklarna använder Cloud Manager för att få åtkomst till Git-databasinformation, och du bör nu:
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.
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:
Den här delen av resan gäller för den som utvecklar gränssnittet.
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
: Huvudingångspunkten 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 teckensnittOm du vill veta mer om det AEM vanliga webbplatstemat kan du läsa GitHub-länken i Ytterligare resurser i slutet av det här dokumentet.
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.
Navigera från kommandoraden till temats rot på din lokala dator.
Kör npm install
och npm hämtar beroenden och installerar projektet.
Kör npm run live
och proxyservern startas.
När proxyservern startas öppnas automatiskt en webbläsare för att http://localhost:7001/
. Tryck eller klicka LOGGA IN LOKALT (ENDAST ADMINISTRATÖRSÅTGÄRDER) och logga in med de autentiseringsuppgifter för proxyanvändare som du får av AEM.
Om du inte har dessa autentiseringsuppgifter kan du kontakta administratören och hänvisa till Konfigurera avsnittet Proxyanvändare i artikeln Skapa webbplats från mall på 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.
/content/<your-site>/en/home.html?wcmmode=disabled
http://localhost:7001/content/<your-site>/en/home.html?wcmmode=disabled
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.
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 i redigeraren <your-theme-sources>/src/site/_variables.scss
Redigera variabeln $color-background
och ange ett annat värde än vitt. I det här exemplet orange
används.
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.
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 som tidigare hämtats från Cloud Manager. Det bör likna git clone https://git.cloudmanager.adobe.com/<my-org>/<my-program>/
. Använd Git-användarnamnet och -lösenordet som du hämtade under 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.
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.
Nu när du är klar med den här delen av AEM snabbwebbplats:
Bygg vidare på den här kunskapen och fortsätt din AEM snabbwebbplats genom att nästa gång du granskar dokumentet Driftsätt ditt anpassade tema, där du får lära dig hur du distribuerar temat med hjälp av frontendriet.
Vi rekommenderar att du går vidare till nästa del av processen Skapa snabbwebbplats genom att granska dokumentet Driftsätt ditt anpassade tema, Nedan följer ytterligare, valfria resurser som fördjupar sig i några koncept som nämns i det här dokumentet, men som inte behöver fortsätta på resan.