Site-Designs site-themes
Erfahren Sie, wie Sie AEM-Site-Designs verwenden, um den Stil und das Design Ihrer Site anzupassen.
Überblick overview
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.
Verwenden von Site-Designs using-themes
Site-Designs werden auf zwei verschiedene Arten verwendet:
- Sie werden als Teil einer Site-Vorlage verwendet, um beim Erstellen einer Site den Stil zu bestimmen.
- Sie werden heruntergeladen, nachdem eine Site basierend auf einer Site-Vorlage erstellt wurde, sodass ein Frontend-Entwickler den Stil weiter anpassen kann.
Struktur von Site-Designs structure
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 Schriftarten
Standard-Site-Design standard-site-theme
Adobe 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.
Entwickeln von Site-Designs developing-themes
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.