Utveckla med Style System developing-with-the-style-system

Lär dig hur du implementerar enskilda format och återanvänder kärnkomponenter med Experience Manager Style System. I den här självstudien beskrivs hur du utvecklar för Style System för att utöka grundkomponenterna med varumärkesspecifik CSS och avancerade principkonfigurationer för mallredigeraren.

Förutsättningar prerequisites

Granska de verktyg och instruktioner som krävs för att konfigurera en lokal utvecklingsmiljö.

Vi rekommenderar även att du går igenom självstudiekursen Klientbibliotek och Front-end-arbetsflöde för att förstå grunderna i klientbibliotek och de olika frontverktygen som är inbyggda i AEM.

Startprojekt

Ta en titt på den baslinjekod som självstudiekursen bygger på:

Du kan alltid visa den färdiga koden på GitHub eller checka ut koden lokalt genom att växla till grenen tutorial/style-system-solution.

Syfte

Vad du ska bygga what-build

I det här kapitlet används funktionen Style System för att skapa varianter av komponenterna Title och Text som används på artikelsidan.

Understrykningsformat som kan användas för titelkomponent

Bakgrund background

Med Style System kan utvecklare och mallredigerare skapa flera visuella varianter av en komponent. Författare kan sedan i sin tur bestämma vilket format som ska användas när en sida disponeras. Style System används i resten av självstudiekursen för att uppnå flera unika format när du använder kärnkomponenter i en lågkodsstrategi.

Den allmänna idén med Style System är att författare kan välja olika stilar för hur en komponent ska se ut. "Styles" backas upp av ytterligare CSS-klasser som injiceras i en komponents yttre div. I klientbiblioteken läggs CSS-regler till baserat på dessa formatklasser så att komponenten ändrar utseende.

Detaljerad dokumentation om Style System finns här. Det finns också en fantastisk teknisk video för att förstå Style System.

Understrykningsformat - rubrik underline-style

Titelkomponenten har proxynerats in i projektet under /apps/wknd/components/title som en del av modulen ui.apps. Standardformaten för rubrikelement (H1, H2, H3…) har redan implementerats i modulen ui.front .

WKND-artikeldesignen innehåller ett unikt format för komponenten Title med en understrykning. I stället för att skapa två komponenter eller ändra komponentdialogrutan kan du använda Style System för att ge författarna möjlighet att lägga till ett understruket format.

Lägg till en titelprincip

Låt oss lägga till en princip för rubrikkomponenterna så att innehållsförfattare kan välja understrykningsformatet som ska användas för specifika komponenter. Detta görs med mallredigeraren i AEM.

Använda understrykningsformat

Som författare kan vi använda understrykningsformatet på vissa rubrikkomponenter.

Implementera understrykning - ui.front

Implementera sedan understrykningsformatet med modulen ui.front i AEM. Webbpaketets utvecklingsserver som paketeras med modulen ui.front för att förhandsgranska formaten innan distribueras till en lokal instans av AEM används.

Blockformat för citat - text text-component

Upprepa sedan liknande steg för att tillämpa ett unikt format på textkomponenten. Textkomponenten har proxiderats in i projektet under /apps/wknd/components/text som en del av modulen ui.apps. Standardformaten för styckeelement har redan implementerats i ui.front.

WKND-artikeldesignen innehåller ett unikt format för Text-komponenten med ett citattecken:

Lägg till en textprofil

Lägg sedan till en profil för textkomponenterna.

Använda formatet Offertblock

Implementera formatet Offertblock - ui.front

Nu implementerar vi formatet Offertblock med modulen ui.front i AEM.

Fast bredd - behållare (Bonus) layout-container

Behållarkomponenter har använts för att skapa artikelsidmallens grundläggande struktur och ange släppzoner där innehållsförfattare kan lägga till innehåll på en sida. Behållare kan också använda Style System, vilket ger innehållsförfattare ännu fler alternativ för att utforma layouter.

Huvudbehållaren i artikelsidmallen innehåller de två redigeringsbara behållarna och har en fast bredd.

Huvudbehållare i artikelsidmallen.

Principen för huvudbehållaren anger standardelementet som main:

Den CSS som gör att huvudbehållaren är fast anges i modulen ui.front vid ui.frontend/src/main/webpack/site/styles/container_main.scss :

main.container {
    padding: .5em 1em;
    max-width: $max-content-width;
    float: unset!important;
    margin: 0 auto!important;
    clear: both!important;
}

I stället för att använda elementet main HTML som mål kan Style System användas för att skapa ett fast breddformat som en del av behållarprincipen. Style System kan ge användare möjlighet att växla mellan behållare med fast bredd och flytande bredd.

Grattis! congratulations

Artikelsidan är nästan formaterad och du har fått en praktisk upplevelse med AEM Style System.

Nästa steg next-steps

Lär dig stegen från början till slut för att skapa en anpassad AEM som visar innehåll som har skapats i en dialogruta och utforskar utveckling av en Sling-modell för att kapsla in affärslogik som fyller i komponentens HTML.

Visa den färdiga koden på GitHub eller granska och distribuera koden lokalt på Git-grenen tutorial/style-system-solution.