Erfahren Sie, wie Sie einzelne Stile implementieren und Kernkomponenten mithilfe des Stilsystems von Experience Manager wiederverwenden. In diesem Tutorial wird die Entwicklung für das Stilsystem beschrieben, um Kernkomponenten mit markenspezifischem CSS und erweiterten Richtlinienkonfigurationen des Vorlagen-Editors zu erweitern.
Überprüfen Sie die erforderlichen Tools und Anweisungen zum Einrichten eines lokale Entwicklungsumgebung.
Außerdem wird empfohlen, die Client-seitige Bibliotheken und Frontend-Workflow Tutorial zum Verständnis der Grundlagen von Client-seitigen Bibliotheken und den verschiedenen Frontend-Tools, die in das AEM Projekt integriert sind.
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/style-system-start
Verzweigung aus GitHub
$ cd aem-guides-wknd
$ git checkout tutorial/style-system-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/style-system-solution
.
Dieses Kapitel verwendet die Stilsystemfunktion , um Varianten der Titel und Text Komponenten, die auf der Artikelseite verwendet werden.
Für die Titelkomponente verfügbaren Stil unterstreichen
Die Stilsystem ermöglicht es Entwicklern und Vorlagen-Editoren, mehrere visuelle Varianten einer Komponente zu erstellen. Autoren können dann entscheiden, welcher Stil beim Erstellen einer Seite verwendet werden soll. Das Stilsystem wird im Rest des Tutorials verwendet, um mehrere einzigartige Stile zu erzielen und gleichzeitig Kernkomponenten in einem Ansatz mit geringem Code zu verwenden.
Die allgemeine Idee des Stilsystems besteht darin, dass Autoren verschiedene Stile dafür wählen können, wie eine Komponente aussehen soll. Die "Stile"werden durch zusätzliche CSS-Klassen unterstützt, die in das äußere div einer Komponente eingefügt werden. In den Client-Bibliotheken werden CSS-Regeln basierend auf diesen Stilklassen hinzugefügt, sodass die Komponente das Erscheinungsbild ändert.
Sie finden Detaillierte Dokumentation zum Stilsystem finden Sie hier .. Es gibt auch eine große Technisches Video zum Verständnis des Stilsystems.
Die Titelkomponente wurde in das Projekt unter /apps/wknd/components/title
als Teil der ui.apps -Modul. Die Standardstile für Überschriftenelemente (H1
, H2
, H3
…) bereits im ui.frontend -Modul.
Die WKND-Artikelentwürfe enthalten einen eindeutigen Stil für die Titelkomponente mit einer Unterstreichung. Anstatt zwei Komponenten zu erstellen oder das Komponentendialogfeld zu ändern, kann das Stilsystem verwendet werden, um Autoren die Möglichkeit zu geben, einen Unterstrichstil hinzuzufügen.
Fügen wir eine Richtlinie für die Titel -Komponenten hinzu, damit Inhaltsautoren den Unterstrichstil auswählen können, der auf bestimmte Komponenten angewendet werden soll. Dies geschieht mit dem Vorlagen-Editor in AEM.
Navigieren Sie zum Artikelseite Vorlage aus: http://localhost:4502/editor.html/conf/wknd/settings/wcm/templates/article-page/structure.html
In Struktur -Modus im Hauptmodus Layout-Container, wählen Sie die Politik Symbol neben Titel Komponente aufgeführt unter Zugelassene Komponenten:
Erstellen Sie eine Richtlinie für die Komponente Titel mit den folgenden Werten:
Richtlinienname*: WKND-Titel
Eigenschaften > Registerkarte "Stile" > Neuen Stil hinzufügen
Unterstreichen : cmp-title--underline
Klicken Fertig , um die Änderungen an der Titelrichtlinie zu speichern.
Der Wert cmp-title--underline
füllt die CSS-Klasse im äußeren div des HTML-Markups der Komponente.
Als Autor können wir den Unterstrichstil auf bestimmte Titelkomponenten anwenden.
Navigieren Sie zum La Skateparks Artikel im AEM Sites-Editor unter: http://localhost:4502/editor.html/content/wknd/us/en/magazine/guide-la-skateparks.html
In Bearbeiten -Modus eine Titelkomponente auswählen. Klicken Sie auf Pinsel und wählen Sie das Unterstreichen style:
An dieser Stelle tritt keine sichtbare Änderung auf, da underline
-Stil wurde nicht implementiert. In der nächsten Übung wird dieser Stil implementiert.
Klicken Sie auf Seiteninformationen Symbol > Als veröffentlicht anzeigen , um die Seite außerhalb AEM Editors zu überprüfen.
Verwenden Sie Ihre Browser-Entwickler-Tools, um zu überprüfen, ob das Markup um die Titelkomponente über die CSS-Klasse verfügt. cmp-title--underline
auf das äußere div angewendet.
<div class="title cmp-title--underline">
<div data-cmp-data-layer="{"title-b6450e9cab":{"@type":"wknd/components/title","repo:modifyDate":"2022-02-23T17:34:42Z","dc:title":"Vans Off the Wall Skatepark"}}"
id="title-b6450e9cab" class="cmp-title">
<h2 class="cmp-title__text">Vans Off the Wall Skatepark</h2>
</div>
</div>
Als Nächstes implementieren Sie den Stil "Unterstrichen"mit ui.frontend -Modul des AEM. Der Webpack Development Server, der im Paket mit dem ui.frontend -Modul zur Vorschau der Stile before wird die Bereitstellung in einer lokalen Instanz von AEM verwendet.
Starten Sie die watch
-Prozess innerhalb von ui.frontend -Modul:
$ cd ~/code/aem-guides-wknd/ui.frontend/
$ npm run watch
Dadurch wird ein Prozess gestartet, der Änderungen im ui.frontend
und synchronisieren Sie die Änderungen mit der AEM-Instanz.
Geben Sie Ihre IDE zurück und öffnen Sie die Datei . _title.scss
von: ui.frontend/src/main/webpack/components/_title.scss
.
Einführung einer neuen Regel, die auf die cmp-title--underline
-Klasse:
/* Default Title Styles */
.cmp-title {}
.cmp-title__text {}
.cmp-title__link {}
/* Add Title Underline Style */
.cmp-title--underline {
.cmp-title__text {
&:after {
display: block;
width: 84px;
padding-top: 8px;
content: '';
border-bottom: 2px solid $brand-primary;
}
}
}
Es wird als Best Practice erachtet, Stile immer eng auf die Zielkomponente zu verteilen. Dadurch wird sichergestellt, dass sich zusätzliche Stile nicht auf andere Bereiche der Seite auswirken.
Alle Kernkomponenten halten BEM-Notation. Es empfiehlt sich, beim Erstellen eines Standardstils für eine Komponente die äußere CSS-Klasse als Ziel festzulegen. Eine weitere Best Practice ist, Klassennamen, die von der BEM-Notation der Kernkomponente angegeben werden, anstelle von HTML-Elementen zu verwenden.
Kehren Sie zum Browser und zur AEM Seite zurück. Sie sollten sehen, dass der Stil Unterstrichen hinzugefügt wurde:
Im AEM-Editor sollten Sie jetzt in der Lage sein, die Unterstreichen zu erstellen und zu sehen, dass die Änderungen visuell dargestellt werden.
Wiederholen Sie als Nächstes ähnliche Schritte, um einen eindeutigen Stil auf die Textkomponente. Die Textkomponente wurde in das Projekt unter /apps/wknd/components/text
als Teil der ui.apps -Modul. Die Standardstile für Absatzelemente wurden bereits im Abschnitt ui.frontend.
Die WKND-Artikelentwürfe enthalten einen eindeutigen Stil für die Textkomponente mit einem Anführungszeichenblock:
Als Nächstes fügen Sie eine Richtlinie für die Textkomponenten hinzu.
Navigieren Sie zum Artikelseitenvorlage von: http://localhost:4502/editor.html/conf/wknd/settings/wcm/templates/article-page/structure.html.
In Struktur -Modus im Hauptmodus Layout-Container, wählen Sie die Politik Symbol neben Text Komponente aufgeführt unter Zugelassene Komponenten:
Aktualisieren Sie die Textkomponentenrichtlinie mit den folgenden Werten:
Richtlinienname*: Inhaltstext
Plugins > Absatzformate > Absatzstile aktivieren
Registerkarte "Stile" > Neuen Stil hinzufügen
Anführungsblock : cmp-text--quote
Klicken Fertig , um die Änderungen an der Textrichtlinie zu speichern.
Navigieren Sie zum La Skateparks Artikel im AEM Sites-Editor unter: http://localhost:4502/editor.html/content/wknd/us/en/magazine/guide-la-skateparks.html
In Bearbeiten -Modus eine Textkomponente auswählen. Bearbeiten Sie die Komponente, um ein Anführungszeichenelement einzuschließen:
Wählen Sie die Textkomponente aus und klicken Sie auf die Pinsel und wählen Sie das Anführungsblock style:
Verwenden Sie die Entwicklertools des Browsers, um das Markup zu überprüfen. Sie sollten den Klassennamen sehen cmp-text--quote
wurde zum äußeren Div der Komponente hinzugefügt:
<!-- Quote Block style class added -->
<div class="text cmp-text--quote">
<div data-cmp-data-layer="{"text-60910f4b8d":{"@type":"wknd/components/text","repo:modifyDate":"2022-02-24T00:55:26Z","xdm:text":"<blockquote>&nbsp; &nbsp; &nbsp;&quot;There is no better place to shred then Los Angeles&quot;</blockquote>\r\n<p>- Jacob Wester, Pro Skater</p>\r\n"}}" id="text-60910f4b8d" class="cmp-text">
<blockquote> "There is no better place to shred then Los Angeles"</blockquote>
<p>- Jacob Wester, Pro Skater</p>
</div>
</div>
Als Nächstes implementieren wir den Stil des Anführungszeichens mit der ui.frontend -Modul des AEM.
Wenn sie noch nicht ausgeführt wird, starten Sie die watch
-Prozess innerhalb von ui.frontend -Modul:
$ npm run watch
Datei aktualisieren text.scss
von: ui.frontend/src/main/webpack/components/_text.scss
:
/* Default text style */
.cmp-text {}
.cmp-text__paragraph {}
/* WKND Text Quote style */
.cmp-text--quote {
.cmp-text {
background-color: $brand-third;
margin: 1em 0em;
padding: 1em;
blockquote {
border: none;
font-size: $font-size-large;
font-family: $font-family-serif;
padding: 14px 14px;
margin: 0;
margin-bottom: 0.5em;
&:after {
border-bottom: 2px solid $brand-primary; /*yellow border */
content: '';
display: block;
position: relative;
top: 0.25em;
width: 80px;
}
}
p {
font-family: $font-family-serif;
}
}
}
In diesem Fall werden Roh-HTML-Elemente von den Stilen angesprochen. Dies liegt daran, dass die Textkomponente einen Rich-Text-Editor für Inhaltsautoren bereitstellt. Die Erstellung von Stilen direkt mit RTE-Inhalten sollte mit Vorsicht erfolgen, und es ist umso wichtiger, die Stile genauer zu definieren.
Kehren Sie erneut zum Browser zurück und Sie sollten sehen, dass der Stil des Anführungsblocks hinzugefügt wurde:
Beenden Sie den Webpack Development Server.
Container-Komponenten wurden verwendet, um die grundlegende Struktur der Artikelseitenvorlage zu erstellen und die Ablageflächen bereitzustellen, damit Inhaltsautoren Inhalte auf einer Seite hinzufügen können. Container können auch das Stilsystem verwenden und Autoren von Inhalten noch mehr Optionen zum Entwerfen von Layouts bieten.
Die Hauptbehälter der Vorlage "Artikelseite"enthält die beiden Container, die Authoring-fähig sind, und hat eine feste Breite.
Hauptbehälter in der Artikelseitenvorlage.
Die Politik der Hauptbehälter setzt das Standardelement auf main
:
Die CSS, die die Hauptbehälter festgelegt ist, wird in ui.frontend -Modul an ui.frontend/src/main/webpack/site/styles/container_main.scss
:
main.container {
padding: .5em 1em;
max-width: $max-content-width;
float: unset!important;
margin: 0 auto!important;
clear: both!important;
}
Anstatt die main
HTML-Element verwenden, kann das Stilsystem zum Erstellen eines Feste Breite -Stil als Teil der Container-Richtlinie. Das Stilsystem bietet Benutzern die Möglichkeit, zwischen Feste Breite und Fließbreite Container.
Herzlichen Glückwunsch! Die Artikelseite ist fast formatiert und Sie haben praktische Erfahrungen mit dem AEM Stilsystem gesammelt.
Lernen Sie die End-to-End-Schritte zum Erstellen einer benutzerdefinierte AEM , der Inhalte anzeigt, die in einem Dialogfeld erstellt wurden, und die Entwicklung eines Sling-Modells untersucht, um die Geschäftslogik einzukapseln, die die HTL der Komponente füllt.
Anzeigen des fertigen Codes unter GitHub oder den Code lokal in der Git-Verzweigung überprüfen und bereitstellen tutorial/style-system-solution
.
tutorial/style-system-solution
-Verzweigung.