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

Voer de volgende git-opdracht uit, zodat u het project kunt klonen:

$ git clone git@github.com:adobe/aem-cif-guides-venia.git

Bouw en stel het project aan een lokaal geval van AEM op:

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

Voeg de noodzakelijke configuraties OSGi toe zodat kunt u uw AEM instantie met een instantie van Adobe Commerce verbinden of de configuraties toevoegen aan het gecreeerde project.

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.

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

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.

Open het bestand _productteaser.scss .

Werk de regel .item__image bij en wijzig de randregel:

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

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

$ cd <project-location>/aem-cif-guides-venia/ui.frontend

Voer de volgende Maven-opdracht uit:

$ 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 ziet dat de opdracht Geweven verschillende NPM-scripts uitvoert, waaronder npm run build . De opdracht npm run build wordt gedefinieerd in het package.json -bestand en compileert het webpack-project en activeert het genereren van de clientbibliotheek.

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

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

Inspect het bestand ui.frontend/clientlib.config.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 configuratiedossier is voor aem-clientlib-generatoren bepaalt waar en hoe gecompileerde CSS en JavaScript in een AEM cliëntbibliotheek worden omgezet.

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

Dit bestand wordt site.css gekopieerd naar het ui.apps -project. 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.

Inspecteer dan de andere cliëntbibliotheken die door het project worden geproduceerd:

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.

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

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

clientlib-net - omvat CSS 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.

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

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

Van de terminal, bouw en stel het volledige project aan een lokaal geval van AEM op:

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

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.

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

uit

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

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

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

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

Deze pagina wordt 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.

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

<!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 . Deze bestanden zijn de gecompileerde CSS- en JavaScript-bestanden die zijn afgeleid van de module ui.frontend .

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.

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

uit

Het Landing malplaatje van de Pagina wordt geopend dat de 3} pagina van het Huis {op wordt gebaseerd.

In de hogere linkerhoek, selecteer het pictogram van de Informatie van de Pagina en klik Beleid van de Pagina.

Het paginabeleid wordt geopend voor de sjabloon Openingspagina:

Aan de rechterkant, kunt u een lijst van de Bibliotheken van de Cliënt categorieën zien die op alle pagina's inbegrepen zijn die dit malplaatje gebruiken.

• venia.dependencies - Biedt leveranciersbibliotheken waarvan venia.site afhankelijk is.
• venia.site - 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, zorgt het ervoor 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 zijn het zelfde. 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.

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

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

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

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

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

<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 include-bestanden worden verwijderd omdat ze de gecompileerde versie van de CSS en JavaScript vertegenwoordigen die door de module ui.frontend worden gegenereerd. Laat de andere clientbibliotheken ongewijzigd, omdat ze vanaf de actieve AEM worden proxy.

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

$ cd ui.frontend
$ npm start

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

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:

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

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

Breng de volgende wijzigingen aan in de rand Product Teaser:

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

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

 .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);
}

Werk de naam van het product bij zodat deze onder aan het gummetje wordt weergegeven en wijzig de tekstkleur.

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

Werk de prijs van het product bij zodat deze ook onder aan het gummetje wordt weergegeven en wijzig de tekstkleur.

.price {
    color: #000;
    display: block;
    float: left;
    font-size: 18px;
    font-weight: 900;
    padding: 0.75em;
    padding-bottom: 2em;
    width: 25%;

    ...

Werk de media vraag bij de bodem bij, zodat kunt u de naam en de prijs in schermen stapelen kleiner dan 992px.

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

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

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

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

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.

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.