Erfahren Sie, wie Client-seitige Bibliotheken oder Client-Bibliotheken zum Bereitstellen und Verwalten von CSS und JavaScript für eine Adobe Experience Manager (AEM) Sites-Implementierung verwendet werden. In diesem Tutorial wird auch erläutert, wie die ui.frontend -Modul, ein entkoppeltes Webpack -Projekt in den End-to-End-Build-Prozess integriert werden können.
Überprüfen Sie die erforderlichen Tools und Anweisungen zum Einrichten eines lokale Entwicklungsumgebung.
Außerdem wird empfohlen, die Komponentengrundlagen Tutorial zum Verständnis der Grundlagen von Client-seitigen Bibliotheken und AEM.
Wenn Sie das vorherige Kapitel erfolgreich abgeschlossen haben, können Sie das Projekt wiederverwenden und die Schritte zum Auschecken des Starterprojekts überspringen.
Sehen Sie sich den Basis-Code an, auf dem das Tutorial aufbaut:
Sehen Sie sich die tutorial/client-side-libraries-start
Verzweigung aus GitHub
$ cd aem-guides-wknd
$ git checkout tutorial/client-side-libraries-start
Stellen Sie die Codebasis mithilfe Ihrer Maven-Kenntnisse in einer lokalen AEM-Instanz bereit:
$ mvn clean install -PautoInstallSinglePackage
Wenn Sie AEM 6.5 oder 6.4 verwenden, hängen Sie die classic
Profile zu beliebigen Maven-Befehlen hinzufügen.
$ mvn clean install -PautoInstallSinglePackage -Pclassic
Sie können den fertigen Code immer in GitHub oder den Code lokal auschecken, indem Sie zu der Verzweigung wechseln tutorial/client-side-libraries-solution
.
ui.frontend
und einen Webpack Development Server für die dedizierte Front-End-Entwicklung.In diesem Kapitel fügen Sie einige Grundlinien-Stile für die WKND-Site und die Artikelseitenvorlage hinzu, um die Implementierung näher an die Designmodelle der Benutzeroberfläche. Sie verwenden einen erweiterten Front-End-Workflow, um ein Webpack-Projekt in eine AEM Client-Bibliothek zu integrieren.
Artikelseite mit angewendeten Grundlinienstilen
Client-seitige Bibliotheken bieten einen Mechanismus zum Organisieren und Verwalten von CSS- und JavaScript-Dateien, die für eine AEM Sites-Implementierung erforderlich sind. Die grundlegenden Ziele für Client-seitige Bibliotheken oder Clientlibs sind:
Weitere Informationen zur Verwendung Client-seitiger Bibliotheken finden Sie hier.
Clientseitige Bibliotheken haben einige Einschränkungen. Insbesondere ist eine begrenzte Unterstützung für beliebte Frontend-Sprachen wie Sass, LESS und TypeScript. Im Tutorial zeigen wir Ihnen, wie die ui.frontend -Modul kann dabei helfen, dies zu lösen.
Stellen Sie die Starter-Codebasis in einer lokalen AEM-Instanz bereit und navigieren Sie zu http://localhost:4502/editor.html/content/wknd/us/en/magazine/guide-la-skateparks.html. Diese Seite ist nicht formatiert. Implementieren wir Client-seitige Bibliotheken für die WKND-Marke, um CSS und JavaScript zur Seite hinzuzufügen.
Als Nächstes untersuchen wir die Organisation von Client-Bibliotheken, die von der AEM Projektarchetyp.
Übergeordnetes Diagramm Client-seitige Bibliotheksorganisation und Seiteneinbindung
Die folgende Client-seitige Bibliotheksorganisation wird vom Projektarchetyp generiert, stellt jedoch lediglich einen Ausgangspunkt dar. Die Art und Weise, wie ein Projekt CSS und JavaScript letztendlich in einer Sites-Implementierung verwaltet und bereitstellt, kann je nach Ressourcen, Fachkenntnissen und Anforderungen erheblich variieren.
Wenn Sie VSCode oder eine andere IDE verwenden, öffnen Sie die ui.apps -Modul.
Erweitern des Pfads /apps/wknd/clientlibs
, um die vom Archetyp generierten Client-Bibliotheken anzuzeigen.
Im folgenden Abschnitt werden diese Client-seitigen Bibliotheken ausführlicher erläutert.
Die folgende Tabelle fasst die Client-Bibliotheken zusammen. Weitere Informationen einschließlich Client-Bibliotheken finden Sie hier ..
Name | Beschreibung | Anmerkungen |
---|---|---|
clientlib-base |
Grundlegende CSS- und JavaScript-Ebene, die für die Funktion der WKND-Site erforderlich sind | bettet Client-Bibliotheken der Kernkomponente ein |
clientlib-grid |
Generiert das erforderliche CSS für Layout-Modus arbeiten. | Mobile-/Tablet-Haltepunkte können hier konfiguriert werden |
clientlib-site |
Enthält Site-spezifisches Design für die WKND-Site | Erstellt von der ui.frontend Modul |
clientlib-dependencies |
Bettet alle Drittanbieterabhängigkeiten ein | Erstellt von der ui.frontend Modul |
Beachten Sie, dass clientlib-site
und clientlib-dependencies
werden von der Quell-Code-Verwaltung ignoriert. Dies ist beabsichtigt, da diese zum Zeitpunkt der Erstellung durch die ui.frontend
-Modul.
Aktualisieren Sie anschließend die in der Variablen ui.frontend -Modul. Die Dateien in der ui.frontend
-Modul generieren clientlib-site
und clientlib-dependecies
-Bibliotheken, die das Site-Design und alle Drittanbieter-Abhängigkeiten enthalten.
Clientseitige Bibliotheken unterstützen keine erweiterten Sprachen wie Sass oder TypeScript. Es gibt mehrere Open-Source-Tools wie NPM und Webpack die die Front-End-Entwicklung beschleunigen und optimieren. Das Ziel der ui.frontend -Modul kann diese Tools verwenden, um die meisten Frontend-Quelldateien zu verwalten.
Öffnen Sie die ui.frontend -Modul und navigieren Sie zu src/main/webpack/site
.
Öffnen Sie die Datei main.scss
main.scss
ist der Einstiegspunkt zu den Sass-Dateien im ui.frontend
-Modul. Er enthält die _variables.scss
-Datei, die eine Reihe von Markenvariablen enthält, die in den verschiedenen Sass-Dateien des Projekts verwendet werden sollen. Die _base.scss
-Datei ist ebenfalls enthalten und definiert einige grundlegende Stile für HTML-Elemente. Ein regulärer Ausdruck enthält die Stile für einzelne Komponentenstile unter src/main/webpack/components
. Ein weiterer regulärer Ausdruck enthält die Dateien unter src/main/webpack/site/styles
.
Prüfen Sie die Datei main.ts
. Er umfasst main.scss
und einen regulären Ausdruck, um alle .js
oder .ts
-Dateien im Projekt. Dieser Einstiegspunkt wird von der Webpack-Konfigurationsdateien als Einstiegspunkt für die gesamte ui.frontend
-Modul.
Inspect der Dateien unter src/main/webpack/site/styles
:
Diese Dateistile für globale Elemente in der Vorlage, wie Kopfzeile, Fußzeile und Hauptinhaltscontainer. Die CSS-Regeln in diesen Dateien zielen auf verschiedene HTML-Elemente ab header
, main
und footer
. Diese HTML-Elemente wurden durch Richtlinien im vorherigen Kapitel definiert Seiten und Vorlagen.
Erweitern Sie die components
Ordner unter src/main/webpack
und überprüfen Sie die Dateien.
Jede Datei wird einer Kernkomponente wie der Accordion-Komponente. Jede Kernkomponente erstellt mit Block Element Modifier oder BEM-Notation, um das Targeting bestimmter CSS-Klassen mit Stilregeln zu erleichtern. Die Dateien unter /components
wurden vom AEM Projektarchetyp mit den verschiedenen BEM-Regeln für die einzelnen Komponenten herausgestochen.
WKND-Basisstile herunterladen wknd-base-styles-src-v3.zip und unzip die Datei.
Um das Tutorial zu beschleunigen, werden mehrere Sass-Dateien bereitgestellt, die die WKND-Marke basierend auf Kernkomponenten und der Struktur der Artikelseitenvorlage implementieren.
Überschreiben der Inhalte von ui.frontend/src
mit Dateien aus dem vorherigen Schritt. Der Inhalt der ZIP-Datei sollte die folgenden Ordner überschreiben:
/src/main/webpack
/components
/resources
/site
/static
Inspect die geänderten Dateien, um Details zur WKND-Stilimplementierung anzuzeigen.
Ein wichtiges Integrationselement, das in ui.frontend Modul, aem-clientlib-generator nimmt die kompilierten CSS- und JS-Artefakte aus einem webpack/npm-Projekt und wandelt sie in AEM Client-seitige Bibliotheken um.
Der AEM Projektarchetyp richtet diese Integration automatisch ein. Erfahren Sie, wie es funktioniert.
Öffnen Sie ein Befehlszeilen-Terminal und installieren Sie die ui.frontend -Modul, das npm install
command:
$ cd ~/code/aem-guides-wknd/ui.frontend
$ npm install
npm install
Ausführung ist nur einmal erforderlich, z. B. nach einem neuen Klon oder einer Generation des Projekts.
Starten Sie den Webpack Development Server in watch -Modus, indem Sie den folgenden Befehl ausführen:
$ npm run watch
Dadurch werden die Quelldateien aus dem ui.frontend
-Modul und synchronisiert die Änderungen mit AEM unter 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
Der Befehl npm run watch
füllt schließlich die clientlib-site und clientlib-dependencies im ui.apps -Modul, das dann automatisch mit AEM synchronisiert wird.
Es gibt auch eine npm run prod
-Profil, das JS und CSS minimiert. Dies ist die Standardkompilierung, sobald der Webpack-Build über Maven ausgelöst wird. Weitere Informationen zum ui.frontend-Modul finden Sie hier ..
Inspect der Datei site.css
unter ui.frontend/dist/clientlib-site/site.css
. Dies ist das kompilierte CSS, das auf den Sass-Quelldateien basiert.
Prüfen Sie die Datei ui.frontend/clientlib.config.js
. Dies ist die Konfigurationsdatei für ein npm-Plug-in, aem-clientlib-generator die den Inhalt von /dist
in eine Client-Bibliothek ein und verschiebt sie in die ui.apps
-Modul.
Inspect der Datei site.css
im ui.apps -Modul an ui.apps/src/main/content/jcr_root/apps/wknd/clientlibs/clientlib-site/css/site.css
. Dies sollte eine identische Kopie der site.css
aus der ui.frontend -Modul. Jetzt ist es in ui.apps -Modul kann es in AEM bereitgestellt werden.
Seit clientlib-site wird während der Build-Zeit kompiliert, indem entweder npm oder Maven, kann sie aus der Quell-Code-Verwaltung im ui.apps -Modul. Inspect .gitignore
Datei unter ui.apps.
Öffnen Sie den Artikel "LA Skatepark"in AEM unter: http://localhost:4502/editor.html/content/wknd/us/en/magazine/guide-la-skateparks.html.
Sie sollten nun die aktualisierten Stile für den Artikel sehen. Möglicherweise müssen Sie eine harte Aktualisierung durchführen, um alle CSS-Dateien zu löschen, die vom Browser zwischengespeichert wurden.
Es fängt an, sich den Mücken viel näher zu sehen!
Die Schritte, die oben zum Erstellen und Bereitstellen des ui.frontend-Codes für AEM ausgeführt werden, werden automatisch ausgeführt, wenn ein Maven-Build vom Stamm des Projekts ausgelöst wird mvn clean install -PautoInstallSinglePackage
.
Nehmen Sie als Nächstes eine kleine Änderung an der ui.frontend
-Modul, um die npm run watch
stellt die Stile automatisch für die lokale AEM bereit.
Von ui.frontend
-Modul öffnen Sie die Datei: ui.frontend/src/main/webpack/site/_variables.scss
.
Aktualisieren Sie die $brand-primary
Farbvariable:
//== variables.css
//== Brand Colors
$brand-primary: $pink;
Speichern Sie die Änderungen.
Kehren Sie zum Browser zurück und aktualisieren Sie die AEM Seite, um die Aktualisierungen anzuzeigen:
Ändern Sie die $brand-primary
Farbe verwenden und den Webpack-Build mithilfe des Befehls stoppen CTRL+C
.
Die Verwendung der ui.frontend nicht für alle Projekte erforderlich sein. Die ui.frontend fügt zusätzliche Komplexität hinzu. Wenn es nicht notwendig/wünschenswert ist, einige dieser erweiterten Frontend-Tools zu verwenden (Sass, Webpack, npm…), ist dies möglicherweise nicht erforderlich.
Als Nächstes sehen wir, wie die clientlibs auf der AEM Seite referenziert werden. Eine gängige Best Practice bei der Webentwicklung ist die Einbeziehung von CSS in die HTML-Kopfzeile. <head>
und JavaScript direkt vor dem Schließen </body>
-Tag.
Navigieren Sie zur Vorlage "Artikelseite"unter http://localhost:4502/editor.html/conf/wknd/settings/wcm/templates/article-page/structure.html
Klicken Sie auf Seiteninformationen und wählen Sie im Menü Seitenrichtlinie , um Seitenrichtlinie angezeigt.
Seiteninformationen > Seitenrichtlinie
Beachten Sie, dass die Kategorien für wknd.dependencies
und wknd.site
sind hier aufgeführt. Standardmäßig werden Client-Bibliotheken, die über die Seitenrichtlinie konfiguriert werden, aufgeteilt, um das CSS in den Seitenkopf und das JavaScript am Textende einzuschließen. Sie können das clientlib-JavaScript, das im Seitenkopf geladen wird, explizit auflisten. Dies gilt für wknd.dependencies
.
Es ist auch möglich, die wknd.site
oder wknd.dependencies
direkt aus der Seitenkomponente mithilfe der customheaderlibs.html
oder customfooterlibs.html
Skript. Die Verwendung der Vorlage bietet Ihnen Flexibilität, da Sie auswählen können, welche Client-Bibliotheken pro Vorlage verwendet werden. Beispiel: Sie verfügen über eine umfangreiche JavaScript-Bibliothek, die nur für eine Vorlage zum Auswählen verwendet wird.
Navigieren Sie zum LA Skateparks mit der Artikelseitenvorlage: http://localhost:4502/editor.html/content/wknd/us/en/magazine/guide-la-skateparks.html.
Klicken Sie auf Seiteninformationen und wählen Sie im Menü Als veröffentlicht anzeigen , um die Artikelseite außerhalb des AEM-Editors zu öffnen.
Anzeigen der Seitenquelle von http://localhost:4502/content/wknd/us/en/magazine/guide-la-skateparks.html?wcmmode=disabled und Sie sollten die folgenden clientlib-Verweise in der <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>
Beachten Sie, dass die Client-Bibliotheken den Proxy verwenden /etc.clientlibs
-Endpunkt. Sie sollten auch sehen, dass die folgende clientlib unten auf der Seite Folgendes enthält:
...
<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>
Für AEM 6.5/6.4 werden die clientseitigen Bibliotheken nicht automatisch minimiert. Weitere Informationen finden Sie in der Dokumentation unter HTML Library Manager zum Aktivieren der Minimierung (empfohlen).
Auf der Veröffentlichungsseite ist es wichtig, dass die Client-Bibliotheken not bereitgestellt von /apps da dieser Pfad aus Sicherheitsgründen mit der Dispatcher-Filterabschnitt. Die allowProxy-Eigenschaft der Client-Bibliothek stellt sicher, dass CSS und JS von bereitgestellt werden /etc.clientlibs.
Erfahren Sie, wie Sie einzelne Stile implementieren und Kernkomponenten mithilfe des Stilsystems von Experience Manager wiederverwenden. Entwickeln mit dem Stilsystem behandelt die Verwendung des Stilsystems zum Erweitern von Kernkomponenten mit markenspezifischem CSS und erweiterten Richtlinienkonfigurationen des Vorlagen-Editors.
Anzeigen des fertigen Codes unter GitHub oder den Code lokal in der Git-Verzweigung überprüfen und bereitstellen tutorial/client-side-libraries-solution
.
tutorial/client-side-libraries-solution
-Verzweigung.In den vorherigen Übungen werden mehrere Sass-Dateien im ui.frontend -Modul aktualisiert wurde und durch einen Build-Prozess, sehen Sie schließlich, dass diese Änderungen sich in AEM widerspiegeln. Als Nächstes sehen wir uns eine Technik an, die eine webpack-dev-server die schnelle Entwicklung der Frontend-Stile gegen statisch HTML.
Diese Technik ist praktisch, wenn die meisten Stile und Frontend-Code von einem dedizierten Frontend-Entwickler ausgeführt werden, der möglicherweise keinen einfachen Zugriff auf eine AEM-Umgebung hat. Diese Technik ermöglicht es dem FED auch, Änderungen direkt an der HTML vorzunehmen, die dann an einen AEM Entwickler übergeben werden können, um sie als Komponenten zu implementieren.
Kopieren Sie die Seitenquelle der LA skatepark-Artikelseite unter http://localhost:4502/content/wknd/us/en/magazine/guide-la-skateparks.html?wcmmode=disabled.
Öffnen Sie Ihre IDE erneut. Fügen Sie das kopierte Markup aus AEM in die index.html
im ui.frontend Modul unter src/main/webpack/static
.
Bearbeiten Sie das kopierte Markup und entfernen Sie alle Verweise auf clientlib-site und clientlib-dependencies:
<!-- 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>
Entfernen Sie diese Verweise, da der Webpack Development Server diese Artefakte automatisch generiert.
Starten Sie den webpack-Dev-Server von einem neuen Terminal aus, indem Sie den folgenden Befehl in der ui.frontend -Modul:
$ 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
Dadurch sollte ein neues Browser-Fenster unter http://localhost:8080/ mit statischem Markup.
Datei bearbeiten src/main/webpack/site/_variables.scss
-Datei. Ersetzen Sie die $text-color
Regel mit folgendem Inhalt verwenden:
- $text-color: $black;
+ $text-color: $pink;
Speichern Sie die Änderungen.
Sie sollten die Änderungen automatisch im Browser auf http://localhost:8080.
Überprüfen Sie die /aem-guides-wknd.ui.frontend/webpack.dev.js
-Datei. Dies enthält die Webpack-Konfiguration, die zum Starten des webpack-Dev-Servers verwendet wird. Die Pfade werden hierdurch gesteuert /content
und /etc.clientlibs
von einer lokal ausgeführten Instanz von AEM. So werden die Bilder und andere Client-Bibliotheken (nicht von der ui.frontend -Code) bereitgestellt werden.
Die Bild-src des statischen Markups verweist auf eine Live-Bildkomponente in einer lokalen AEM-Instanz. Bilder erscheinen beschädigt, wenn sich der Pfad zum Bild ändert, wenn AEM nicht gestartet wird oder der Browser sich nicht bei der lokalen AEM-Instanz angemeldet hat. Bei Übergabe an eine externe Ressource ist es auch möglich, die Bilder durch statische Referenzen zu ersetzen.
Sie können stop den Webpack-Server über die Befehlszeile durch Eingabe von CTRL+C
.
aemfed ist ein Open-Source-Befehlszeilen-Tool, mit dem die Front-End-Entwicklung beschleunigt werden kann. Es wird durch aemsync, BrowserSyncund Sling Log Tracer.
Auf hoher Ebene wird die aemfed
ist so konzipiert, dass Dateiänderungen in der ui.apps und synchronisieren sie automatisch direkt mit einer laufenden AEM-Instanz. Basierend auf den Änderungen wird ein lokaler Browser automatisch aktualisiert, wodurch die Front-End-Entwicklung beschleunigt wird. Es ist auch für die Verwendung mit Sling Log Tracker entwickelt, um Server-seitige Fehler automatisch direkt im Terminal anzuzeigen.
Wenn Sie viel Arbeit im ui.apps -Modul, Ändern von HTL-Skripten und Erstellen benutzerdefinierter Komponenten, aemfed kann ein leistungsstarkes Tool sein. Die vollständige Dokumentation finden Sie hier ..
Verwenden verschiedener Methoden categories und Einbettungen um mehrere Client-Bibliotheken einzuschließen, kann die Fehlerbehebung schwerfällig sein. AEM stellt mehrere Hilfsmittel zur Verfügung. Eines der wichtigsten Instrumente ist Client-Bibliotheken neu erstellen was AEM zwingt, alle LESS-Dateien neu zu kompilieren und das CSS zu generieren.
Sprunglippen - Listet die in der AEM-Instanz registrierten Client-Bibliotheken auf. <host>/libs/granite/ui/content/dumplibs.html
Testausgabe - ermöglicht es einem Benutzer, die erwartete HTML-Ausgabe von clientlib-Includes basierend auf der Kategorie anzuzeigen. <host>/libs/granite/ui/content/dumplibs.test.html
Überprüfung von Bibliotheksabhängigkeiten - markiert alle Abhängigkeiten oder eingebetteten Kategorien, die nicht gefunden werden können. <host>/libs/granite/ui/content/dumplibs.validate.html
Client-Bibliotheken neu erstellen - ermöglicht es einem Benutzer, AEM zu erzwingen, die Client-Bibliotheken neu zu erstellen oder den Cache von Client-Bibliotheken ungültig zu machen. Dieses Tool ist bei der Entwicklung mit LESS effektiv, da dies AEM zwingen kann, die generierte CSS neu zu kompilieren. Im Allgemeinen ist es effektiver, Caches zu invalidieren und dann eine Seitenaktualisierung vorzunehmen, anstatt die Bibliotheken neu zu erstellen. <host>/libs/granite/ui/content/dumplibs.rebuild.html