Anpassa webbplatstemat

Lär dig hur webbplatstemat byggs, hur du anpassar och hur du testar med AEM.

Story hittills

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:

• Förstå vad Cloud Manager är på en hög nivå.
• 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

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 lokal proxy.
• Lär dig hur du implementerar dina ändringar i AEM Git-databasen.

Ansvarig roll

Den här delen av resan gäller för den som utvecklar gränssnittet.

Förstå temastrukturen

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-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

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

1. Navigera från kommandoraden till temats rot på din lokala dator.

2. Kör npm install och npm hämtar beroenden och installerar projektet.

   

3. Kör npm run live och proxyservern startas.

   

4. 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.

   

   TIPS

   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.

5. 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 /content/<your-site>/en/home.html?wcmmode=disabled
   • Du ändrar URL:en till 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.

Anpassa temat

Nu kan du börja anpassa temat. Följande är ett enkelt exempel som illustrerar hur du kan se ändringarna direkt via utkastet.

1. Öppna filen i redigeraren <your-theme-sources>/src/site/_variables.scss

   

2. Redigera variabeln $color-background och ange ett annat värde än vitt. I det här exemplet orange används.

   

3. När du sparar filen ser du att proxyservern känner igen ändringen via raden [Browsersync] File event [change].

   

4. 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

När anpassningarna är klara kan du implementera dem i AEM Git-databasen. Först måste du klona databasen till din lokala dator.

1. Navigera från kommandoraden till den plats där du vill klona svaret.

2. 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.

   

3. Flytta temaprojektet som du redigerade till det klonade svaret med ett kommando som liknar mv <site-theme-sources> <cloned-repo>

4. 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
   

5. Anpassningarna överförs till databasen för AEM Git.

   

Dina anpassningar lagras nu säkert i AEM Git-databasen.

What's 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 lokal proxy.
• Lär dig hur du implementerar dina ändringar i AEM Git-databasen.

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.

Ytterligare resurser

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.

• AEM - Detta är GitHub-databasen för AEM webbplatstema.
• npm - AEM teman som används för att snabbt skapa webbplatser baseras på npm.
• webbpaket - AEM teman som används för att snabbt bygga sajter bygger på webbpaket.

Resurser för Business.Adobe.com