Erfahren Sie, wie Sie AEM-Site-Designs verwenden, um den Stil und das Design Ihrer Site anzupassen.
Ein AEM-Site-Design ist ein Paket, das die CSS-, JavaScript- und statischen Ressourcen enthält, die das Aussehen Ihrer AEM-Site definieren und die Struktur eines AEM-Site-Designs einhalten.
Sites, die mit AEM-Site-Vorlagen erstellt wurden, ermöglichen den einfachen Download, die Anpassung und die Neu-Bereitstellung von Designs.
AEM-Site-Designs sollten nicht mit AEM-Site-Vorlagen verwechselt werden. AEM-Site-Designs enthalten nur die Stil-Informationen für eine AEM-Site. AEM-Site-Vorlagen definieren die Site-Struktur und den anfänglichen Inhalt und beinhalten ein AEM-Site-Design, um die schnelle Erstellung von Sites zu ermöglichen.
Site-Designs werden auf zwei verschiedene Arten verwendet:
Eine vollständige Beschreibung des Prozesses zum Erstellen einer Site aus einer Vorlage und zum Anpassen ihres Designs finden Sie in der Tour zur schnellen Site-Erstellung.
Site-Designs sind einfach Pakete mit einer logischen Struktur, die den Zweck des Paketinhalts klar widerspiegelt. Ein Site-Design weist die folgende Struktur auf, die für ein Frontend-Projekt typisch ist.
src/main.ts
: Der Haupteinstiegspunkt Ihres JS- und CSS-Designssrc/site
: JS- und CSS-Dateien, die für die gesamte Site geltensrc/components
: JS- und CSS-Dateien, die für AEM-Komponenten spezifisch sindsrc/resources
: Statische Dateien wie Symbole, Logos und SchriftartenAdobe bietet ein Referenz-Design basierend auf Best Practices, das Sie als Grundlage für das Erstellen eines eigenen Designs verwenden können. Das Standard-Site-Design ist auf GitHub verfügbar.
Adobe bietet einen AEM-Site-Design-Assistenten als Satz von Skripten zum Erstellen neuer Site-Designs.
Der AEM-Site-Design-Assistent ist zusammen mit der Nutzungsdokumentation auf GitHub verfügbar. Um das Design anpassen zu können, ist Erfahrung in der Frontend-Entwicklung erforderlich.