Entwickeln mit dem Stilsystem developing-with-the-style-system

Erfahren Sie, wie Sie einzelne Stile implementieren und Kernkomponenten mithilfe des Stilsystems von Experience Manager wiederverwenden. In diesem Tutorial werden Entwicklungsschritte für das Stilsystem beschrieben, mit denen Kernkomponenten mit markenspezifischem CSS und erweiterten Richtlinienkonfigurationen des Vorlageneditors erweitert werden.

Voraussetzungen prerequisites

Vergegenwärtigen Sie sich die erforderlichen Tools und Anweisungen zum Einrichten einer lokalen Entwicklungsumgebung.

Außerdem wird empfohlen, das Tutorial Client-seitige Bibliotheken und Frontend-Workflow zu lesen, um die Grundlagen der Client-seitigen Bibliotheken und der verschiedenen in das AEM-Projekt integrierten Frontend-Tools zu verstehen.

Ausgangsprojekt

Checken Sie den Basis-Code aus, auf dem das Tutorial aufbaut:

Sie können den fertigen Code jederzeit auf GitHub ansehen oder den Code lokal herunterladen, indem Sie zu der Verzweigung tutorial/style-system-solution wechseln.

Ziel

Was Sie erstellen werden what-build

Dieses Kapitel verwendet die Funktion Stilsystem, um Variationen der Komponenten Titel und Text zu erstellen, die auf der Artikelseite verwendet werden.

Der für die Titelkomponente verfügbare Unterstreichungsstil

Hintergrund background

Das Stilsystem ermöglicht es Entwickelnden und Vorlagen-Editierenden, mehrere visuelle Varianten einer Komponente zu erstellen. Autorinnen und Autoren können dann ihrerseits entscheiden, welchen Stil sie beim Verfassen einer Seite verwenden möchten. Das Stilsystem wird im weiteren Verlauf des Tutorials verwendet, um verschiedene einzigartige Stile zu erzielen und dabei in einem Low-Code-Ansatz Kernkomponenten zu verwenden.

Der Grundgedanke des Stilsystems ist, dass Autorinnen und Autoren verschiedene Stile für das Aussehen einer Komponente auswählen können. Die „Stile“ werden durch zusätzliche CSS-Klassen unterstützt, die in das äußere div-Element einer Komponente eingeführt werden. In den Client-Bibliotheken werden CSS-Regeln auf der Grundlage dieser Stilklassen hinzugefügt, damit die Komponente ihr Erscheinungsbild ändert.

Eine ausführliche Dokumentation zu Stilsystemen finden Sie hier. Es gibt auch ein interessantes technisches Video zum Verständnis des Stilsystems.

Unterstreichungsstil – Titel underline-style

Die Titelkomponente wurde unter /apps/wknd/components/title als Teil des ui.apps-Moduls in das Projekt integriert. Die Standardstile der Überschriftenelemente (H1, H2, H3…) wurden bereits im Modul ui.frontend implementiert.

Die WKND-Artikelentwürfe enthalten einen einzigartigen Stil für die Titelkomponente mit einer Unterstreichung. Anstatt zwei Komponenten zu erstellen oder das Komponentendialogfeld zu ändern, kann das Stilsystem verwendet werden, um Autorinnen und Autoren die Möglichkeit zu geben, einen Unterstreichungsstil hinzuzufügen.

Hinzufügen einer Titelrichtlinie

Im Folgenden fügen wir eine Richtlinie für die Titelkomponenten hinzu, damit die Autorinnen und Autoren von Inhalten den Stil „Unterstreichen“ auswählen und auf bestimmte Komponenten anwenden können. Dies geschieht mit dem Vorlageneditor in AEM.

Anwenden des Unterstrichstils

Als Verfassende können wir den Unterstreichungsstil auf bestimmte Titelkomponenten anwenden.

Implementierung des Unterstrichstils – ui.frontend

Als nächstes implementieren Sie den Unterstrichstil mit dem Modul ui.frontend des AEM-Projekts. Der Webpack-Entwicklungs-Server, der mit dem Modul ui.frontend gebündelt ist, wird verwendet, um eine Vorschau der Stile vor der Bereitstellung in einer lokalen Instanz von AEM anzuzeigen.

Zitatblock-Stil – Text text-component

Als nächstes wiederholen Sie ähnliche Schritte, um für die Textkomponente einen eigenen Stil anzuwenden. Die Textkomponente wurde unter /apps/wknd/components/text als Teil des ui.apps-Moduls in das Projekt eingefügt. Die Standardstile für Absatzelemente wurden bereits in ui.frontend implementiert.

Die WKND Artikelentwürfe enthalten einen eindeutigen Stil für die Textkomponente mit einem Zitatblock:

Hinzufügen einer Textrichtlinie

Fügen Sie nun eine Richtlinie für die Textkomponenten hinzu.

Anwenden des Zitatblock-Stils

Implementieren des Zitatblock-Stils – ui.frontend

Als Nächstes implementieren wir den Zitatblock-Stil mit dem ui.frontend-Modul des AEM-Projekts.

Feste Breite – Container (Bonus) layout-container

Container-Komponenten wurden verwendet, um die grundlegende Struktur der Artikelseitenvorlage zu erstellen und die Ablageflächen bereitzustellen, damit Inhaltsautorinnen und -autoren Inhalte auf einer Seite hinzufügen können. Container können auch das Stilsystem verwenden und Autorinnen und Autoren von Inhalten noch mehr Optionen zum Entwerfen von Layouts bieten.

Der Haupt-Container der Vorlage für die Artikelseite enthält die beiden bearbeitbare Container und hat eine feste Breite.

Haupt-Container in der Artikelseitenvorlage.

Die Richtlinie des Haupt-Containers setzt das Standardelement auf main:

Das CSS, das den Haupt-Container fixiert, wird im ui.frontend-Modul in ui.frontend/src/main/webpack/site/styles/container_main.scss eingestellt:

main.container {
    padding: .5em 1em;
    max-width: $max-content-width;
    float: unset!important;
    margin: 0 auto!important;
    clear: both!important;
}

Anstatt auf das main HTML-Element abzuzielen, könnte das Stilsystem verwendet werden, um einen Stil Feste Breite als Teil der Container-Richtlinie zu erstellen. Das Stilsystem könnte den Benutzenden die Möglichkeit geben, zwischen Fester Breite und Fließender Breite umzuschalten.

Herzlichen Glückwunsch! congratulations

Herzlichen Glückwunsch! Die Artikelseite ist fast fertig formatiert und Sie haben praktische Erfahrungen mit dem AEM-Stilsystem gesammelt.

Nächste Schritte next-steps

Lernen Sie die gesamten Schritte zur Erstellung einer benutzerdefinierten AEM-Komponente kennen, die in einem Dialog verfasste Inhalte anzeigt, und lernen Sie die Entwicklung eines Sling-Modells kennen, um die Geschäftslogik einzukapseln, die die HTL der Komponente füllt.

Sehen Sie sich den fertigen Code auf GitHub an oder überprüfen Sie den Code und stellen Sie ihn lokal auf der Git-Verzweigung tutorial/style-system-solution bereit.