Stijl AEM CIF kerncomponenten style-aem-cif-core-components

Het CIF Project van Veniais een basis van de verwijzingscode voor het gebruiken van CIF de Componenten van de Kern. In deze zelfstudie inspecteert u het Venia-referentieproject en begrijpt u hoe CSS en JavaScript die door AEM Core-componenten worden gebruikt, worden georganiseerd. U zult ook een stijl tot stand brengen gebruikend CSS om de standaardstijl van de component bij te werken van de Teaser van het 0} Product.

TIP
Gebruik AEM archetype van het Projectwanneer het beginnen van uw eigen handelsimplementatie.

Wat u gaat maken

In deze zelfstudie wordt een nieuwe stijl geïmplementeerd voor de component Product Teaser die op een kaart lijkt. De lessen die in het leerprogramma worden geleerd kunnen op andere Componenten van de Kern worden toegepast CIF.

wat u zult bouwen

Vereisten prerequisites

U hebt een lokale ontwikkelomgeving nodig om deze zelfstudie te voltooien. Dit omvat een lopende instantie van AEM die wordt gevormd en met een instantie van Adobe Commerce verbonden. Herzie de vereisten en de stappen voor vestiging een lokale ontwikkeling met AEM.

Het Venia-project klonen clone-venia-project

Wij klonen het Project van Veniaen treden dan de standaardstijlen met voeten.

NOTE
voelt vrij om een bestaand project (gebaseerd op het AEM Archieftype van Project met inbegrepen CIF) te gebruiken en deze sectie over te slaan.
  1. Voer de volgende git-opdracht uit om het project te klonen:

    code language-shell
    $ git clone git@github.com:adobe/aem-cif-guides-venia.git
    
  2. Bouw en stel het project aan een lokaal geval van AEM op:

    code language-shell
    $ cd aem-cif-guides-venia/
    $ mvn clean install -PautoInstallPackage,cloud
    
  3. Voeg de noodzakelijke configuraties OSGi toe om uw AEM instantie met een instantie van Adobe Commerce te verbinden of de configuraties aan het onlangs gecreeerd project toe te voegen.

  4. Op dit moment hebt u een werkende versie van een winkel die is verbonden met een Adobe Commerce-instantie. Navigeer aan US > Home pagina bij: http://localhost:4502/editor.html/content/venia/us/en.html.

    Je moet zien dat de winkel het Venia-thema gebruikt. Als u het hoofdmenu van de winkel uitbreidt, ziet u verschillende categorieën die aangeven dat de verbinding met Adobe Commerce werkt.

    Storefront die met het Thema van Venia wordt gevormd

Client Libraries en ui.frontend Module introduction-to-client-libraries

CSS en JavaScript verantwoordelijk voor het teruggeven van het thema/de stijlen van de storefront wordt beheerd in AEM door a cliëntbibliotheekof clientlibs voor kort. Clientbibliotheken bieden een mechanisme om CSS en JavaScript in de code van een project te organiseren en vervolgens op de pagina te leveren.

Brand-specifieke stijlen kunnen op AEM Componenten van de Kern worden toegepast door CSS toe te voegen en met voeten te treden die door deze cliëntbibliotheken wordt geleid. Inzicht in de structuur van clientbibliotheken en de inhoud van deze bibliotheken op de pagina is essentieel.

ui.frontendis een specifiek webpackproject om alle front-end activa voor een project te beheren. Dit staat front-end ontwikkelaars toe om het even welk aantal talen en technologieën zoals te gebruiken TypeScript, Volgenen veel meer.

De ui.frontend module is ook een GMaven module en geïntegreerd met het grotere project door een module NPM te gebruiken aem-client-clientlib-generator. Tijdens een build kopieert aem-clientlib-generator de gecompileerde CSS- en JavaScript-bestanden naar een clientbibliotheek in de module ui.apps .

ui.frontend aan ui.apps architectuur

Gecompileerde CSS en JavaScript worden gekopieerd van de ui.frontend module in de ui.apps module als cliëntbibliotheek tijdens een Maven bouwt

Teastijl bijwerken ui-frontend-module

Breng vervolgens een kleine wijziging aan in de stijl Taser om te zien hoe de module ui.frontend en de clientbibliotheken werken. Gebruik winde van uw keusom het project van Venia in te voeren. De gebruikte schermafbeeldingen zijn van winde van de Code van Visual Studio.

  1. Navigeer en breid ui.frontend module uit en breid de omslaghiërarchie aan uit: ui.frontend/src/main/styles/commerce

    ui.frontend handelsomslag

    Merk op dat er veelvoudige dossiers van de Klasse (.scss) onder de omslag zijn. Dit zijn de Commerce-specifieke stijlen voor elk van de Commerce-componenten.

  2. Open het bestand _productteaser.scss .

  3. Werk de regel .item__image bij en wijzig de randregel:

    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%;
    }
    

    Met de bovenstaande regel moet u een vette, roze rand toevoegen aan de Product Teaser Component.

  4. Open een nieuw terminalvenster en navigeer naar de map ui.frontend :

    code language-shell
    $ cd <project-location>/aem-cif-guides-venia/ui.frontend
    
  5. Voer de volgende Maven-opdracht uit:

    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 de einduitvoer. U kunt zien dat met de opdracht Geweven verschillende NPM-scripts zijn uitgevoerd, waaronder npm run build . De opdracht npm run build wordt gedefinieerd in het package.json -bestand en heeft als gevolg dat het webpack-project wordt gecompileerd en de clientbibliotheek wordt gegenereerd.

  6. Inspect het bestand ui.frontend/dist/clientlib-site/site.css :

    Gecompileerde Plaats CSS

    Het dossier is de gecompileerde en geminificeerde versie van alle dossiers van de Klasse in het project.

    note note
    NOTE
    Bestanden als deze worden genegeerd vanuit de broncontrole omdat deze tijdens de ontwikkeltijd moeten worden gegenereerd.
  7. Inspect het bestand 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: {
    ...
    

    Dit is het configuratiedossier voor aem-client-clientlib-generatoren bepaalt waar en hoe gecompileerde CSS en JavaScript in een AEM cliëntbibliotheek zal omzetten.

  8. inspecteer het bestand in de module ui.apps : ui.apps/src/main/content/jcr_root/apps/venia/clientlibs/clientlib-site/css/site.css

    Gecompileerde Plaats CSS in ui.apps

    Hiermee wordt het site.css -bestand naar het ui.apps -project gekopieerd. Het maakt nu deel uit van een clientbibliotheek met de naam clientlib-site en een categorie venia.site . Zodra het bestand deel uitmaakt van de module ui.apps , kan het worden geïmplementeerd op AEM.

    note note
    NOTE
    Bestanden als deze worden ook genegeerd vanuit de broncontrole omdat deze tijdens de ontwikkeltijd moeten worden gegenereerd.
  9. Inspecteer dan de andere cliëntbibliotheken die door het project worden geproduceerd:

    Andere cliëntbibliotheken

    Deze clientbibliotheken worden niet beheerd door de module ui.frontend . In plaats daarvan bevatten deze clientbibliotheken CSS- en JavaScript-afhankelijkheden die door Adobe worden verschaft. De definitie voor deze clientbibliotheken staat in het .content.xml -bestand onder elke map.

    client-base - dit is een lege cliëntbibliotheek die eenvoudig de noodzakelijke gebiedsdelen van AEM de Componenten van de Kerninbedt. De categorie is venia.base .

    client-cif - dit is ook een lege cliëntbibliotheek die eenvoudig de noodzakelijke gebiedsdelen van inbedt AEM de Componenten van de Kern. De categorie is venia.cif .

    clientlib-net - dit omvat CSS nodig om AEM het Responsieve bezit van het Net toe te laten. Het gebruiken van het AEM net laat Wijze van de Lay-outin de AEMRedacteur toe en geeft inhoudsauteurs de capaciteit resize componenten. De categorie is venia.grid en is ingesloten in de venia.base -bibliotheek.

  10. Inspect de bestanden customheaderlibs.html en customfooterlibs.html beneath ui.apps/src/main/content/jcr_root/apps/venia/components/page :

    de manuscripten van de Kopbal en van de Voettekst van de Douane

    Deze manuscripten omvatten venia.base en venia.cif bibliotheken als deel van alle pagina's.

    note note
    NOTE
    Alleen de basisbibliotheken zijn 'hard-coded' als onderdeel van de paginascripts. venia.site is niet opgenomen in deze bestanden en maakt in plaats daarvan deel uit van de paginasjabloon voor meer flexibiliteit. Dit wordt later geïnspecteerd.
  11. Van de terminal, bouw en stel het volledige project aan een lokaal geval van AEM op:

    code language-shell
    $ cd aem-cif-guides-venia/
    $ mvn clean install -PautoInstallPackage,cloud
    

Auteur van een producttaser author-product-teaser

Nu de codeupdates zijn opgesteld, voeg een nieuw geval van de component van de Teaser van het Product aan de homepage van de plaats toe gebruikend de AEM auteurshulpmiddelen. Hierdoor kunnen we de bijgewerkte stijlen bekijken.

  1. Open een nieuw browser lusje en navigeer aan de Pagina van het Huis van de plaats: http://localhost:4502/editor.html/content/venia/us/en.html.

  2. Breid de Vinder van Activa (de zijspoor) op uit geeft wijze uit. Schakelaar de filter van Activa aan Producten.

    breid de Vinder en de filter van Activa door Producten uit

  3. Sleep een nieuw product naar de startpagina in de container van de hoofdlay-out:

    Teaser van het Product met roze grens

    U moet zien dat de Product Teaser nu een helderroze rand heeft die is gebaseerd op de eerder gemaakte CSS-regelwijziging.

Clientbibliotheken op de pagina controleren verify-client-libraries

Controleer vervolgens de opname van de clientbibliotheken op de pagina.

  1. Navigeer aan de Pagina van het Huis van de plaats: http://localhost:4502/editor.html/content/venia/us/en.html.

  2. Selecteer het menu van de Informatie van de Pagina en klik Mening zoals Gepubliceerd:

    Mening zoals Gepubliceerd

    Hierdoor wordt de pagina geopend zonder dat de AEM auteur JavaScript is geladen, zoals deze op de gepubliceerde site wordt weergegeven. De URL bevat de queryparameter ?wcmmode=disabled . Bij het ontwikkelen van CSS en JavaScript is het aan te raden deze parameter te gebruiken om de pagina te vereenvoudigen zonder dat AEM auteur dit doet.

  3. Bekijk de paginabron en u zou verscheidene cliëntbibliotheken moeten kunnen identificeren inbegrepen zijn:

    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>
    

    De bibliotheken van de cliënt wanneer geleverd aan de pagina worden vooraf bepaald met /etc.clientlibs en via a volmachtgediend om het even wat binnen te vermijden blootstellend gevoelig /apps of /libs.

    Opmerking venia/clientlibs/clientlib-site.min.css en venia/clientlibs/clientlib-site.min.js . Dit zijn de gecompileerde CSS- en JavaScript-bestanden die zijn afgeleid van de module ui.frontend .

Opname van clientbibliotheek met paginasjablonen client-library-inclusion-pagetemplates

Er zijn verschillende opties voor het opnemen van een bibliotheek aan de clientzijde. Inspecteer daarna hoe het geproduceerde project de clientlib-site bibliotheken via Malplaatjes van de Paginaomvat.

  1. Navigeer aan de Pagina van het Huis van de plaats binnen de Redacteur van de AEM: http://localhost:4502/editor.html/content/venia/us/en.html.

  2. Selecteer het menu van de Informatie van de Pagina en klik uitgeven Malplaatje:

    geef het malplaatje uit

    Dit opent het Bestemmende malplaatje van de Pagina het Huis pagina is gebaseerd op.

    note note
    NOTE
    Om alle beschikbare malplaatjes van het AEM scherm van het Begin te bekijken navigeer aan Hulpmiddelen > Algemeen > Malplaatjes.
  3. In de hogere linkerhoek, selecteer het pictogram van de Informatie van de Pagina en klik Beleid van de Pagina.

    het menupunt van het beleid van de Pagina

  4. Hiermee opent u het paginabeleid voor de sjabloon Openingspagina:

    Beleid van de Pagina - landende pagina

    Aan de rechterkant kunt u een lijst van cliëntbibliotheken categorieën zien die op alle pagina's zullen worden omvat die dit malplaatje gebruiken.

    • venia.dependencies - Biedt leveranciersbibliotheken waarvan venia.site afhankelijk is.
    • venia.site - Dit is de categorie voor clientlib-site die de module ui.frontend genereert.

    Bericht dat andere malplaatjes het zelfde beleid gebruiken, de Pagina van de Inhoud, het Bestaan Pagina, etc. Door hetzelfde beleid opnieuw te gebruiken, kunnen we ervoor zorgen dat dezelfde clientbibliotheken op alle pagina's worden opgenomen.

    Het voordeel van het gebruiken van Malplaatjes en het beleid van de Pagina om de opneming van cliëntbibliotheken te beheren is dat u het beleid per malplaatje kunt veranderen. U beheert bijvoorbeeld twee verschillende merken binnen dezelfde AEM. Elk merk heeft zijn eigen unieke stijl of thema maar de basisbibliotheken en de code zullen het zelfde zijn. Een ander voorbeeld: als u een grotere clientbibliotheek had die u alleen op bepaalde pagina's wilde weergeven, kon u een uniek paginabeleid maken, alleen voor die sjabloon.

Lokale WebPack-ontwikkeling local-webpack-development

In de vorige oefening, werd een update gemaakt aan een dossier van de Klasse in de ui.frontend module en toen na het uitvoeren van een Maven bouwt de veranderingen aan AEM worden opgesteld. Vervolgens bekijken we het gebruik van een webpack-dev-server om de front-end stijlen snel te ontwikkelen.

Met de webpack-dev-server worden afbeeldingen en sommige van de CSS/JavaScript vanuit de lokale versie van AEM geleverd, maar kan de ontwikkelaar de stijlen en JavaScript in de module ui.frontend wijzigen.

  1. In browser navigeer aan het Huis pagina en Mening zoals Gepubliceerd: http://localhost:4502/content/venia/us/en.html?wcmmode=disabled.

  2. Bekijk de bron van de pagina en exemplaar de ruwe HTML van de pagina.

  3. Ga terug naar de IDE van uw keuze onder de module ui.frontend om het bestand te openen: ui.frontend/src/main/static/index.html

    Statisch Dossier van HTML

  4. Overschrijf de inhoud van index.html en deeg de HTML die in de vorige stap wordt gekopieerd.

  5. Zoek omvat voor clientlib-site.min.css, clientlib-site.min.js en verwijdert hen.

    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>
    

    Deze worden verwijderd omdat ze de gecompileerde versie vertegenwoordigen van de CSS en JavaScript die zijn gegenereerd door de module ui.frontend . Laat de andere clientbibliotheken ongewijzigd, omdat ze van de actieve AEM worden proxy's.

  6. Open een nieuw terminalvenster en navigeer naar de map ui.frontend . Voer de opdracht npm start uit:

    code language-shell
    $ cd ui.frontend
    $ npm start
    

    Dit begint webpack-dev-server op http://localhost:8080/

    note caution
    CAUTION
    Als er een fout met betrekking tot Voldoende antwoorden optreedt, stopt u de server en voert u de opdracht npm rebuild node-sass uit. Herhaal de bovenstaande stappen. Dit kan gebeuren als u een andere versie van npm en node hebt opgegeven in het project aem-cif-guides-venia/pom.xml .
  7. Navigeer aan http://localhost:8080/in een nieuw lusje met zelfde browser zoals het programma geopende geval van AEM. U moet de startpagina van Venia zien via de webpack-dev-server:

    WebPack dev server op haven 80

    Laat de webpack-dev-server actief. Het wordt gebruikt in de volgende oefening.

Kaartstijl voor productteam implementeren update-css-product-teaser

Wijzig vervolgens de bestanden Sass in de module ui.frontend om een kaartachtige stijl voor de producttaser te implementeren. De webpack-dev-server wordt gebruikt om de wijzigingen snel te zien.

Terugkeer aan winde en het geproduceerde project.

  1. In de {module 0} ui.frontend, open het dossier _productteaser.scss bij ui.frontend/src/main/styles/commerce/_productteaser.scss opnieuw.

  2. Breng de volgende wijzigingen aan in de rand Product Teaser:

    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%;
        }
    

    Sla de wijzigingen op en de webpack-dev-server moet automatisch vernieuwen met de nieuwe stijlen.

  3. Voeg een slagschaduw toe en neem afgeronde hoeken op in de producttaser.

    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);
    }
    
  4. Werk de naam van het product bij zodat deze onder aan het gummetje wordt weergegeven en wijzig de tekstkleur.

    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%;
    }
    
  5. Werk de prijs van het product bij zodat deze ook onder aan het gummetje wordt weergegeven en wijzig de tekstkleur.

    code language-css
    .price {
        color: #000;
        display: block;
        float: left;
        font-size: 18px;
        font-weight: 900;
        padding: 0.75em;
        padding-bottom: 2em;
        width: 25%;
    
        ...
    
  6. Werk de media vraag bij de bodem bij, om de naam en de prijs in schermen te stapelen kleiner dan 992px.

    code language-css
    @media (max-width: 992px) {
        .productteaser .item__name {
            font-size: 18px;
            width: 100%;
        }
        .productteaser .item__price {
            font-size: 14px;
            width: 100%;
        }
    }
    

    De kaartstijl wordt nu weerspiegeld in de webpack-dev-server:

    het teaserveranderingen van de Server van de Dev van de Pakket Dev

    De wijzigingen zijn echter nog niet AEM. U kunt het oplossingsdossier hier downloaden.

  7. Stel de updates op om AEM te gebruiken uw Maven vaardigheden, van een bevel-lijn terminal:

    code language-shell
    $ cd aem-cif-guides-venia/
    $ mvn clean install -PautoInstallPackage,cloud
    
    note note
    NOTE
    Er zijn extra Opstelling van winde en Hulpmiddelendie projectdossiers rechtstreeks aan een lokale AEM instantie kunnen synchroniseren zonder het moeten een volledige Gemaakt bouwstijl uitvoeren.

Bijgewerkte producttaser weergeven view-updated-product-teaser

Nadat de code voor het project aan AEM wordt opgesteld, zou u de veranderingen in de Teaser van het Product moeten kunnen zien.

  1. Keer aan uw browser terug en vernieuw de Homepage: http://localhost:4502/editor.html/content/venia/us/en.html. De bijgewerkte stijlen voor productgummeters moeten worden toegepast.

    Bijgewerkte stijl van de Teaser van het Product

  2. Experimenteer door extra Product teasers toe te voegen. Gebruik de modus Lay-out om de breedte en verschuiving van de componenten te wijzigen en meerdere trappen in een rij weer te geven.

    Veelvoudige Teasers van het Product

Problemen oplossen troubleshooting

U kunt in CRXDE-Liteverifiëren dat het bijgewerkte CSS dossier is opgesteld: http://localhost:4502/crx/de/index.jsp#/apps/venia/clientlibs/clientlib-site/css/site.css

Wanneer u nieuwe CSS- en/of JavaScript-bestanden implementeert, is het ook belangrijk ervoor te zorgen dat de browser geen bestanden met een vaste naam levert. U kunt dit voorkomen door de browsercache te wissen of een nieuwe browsersessie te starten.

AEM probeert ook clientbibliotheken in cache te plaatsen voor prestaties. Soms, na een codeplaatsing worden de oudere dossiers gediend. U kunt AEM het geheime voorgeheugen van de cliëntbibliotheek manueel ongeldig maken gebruikend het hulpmiddel van de Bibliotheken van de Cliënt van de Rebuild. ongeldig Caches is de aangewezen methode als u vermoedt AEM een oude versie van een cliëntbibliotheek in het voorgeheugen onder heeft gebracht. Het opnieuw bouwen van Bibliotheken is inefficiënt en tijdrovend.

Gefeliciteerd congratulations

U hebt uw eerste AEM Core Component vormgegeven en u hebt een webpack-ontwikkelserver gebruikt!

Bonus Challenge bonus-challenge

Gebruik het systeem van de Stijl van de AEMom twee stijlen tot stand te brengen die door een inhoudsauteur kunnen worden in- en uitgeschakeld. het Ontwikkelen met het Systeem van de Stijlomvat gedetailleerde stappen en informatie over hoe te om dit te verwezenlijken.

Uitdaging van de Bonus - stijlSysteem

Aanvullende bronnen additional-resources

recommendation-more-help
19ffd973-7af2-44d0-84b5-d547b0dffee2