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 ställa in en lokal utvecklingsmiljö.

Vi rekommenderar även att du granskar Bibliotek på klientsidan och frontendarbetsflöde självstudiekurser för att förstå grunderna i klientbibliotek och de olika front end-verktygen 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 Style System-funktion för att skapa variationer av Titel och Text komponenter som används på artikelsidan.

Understrykningsformat som kan användas för komponenten Title

Bakgrund background

The Formatsystem gör att utvecklare och mallredigerare kan 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.

Du kan hitta utförlig dokumentation om Style System här. Det finns också en teknisk video för att förstå Style System.

Understrykningsformat - rubrik underline-style

The Titelkomponent har proxynerats in i det projekt som /apps/wknd/components/title som en del av ui.apps -modul. Standardformat för rubrikelement (H1, H2, H3…) redan har implementerats i ui.front -modul.

The WKND Artikeldesign 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 ui.front modulen i AEM. Webbpaketets utvecklingsserver som medföljer ui.front för att förhandsgranska formaten före distribuering 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å Textkomponent. Textkomponenten har proxiderats in i projektet under /apps/wknd/components/text som en del av ui.apps -modul. Standardformaten för styckeelement har redan implementerats i ui.front.

The WKND Artikeldesign 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

Låt oss implementera formatet Citatblock med ui.front modulen 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.

The Huvudbehållare i artikelsidmallen innehåller de två skrivbara behållarna med fast bredd.

Huvudbehållare i artikelsidmallen.

Policyn för Huvudbehållare anger standardelementet som main:

Den CSS som skapar Huvudbehållare fast är inställt i ui.front modulen 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;
}

Istället för att målinrikta main Formatsystemet kan användas för att skapa ett HTML-element Fast bredd som en del av behållarprincipen. Formatsystemet kan ge användarna möjlighet att växla mellan Fast bredd och Flytande bredd behållare.

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 utvecklingen av en segmentmodell för att kapsla in affärslogik som fyller i komponentens HTML-kod.

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