DokumentationAEM as a Cloud ServiceBenutzerhandbuch

Site-Designs site-themes

Last update: Tue Sep 10 2024 00:00:00 GMT+0000 (Coordinated Universal Time)

Erstellt für:

  • Admin

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

Übersicht 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.

NOTE
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.

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.
TIP
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.

Struktur von Site-Designs structure

Site-Designs sind einfach Pakete mit einer logischen Struktur, die den Zweck des Paketinhalts klar widerspiegelt. Für ein typisches Frontend-Projekt empfiehlt Adobe die folgende Struktur für ein Site-Design:

  • src/theme.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

Abhängig von den spezifischen Projektanforderungen kann Ihre Designstruktur variieren, solange der Haupteinstiegspunkt src/theme.ts beibehalten wird.

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.

recommendation-more-help
fbcff2a9-b6fe-4574-b04a-21e75df764ab