Site-Designs

Erfahren Sie, wie Sie AEM-Site-Designs verwenden, um den Stil und das Design Ihrer Site anzupassen.

Überblick

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

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

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-Designs
• src/site: JS- und CSS-Dateien, die für die gesamte Site gelten
• src/components: JS- und CSS-Dateien, die für AEM-Komponenten spezifisch sind
• src/resources: Statische Dateien wie Symbole, Logos und Schriftarten

Standard-Site-Design

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

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.