Arbeitsablauf beim Erstellen von Themen theming
In diesem Kapitel aktualisieren wir die Themenquellen einer Adobe Experience Manager-Site, um markenspezifische Stile anzuwenden. Sie erfahren, wie Sie einen Proxy-Server verwenden, um eine Vorschau von CSS- und JavaScript-Aktualisierungen anzuzeigen, während Sie Code für die Live-Site verwenden. In diesem Tutorial wird auch beschrieben, wie Sie Aktualisierungen von Themen mithilfe der Frontend-Pipeline von Adobe Cloud Manager auf einer AEM-Site bereitstellen.
Am Ende wird unsere Site aktualisiert und enthält nun Stile, die mit der WKND-Marke übereinstimmen.
Voraussetzungen prerequisites
Dies ist ein mehrteiliges Tutorial, und es wird davon ausgegangen, dass die im Kapitel Seitenvorlagen beschriebenen Schritte abgeschlossen sind.
Ziele
- Erfahren Sie, wie die Themenquellen für eine Seite heruntergeladen und geändert werden können.
- Erfahren Sie, wie Sie Code mit der Live-Site vergleichen, um eine Echtzeitvorschau zu erhalten.
- Machen Sie sich mit dem durchgängigen Arbeitsablauf für die Bereitstellung kompilierter CSS- und JavaScript-Aktualisierungen als Teil eines Themas mithilfe der Frontend-Pipeline von Adobe Cloud Manager vertraut.
Aktualisieren eines Themas theme-update
Nehmen Sie als Nächstes Änderungen an den Themenquellen vor, damit die Seite dem Erscheinungsbild der WKND-Marke entspricht.
Allgemeine Schritte für das Video:
- Erstellen Sie einen lokalen Benutzer in AEM zur Verwendung mit einem Proxy-Entwicklungs-Server.
- Laden Sie die Themenquellen von AEM herunter und öffnen Sie sie mit einer lokalen IDE, wie VSCode.
- Ändern Sie die Themenquellen und verwenden Sie einen Proxy-Dev-Server, um CSS- und JavaScript-Änderungen in Echtzeit in der Vorschau anzuzeigen.
- Aktualisieren Sie die Themenquellen so, dass der Zeitschriftenartikel mit den Markenstilen von WKND und den Mockups übereinstimmt.
Lösungsdateien
Herunterladen der fertigen Stile für das WKND-Beispieldesign
Bereitstellen eines Themas mithilfe einer Frontend-Pipeline deploy-theme
Stellen Sie mithilfe der Frontend-Pipeline von Cloud Manager Updates für ein Thema in einer AEM-Umgebung bereit.
Allgemeine Schritte für das Video:
-
Erstellen Sie ein neues Git-Repository in Cloud Manager
-
Fügen Sie Ihr Themenquellen-Projekt zum Cloud Manager-Git-Repository hinzu:
code language-shell $ cd <PATH_TO_THEME_SOURCES_FOLDER> $ git init -b main $ git add . $ git commit -m "initial commit" $ git remote add origin <CLOUD_MANAGER_GIT_REPOSITORY_URL> -
Konfigurieren Sie eine Frontend-Pipeline in Cloud Manager, um den Frontend-Code bereitzustellen.
-
Führen Sie die Frontend-Pipeline aus, um Aktualisierungen für die AEM-Zielumgebung bereitzustellen.
Beispiel-Repos
Es gibt einige Beispiele für GitHub-Repos, die als Referenz verwendet werden können:
- aem-site-template-standard
- aem-site-template-basic-theme-e2e: Wird als Beispiel für „reale“ Projekte verwendet.
Herzlichen Glückwunsch! congratulations
Herzlichen Glückwunsch, Sie haben gerade ein Thema aktualisiert und für AEM bereitgestellt!
Nächste Schritte next-steps
Machen Sie sich noch besser mit der AEM-Entwicklung vertraut und verstehen Sie mehr über die zugrunde liegende Technologie, indem Sie mithilfe des AEM-Projektarchetyps eine Website erstellen.