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

Voer de volgende git-opdracht uit om het project te 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 om uw AEM instantie met een instantie van Adobe Commerce te verbinden of de configuraties aan het onlangs gecreeerd project toe te voegen.

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

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 is het configuratiedossier voor aem-client-clientlib-generatoren bepaalt waar en hoe gecompileerde CSS en JavaScript in een AEM cliëntbibliotheek zal omzetten.

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

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.

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.

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.

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:

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.

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

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

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

Hiermee opent u het paginabeleid voor de sjabloon Openingspagina:

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.

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

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

$ cd ui.frontend
$ npm start

Dit 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, om de naam en de prijs in schermen te 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.