Clientbibliotheken en front-end workflow client-side-libraries

Kijk uit de tutorial/client-side-libraries-start vertakking van GitHub

$ cd aem-guides-wknd
$ git checkout tutorial/client-side-libraries-start

Stel codebasis aan een lokale AEM instantie op gebruikend uw Maven vaardigheden:

$ mvn clean install -PautoInstallSinglePackage

$ mvn clean install -PautoInstallSinglePackage -Pclassic

Met VSCode of andere IDE opent u het dialoogvenster ui.apps -module.

Het pad uitbreiden /apps/wknd/clientlibs om de clientlibs te bekijken die door archetype worden geproduceerd.

In de onderstaande sectie worden deze clientlibs nader bekeken.

De volgende tabel geeft een overzicht van de clientbibliotheken. Meer informatie over inclusief clientbibliotheken vindt u hier.

Waarnemen dat clientlib-site en clientlib-dependencies worden genegeerd van broncontrole. Dit is door ontwerp, aangezien deze bij bouwstijltijd door ui.frontend -module.

Open de ui.frontend en navigeer naar src/main/webpack/site.

Het bestand openen main.scss

main.scss is het ingangspunt voor de Sass-bestanden in het dialoogvenster ui.frontend -module. Het omvat de _variables.scss bestand, dat een reeks merkvariabelen bevat die in de verschillende bestanden voor de klasse in het project moeten worden gebruikt. De _base.scss Het bestand is ook opgenomen en definieert enkele basisstijlen voor HTML-elementen. Een reguliere expressie bevat de stijlen voor afzonderlijke componentstijlen onder src/main/webpack/components. Een andere reguliere expressie omvat de bestanden onder src/main/webpack/site/styles.

Het bestand Inspect main.ts. Hieronder vallen main.scss en een reguliere expressie om .js of .ts bestanden in het project. Dit ingangspunt wordt gebruikt door webpack-configuratiebestanden als het ingangspunt voor de gehele ui.frontend -module.

De onderliggende bestanden Inspect src/main/webpack/site/styles:

Deze bestanden zijn stijlen voor algemene elementen in de sjabloon, zoals Koptekst, Voettekst en container met hoofdinhoud. De CSS-regels in deze bestanden zijn gericht op verschillende HTML-elementen header, main, en footer. Deze HTML-elementen zijn gedefinieerd door het beleid in het vorige hoofdstuk Pagina's en sjablonen.

Breid uit components map onder src/main/webpack en inspecteer de bestanden.

Elk bestand wordt toegewezen aan een Core-component zoals de Accordeoncomponent. Elke Core-component is gebouwd met Element-wijziging blokkeren of BEM-notatie, zodat het eenvoudiger wordt om specifieke CSS-klassen met stijlregels als doel in te stellen. De onderliggende bestanden /components zijn door het AEM Project Archetype met de verschillende regels van BEM voor elke component geschrapt.

De WKND-basisstijlen downloaden wknd-base-styles-src-v3.zip en unzip het bestand.

Om de zelfstudie te versnellen, worden verschillende Sass-bestanden weergegeven die het WKND-merk implementeren op basis van Core Components en de structuur van het sjabloon voor artikelpagina.

De inhoud van ui.frontend/src met bestanden uit de vorige stap. De inhoud van de ZIP moet de volgende mappen overschrijven:

/src/main/webpack
         /components
         /resources
         /site
         /static

Inspect de gewijzigde bestanden voor meer informatie over de WKND-stijlimplementatie.

Open een opdrachtregelterminal en installeer de ui.frontend met de npm install opdracht:

$ cd ~/code/aem-guides-wknd/ui.frontend
$ npm install

Start de webpack-ontwikkelserver in horloge door de volgende opdracht uit te voeren:

$ npm run watch

Hiermee worden de bronbestanden van de ui.frontend en synchroniseert de wijzigingen met AEM op http://localhost:4502

+ jcr_root/apps/wknd/clientlibs/clientlib-site/js/site.js
+ jcr_root/apps/wknd/clientlibs/clientlib-site/js
+ jcr_root/apps/wknd/clientlibs/clientlib-site
+ jcr_root/apps/wknd/clientlibs/clientlib-dependencies/css.txt
+ jcr_root/apps/wknd/clientlibs/clientlib-dependencies/js.txt
+ jcr_root/apps/wknd/clientlibs/clientlib-dependencies
http://admin:admin@localhost:4502 > OK
+ jcr_root/apps/wknd/clientlibs/clientlib-site/css
+ jcr_root/apps/wknd/clientlibs/clientlib-site/js/site.js
http://admin:admin@localhost:4502 > OK

De opdracht npm run watch vult uiteindelijk de clientlib-site en clientlib-afhankelijkheden in de ui.apps die dan automatisch met AEM wordt gesynchroniseerd.

Het bestand Inspect site.css beneide ui.frontend/dist/clientlib-site/site.css. Dit is gecompileerde CSS die op de brondossiers van de Klasse wordt gebaseerd.

Het bestand Inspect ui.frontend/clientlib.config.js. Dit is het configuratiebestand voor een npm-insteekmodule. aem-clientlib-generator dat de inhoud van /dist naar een clientbibliotheek en naar de ui.apps -module.

Het bestand Inspect site.css in de ui.apps module bij ui.apps/src/main/content/jcr_root/apps/wknd/clientlibs/clientlib-site/css/site.css. Dit moet een identieke kopie zijn van het site.css bestand van de ui.frontend -module. Nu is het ui.apps kan het aan AEM worden opgesteld.

Open het artikel van LA Skatepark in AEM op: http://localhost:4502/editor.html/content/wknd/us/en/magazine/guide-la-skateparks.html.

De bijgewerkte stijlen voor het artikel worden nu weergegeven. Mogelijk moet u op de een of andere manier vernieuwen om CSS-bestanden te wissen die in cache zijn geplaatst door de browser.

Het begint veel dichter bij de mockups te komen!

Van, ui.frontend het bestand openen: ui.frontend/src/main/webpack/site/_variables.scss.

Werk de $brand-primary kleurvariabele:

//== variables.css

//== Brand Colors
$brand-primary:          $pink;

Sla de wijzigingen op.

Ga terug naar de browser en vernieuw de AEM pagina om de updates te zien:

De wijziging in de $brand-primary kleur en stop de webpack-build met de opdracht CTRL+C.

Blader naar de sjabloon Artikelpagina op http://localhost:4502/editor.html/conf/wknd/settings/wcm/templates/article-page/structure.html

Klik op de knop Pagina-informatie en in het menu dat u selecteert Paginabeleid om de Paginabeleid in.

Paginagegevens > Paginabeleid

U ziet dat de categorieën voor wknd.dependencies en wknd.site worden hier weergegeven. Standaard worden clientlibs die via het paginabeleid zijn geconfigureerd, gesplitst om de CSS op te nemen in de paginakop en de JavaScript op de tekstopmaak. U kunt expliciet vermelden welke clientlib-JavaScript in de paginakop moet worden geladen. Dit is het geval voor wknd.dependencies.

Ga naar de LA Skateparks pagina gemaakt met de Artikelpaginasjabloon: http://localhost:4502/editor.html/content/wknd/us/en/magazine/guide-la-skateparks.html.

Klik op de knop Pagina-informatie en in het menu dat u selecteert Weergeven als gepubliceerd om de artikelpagina buiten de AEM-editor te openen.

De paginabron weergeven van http://localhost:4502/content/wknd/us/en/magazine/guide-la-skateparks.html?wcmmode=disabled en u zou de volgende clientlib verwijzingen in moeten kunnen zien <head>:

<head>
...
<script src="/etc.clientlibs/wknd/clientlibs/clientlib-dependencies.lc-d41d8cd98f00b204e9800998ecf8427e-lc.min.js"></script>
<link rel="stylesheet" href="/etc.clientlibs/wknd/clientlibs/clientlib-dependencies.lc-d41d8cd98f00b204e9800998ecf8427e-lc.min.css" type="text/css">
<link rel="stylesheet" href="/etc.clientlibs/wknd/clientlibs/clientlib-site.lc-78fb9cea4c3a2cc17edce2c2b32631e2-lc.min.css" type="text/css">
...
</head>

De clientlibs gebruiken de proxy /etc.clientlibs eindpunt. U zou ook moeten zien dat volgende clientlib bij de bodem van de pagina omvat:

...
<script src="/etc.clientlibs/wknd/clientlibs/clientlib-site.lc-7157cf8cb32ed66d50e4e49cdc50780a-lc.min.js"></script>
<script src="/etc.clientlibs/wknd/clientlibs/clientlib-base.lc-53e6f96eb92561a1bdcc1cb196e9d9ca-lc.min.js"></script>
...
</body>

Kopieer de paginabron van de artikelpagina van het LA skatepark op http://localhost:4502/content/wknd/us/en/magazine/guide-la-skateparks.html?wcmmode=disabled.

Open uw IDE opnieuw. Plak de gekopieerde markering van AEM in de index.html in de ui.frontend module onder src/main/webpack/static.

De gekopieerde markering bewerken en verwijzingen verwijderen naar clientlib-site en clientlib-afhankelijkheden:

<!-- remove -->
<script type="text/javascript" src="/etc.clientlibs/wknd/clientlibs/clientlib-dependencies.js"></script>
<link rel="stylesheet" href="/etc.clientlibs/wknd/clientlibs/clientlib-dependencies.css" type="text/css">
<link rel="stylesheet" href="/etc.clientlibs/wknd/clientlibs/clientlib-site.css" type="text/css">
...
<script type="text/javascript" src="/etc.clientlibs/wknd/clientlibs/clientlib-site.js"></script>

Verwijder deze referenties omdat de webpack-ontwikkelserver deze artefacten automatisch genereert.

Start de webpack dev-server vanaf een nieuwe terminal met de volgende opdracht vanuit de ui.frontend module:

$ cd ~/code/aem-guides-wknd/ui.frontend/
$ npm start

> aem-maven-archetype@1.0.0 start code/aem-guides-wknd/ui.frontend
> webpack-dev-server --open --config ./webpack.dev.js

Hiermee opent u een nieuw browservenster op http://localhost:8080/ met statische opmaakcodes.

Het bestand bewerken src/main/webpack/site/_variables.scss bestand. Vervang de $text-color regel met het volgende:

- $text-color:              $black;
+ $text-color:              $pink;

Sla de wijzigingen op.

De wijzigingen worden automatisch in de browser weergegeven http://localhost:8080.

Controleer de /aem-guides-wknd.ui.frontend/webpack.dev.js bestand. Dit bevat de webpack-configuratie die wordt gebruikt om de webpack-dev-server te starten. De paden worden gevuld /content en /etc.clientlibs van een lokaal actieve instantie van AEM. Zo worden de afbeeldingen en andere clientlibs (niet beheerd door de ui.frontend code) beschikbaar worden gesteld.

U kunt stoppen de webpack-server vanaf de opdrachtregel door te typen CTRL+C.