Stil AEM CIF kärnkomponenter style-aem-cif-core-components
CIF Venia-projektet är en referenskodbas för att använda CIF kärnkomponenter. I den här självstudiekursen inspekterar du Venias referensprojekt och förstår hur CSS och JavaScript som används av AEM kärnkomponenter är organiserade. Du skapar också en stil med CSS för att uppdatera standardstilen för komponenten Product Teaser.
Vad du ska bygga
I den här självstudiekursen implementeras en ny stil för Product Teaser-komponenten som liknar ett kort. Lektioner du lär dig i självstudiekursen kan användas på andra CIF.
Förutsättningar prerequisites
Det krävs en lokal utvecklingsmiljö för att slutföra den här självstudiekursen. Den här miljön innehåller en instans av AEM som körs och som är konfigurerad och ansluten till en Adobe Commerce-instans. Granska kraven och stegen för konfigurera en lokal utveckling med AEM as a Cloud Service SDK.
Klona Veniaprojektet clone-venia-project
Du klonar Venedig-projektet och åsidosätter sedan standardformaten.
-
Kör följande Git-kommando så att du kan klona projektet:
code language-shell $ git clone git@github.com:adobe/aem-cif-guides-venia.git
-
Skapa och distribuera projektet till en lokal instans av AEM:
code language-shell $ cd aem-cif-guides-venia/ $ mvn clean install -PautoInstallPackage,cloud
-
Lägg till nödvändiga OSGi-konfigurationer så att du kan ansluta AEM till en Adobe Commerce-instans eller lägga till konfigurationerna i det skapade projektet.
-
Nu bör du ha en fungerande version av en storefront som är ansluten till en Adobe Commerce-instans. Gå till sidan
US
>Home
på: http://localhost:4502/editor.html/content/venia/us/en.html.Du ser att butiken för närvarande använder temat Venia. När du expanderar huvudmenyn för butiken bör du se olika kategorier som anger att anslutningen till Adobe Commerce fungerar.
Klientbibliotek och modulen ui.frontEdge introduction-to-client-libraries
CSS och JavaScript som ansvarar för att återge temat/formaten för butiken hanteras i AEM av ett klientbibliotek eller"klientlibs". Med klientbibliotek kan du ordna CSS och JavaScript i ett projekts kod och sedan leverera på sidan.
Du kan använda varumärkesspecifika format på AEM kärnkomponenter genom att lägga till och åsidosätta den CSS som hanteras av dessa klientbibliotek. Det är viktigt att förstå hur klientbibliotek är strukturerade och inkluderas på sidan.
ui.front är ett dedikerat webpack-projekt som hanterar alla frontendresurser för ett projekt. Med det här webbpaketet kan gränssnittsutvecklare använda valfritt antal språk och tekniker som TypeScript, Sass och mycket annat.
Modulen ui.frontend
är också en Maven-modul och integrerad med det större projektet genom att använda en NPM-modul i aem-clientlib-generator. Under ett bygge kopierar aem-clientlib-generator
de kompilerade CSS- och JavaScript-filerna till ett klientbibliotek i modulen ui.apps
.
Kompilerad CSS och JavaScript kopieras från modulen ui.frontend
till modulen ui.apps
som ett klientbibliotek under ett Maven-bygge
Uppdatera Teaser Style ui-frontend-module
Gör sedan en liten ändring i Teaser-formatet för att se hur modulen ui.frontend
och klientbiblioteken fungerar. Använd den utvecklingsmiljö du väljer för att importera Venia-projektet. De skärmbilder som används är från Visual Studio Code IDE.
-
Navigera och expandera modulen ui.front och expandera mapphierarkin till:
ui.frontend/src/main/styles/commerce
:Observera att det finns flera Sass-filer (
.scss
) under mappen. Dessa filer är de Commerce-specifika formaten för var och en av Commerce-komponenterna. -
Öppna filen
_productteaser.scss
. -
Uppdatera regeln
.item__image
och ändra kantlinjalen:code language-scss .item__image { border: #ea00ff 8px solid; /* <-- modify this rule */ display: block; grid-area: main; height: auto; opacity: 1; transition-duration: 512ms; transition-property: opacity, visibility; transition-timing-function: ease-out; visibility: visible; width: 100%; }
Regeln ovan bör lägga till en fet rosa ram i Product Teaser Component.
-
Öppna ett nytt terminalfönster och navigera till mappen
ui.frontend
:code language-shell $ cd <project-location>/aem-cif-guides-venia/ui.frontend
-
Kör följande Maven-kommando:
code language-shell $ mvn clean install ... [INFO] ------------------------------------------------------------------------ [INFO] BUILD SUCCESS [INFO] ------------------------------------------------------------------------ [INFO] Total time: 29.497 s [INFO] Finished at: 2020-08-25T14:30:44-07:00 [INFO] ------------------------------------------------------------------------
Inspect terminalutdata. Observera att Maven-kommandot körde flera NPM-skript, inklusive
npm run build
. Kommandotnpm run build
definieras i filenpackage.json
och kompilerar webbpaketprojektet och utlöser genereringen av klientbiblioteket. -
Inspect filen
ui.frontend/dist/clientlib-site/site.css
:Filen är den kompilerade och minimerade versionen av alla Sass-filer i projektet.
note note NOTE Filer som detta ignoreras från källkontrollen eftersom de ska genereras under byggtiden. -
Inspect filen
ui.frontend/clientlib.config.js
.code language-js /* clientlib.config.js*/ ... // Config for `aem-clientlib-generator` module.exports = { context: BUILD_DIR, clientLibRoot: CLIENTLIB_DIR, libs: [ { ...libsBaseConfig, name: 'clientlib-site', categories: ['venia.site'], dependencies: ['venia.dependencies', 'aem-core-cif-react-components'], assets: { ...
Den här konfigurationsfilen är för aem-clientlib-generator och avgör var och hur kompilerad CSS och JavaScript omvandlas till ett AEM klientbibliotek.
-
Granska filen i modulen
ui.apps
:ui.apps/src/main/content/jcr_root/apps/venia/clientlibs/clientlib-site/css/site.css
:Filen
site.css
kopieras till projektetui.apps
. Den ingår nu i ett klientbibliotek med namnetclientlib-site
och kategorinvenia.site
. När filen är en del av modulenui.apps
kan den distribueras till AEM.note note NOTE Filer som detta ignoreras också i källkontrollen eftersom de ska genereras under byggtiden. -
Kontrollera sedan de andra klientbiblioteken som genereras av projektet:
Dessa klientbibliotek hanteras inte av modulen
ui.frontend
. I stället innehåller dessa klientbibliotek CSS- och JavaScript-beroenden från Adobe. Definitionen för dessa klientbibliotek finns i filen.content.xml
under varje mapp.clientlib-base - Ett tomt klientbibliotek som helt enkelt bäddar in nödvändiga beroenden från AEM Core Components. Kategorin är
venia.base
.clientlib-CIF - Ett tomt klientbibliotek som helt enkelt bäddar in nödvändiga beroenden från AEM CIF kärnkomponenter. Kategorin är
venia.cif
.clientlib-grid - Innehåller CSS för att aktivera funktionen AEM responsivt stödraster. Om du använder det AEM stödrastret aktiveras layoutläget i AEM Editor och innehållsförfattarna kan ändra storlek på komponenter. Kategorin är
venia.grid
och är inbäddad i biblioteketvenia.base
. -
Inspect filerna
customheaderlibs.html
ochcustomfooterlibs.html
underui.apps/src/main/content/jcr_root/apps/venia/components/page
:Dessa skript innehåller biblioteken venia.base och venia.CIF som en del av alla sidor.
note note NOTE Endast basbiblioteken är"hårdkodade" som en del av sidskripten. venia.site
ingår inte i de här filerna och inkluderas i stället som en del av sidmallen för större flexibilitet. Den här processen granskas senare. -
Bygg och distribuera hela projektet till en lokal instans av AEM:
code language-shell $ cd aem-cif-guides-venia/ $ mvn clean install -PautoInstallPackage,cloud
Skapa en produkttekniker author-product-teaser
Nu när koduppdateringarna har distribuerats lägger du till en instans av Product Teaser-komponenten på webbplatsens startsida med hjälp av AEM utvecklingsverktyg. Då kan vi visa de uppdaterade formaten.
-
Öppna en ny flik i webbläsaren och gå till webbplatsens hemsida: http://localhost:4502/editor.html/content/venia/us/en.html.
-
Expandera Resurssökaren (sidospåret) i läget Redigera. Växla resursfiltret till Produkter.
-
Dra och släpp en ny produkt på startsidan i huvudlayoutbehållaren:
Du bör se att Product Teaser nu har en ljusrosa kantlinje som baseras på CSS-regeländringen som skapades tidigare.
Verifiera klientbibliotek på sidan verify-client-libraries
Kontrollera sedan att klientbiblioteken finns med på sidan.
-
Navigera till webbplatsens hemsida: http://localhost:4502/editor.html/content/venia/us/en.html.
-
Välj menyn Sidinformation och klicka på Visa som publicerad:
Den här sidan öppnas utan att någon av de AEM författarna av JavaScript har lästs in, som den skulle se ut på den publicerade webbplatsen. Observera att URL:en har frågeparametern
?wcmmode=disabled
tillagd. När du utvecklar CSS och JavaScript är det en god vana att använda den här parametern för att förenkla sidan utan att AEM författare behöver göra något. -
Visa sidkällan så bör du kunna identifiera flera klientbibliotek:
code language-html <!DOCTYPE html> <html lang="en-US"> <head> ... <link rel="stylesheet" href="/etc.clientlibs/venia/clientlibs/clientlib-base.min.css" type="text/css"> <link rel="stylesheet" href="/etc.clientlibs/venia/clientlibs/clientlib-site.min.css" type="text/css"> </head> ... <script type="text/javascript" src="/etc.clientlibs/venia/clientlibs/clientlib-site.min.js"></script> <script type="text/javascript" src="/etc.clientlibs/core/wcm/components/commons/site/clientlibs/container.min.js"></script> <script type="text/javascript" src="/etc.clientlibs/venia/clientlibs/clientlib-base.min.js"></script> <script type="text/javascript" src="/etc.clientlibs/core/cif/clientlibs/common.min.js"></script> <script type="text/javascript" src="/etc.clientlibs/venia/clientlibs/clientlib-cif.min.js"></script> </body> </html>
Klientbibliotek som levereras till sidan har prefixet
/etc.clientlibs
och hanteras via en proxy för att undvika att exponera något känsligt i/apps
eller/libs
.Obs!
venia/clientlibs/clientlib-site.min.css
ochvenia/clientlibs/clientlib-site.min.js
. Dessa filer är de kompilerade CSS- och JavaScript-filerna som härleds från modulenui.frontend
.
Inkludering av klientbibliotek med sidmallar client-library-inclusion-pagetemplates
Det finns flera alternativ för hur du inkluderar ett klientbibliotek. Kontrollera sedan hur det genererade projektet innehåller clientlib-site
-biblioteken via Sidmallar.
-
Navigera till webbplatsens hemsida i AEM Editor: http://localhost:4502/editor.html/content/venia/us/en.html.
-
Välj menyn Sidinformation och klicka på Redigera mall:
Mallen Startsida öppnas och sidan Startsida baseras på den.
note note NOTE Om du vill visa alla tillgängliga mallar från AEM startskärmen går du till Verktyg > Allmänt > Mallar. -
I det övre vänstra hörnet markerar du ikonen Sidinformation och klickar på Sidprofil.
-
Sidprofilen öppnas för mallen Landningssida:
Till höger visas en lista över kategorier för klientbibliotek som finns på alla sidor som använder den här mallen.
venia.dependencies
- Tillhandahåller eventuella leverantörsbibliotek somvenia.site
är beroende av.venia.site
- Kategorin förclientlib-site
som modulenui.frontend
genererar.
Observera att samma princip används för andra mallar, Innehållssida, Landningssida och så vidare. Genom att återanvända samma princip säkerställs att samma klientbibliotek inkluderas på alla sidor.
Fördelen med att använda mallar och sidprofiler för att hantera inkludering av klientbibliotek är att du kan ändra principen per mall. Du kanske hanterar två olika varumärken inom samma AEM. Varje varumärke har sin egen unika stil eller tema, men basbiblioteken och koden är desamma. Om du har ett större klientbibliotek som du bara vill visa på vissa sidor kan du skapa en unik sidprofil för just den mallen.
Utveckling av lokala webbpaket local-webpack-development
I den föregående övningen gjordes en uppdatering av en Sass-fil i modulen ui.frontend
och sedan distribuerades ändringarna till AEM efter att en Maven-version har utförts. Därefter ska vi titta på hur du använder en webpack-dev-server för att snabbt utveckla front end-formaten.
Webbpack-dev-server-proxies bilder och en del CSS/JavaScript från den lokala instansen av AEM, men låter utvecklaren ändra formaten och JavaScript i modulen ui.frontend
.
-
Gå till sidan Hem och Visa som publicerad i webbläsaren: http://localhost:4502/content/venia/us/en.html?wcmmode=disabled.
-
Visa sidans källa och kopian HTML i Raw-format.
-
Gå tillbaka till den utvecklingsmiljö du valt under modulen
ui.frontend
och öppna filen:ui.frontend/src/main/static/index.html
-
Skriv över innehållet i
index.html
och paste HTML som kopierades i föregående steg. -
Sök efter inkluderingarna för
clientlib-site.min.css
,clientlib-site.min.js
och ta bort.code language-html <head> <!-- remove this link --> <link rel="stylesheet" href="/etc.clientlibs/venia/clientlibs/clientlib-base.min.css" type="text/css"> ... </head> <body> ... <!-- remove this link --> <script type="text/javascript" src="/etc.clientlibs/venia/clientlibs/clientlib-site.min.js"></script> </body>
Dessa inkluderingar tas bort eftersom de representerar den kompilerade versionen av CSS och JavaScript som genereras av modulen
ui.frontend
. Lämna kvar de andra klientbiblioteken som de kommer att proxideras från den AEM som körs. -
Öppna ett nytt terminalfönster och navigera till mappen
ui.frontend
. Kör kommandotnpm start
:code language-shell $ cd ui.frontend $ npm start
Det här kommandot startar webbpack-dev-server på http://localhost:8080/
note caution CAUTION Om du får ett Sass-relaterat fel stoppar du servern och kör kommandot npm rebuild node-sass
och upprepar stegen ovan. Detta fel kan uppstå om du har en annan version avnpm
ochnode
än vad som anges i projektetaem-cif-guides-venia/pom.xml
. -
Navigera till http://localhost:8080/ på en ny flik med samma webbläsare som en loggad instans av AEM. Du kan se Venias hemsida via webbpack-dev-server:
Låt webbpack-dev-server vara igång. Det används i nästa övning.
Implementera kortstil för Product Teaser update-css-product-teaser
Ändra sedan Sass-filerna i modulen ui.frontend
för att implementera en kortliknande stil för Product Teaser. Webbpack-dev-server används för att snabbt se ändringarna.
Återgå till utvecklingsmiljön och det genererade projektet.
-
Öppna filen
_productteaser.scss
ui.frontend/src/main/styles/commerce/_productteaser.scss
igen i modulen ui.front. -
Gör följande ändringar i Product Teaser-gränsen:
code language-diff .item__image { - border: #ea00ff 8px solid; + border-bottom: 1px solid #c0c0c0; display: block; grid-area: main; height: auto; opacity: 1; transition-duration: 512ms; transition-property: opacity, visibility; transition-timing-function: ease-out; visibility: visible; width: 100%; }
Spara ändringarna och webbpack-dev-server uppdateras automatiskt med de nya formaten.
-
Lägg till en skugga och ta med rundade hörn i Product Teaser.
code language-scss .item__root { position: relative; box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2); transition: 0.3s; border-radius: 5px; float: left; margin-left: 12px; margin-right: 12px; } .item__root:hover { box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2); }
-
Uppdatera produktens namn så att det visas längst ned på teaser och ändra textfärgen.
code language-css .item__name { color: #000; display: block; float: left; font-size: 22px; font-weight: 900; line-height: 1em; padding: 0.75em; text-transform: uppercase; width: 75%; }
-
Uppdatera produktens pris så att det också visas längst ned på teaser och ändra textfärgen.
code language-css .price { color: #000; display: block; float: left; font-size: 18px; font-weight: 900; padding: 0.75em; padding-bottom: 2em; width: 25%; ...
-
Uppdatera mediefrågan längst ned så att du kan stapla namnet och priset på skärmar som är mindre än 992px.
code language-css @media (max-width: 992px) { .productteaser .item__name { font-size: 18px; width: 100%; } .productteaser .item__price { font-size: 14px; width: 100%; } }
Nu bör du se kortstilen återspeglas i webbpack-dev-server:
Ändringarna har dock inte distribuerats till AEM än. Du kan hämta lösningsfilen här.
-
Distribuera uppdateringarna till AEM med hjälp av dina Maven-kunskaper från en kommandoradsterminal:
code language-shell $ cd aem-cif-guides-venia/ $ mvn clean install -PautoInstallPackage,cloud
note note NOTE Det finns ytterligare IDE-inställningar och verktyg som kan synkronisera projektfiler direkt till en lokal AEM utan att behöva utföra en fullständig Maven-build.
Visa uppdaterad Product Teaser view-updated-product-teaser
När koden för projektet har distribuerats till AEM kan du nu se ändringarna i Product Teaser.
-
Gå tillbaka till webbläsaren och uppdatera hemsidan: http://localhost:4502/editor.html/content/venia/us/en.html. Du bör se hur de uppdaterade produktmallarna används.
-
Experimentera genom att lägga till ytterligare produktutbildningar. Använd layoutläget om du vill ändra komponenternas bredd och förskjutning så att flera scener visas på en rad.
Felsökning troubleshooting
Du kan verifiera i CRXDE-Lite att den uppdaterade CSS-filen har distribuerats: http://localhost:4502/crx/de/index.jsp#/apps/venia/clientlibs/clientlib-site/css/site.css
När du distribuerar nya CSS-filer, JavaScript-filer eller båda, är det också viktigt att se till att webbläsaren inte hanterar inaktuella filer. Du kan eliminera det här potentiella problemet genom att rensa webbläsarens cache eller starta en ny webbläsarsession.
AEM försöker också cachelagra klientbibliotek för att få prestandan. Efter en koddistribution skickas de äldre filerna ibland. Du kan göra AEM klientbibliotekscachen ogiltig manuellt med verktyget Återskapa klientbibliotek. Ogiltiga cacheminnen är den bästa metoden om du misstänker att AEM har cachelagrat en gammal version av ett klientbibliotek. Återskapa bibliotek är ineffektivt och tidskrävande.
Grattis congratulations
Du har utformat din första AEM CIF Core Component och du använde en webbpaketdev-server!
Bonus Challenge bonus-challenge
Använd AEM Style System för att skapa två format som kan aktiveras och inaktiveras av en innehållsförfattare. Utveckla med Style System innehåller detaljerade steg och information om hur du utför den här uppgiften.