Arbeitsablauf beim Erstellen von Themen

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

Dies ist ein mehrteiliges Tutorial, und es wird davon ausgegangen, dass die im Kapitel Seitenvorlagen beschriebenen Schritte abgeschlossen sind.

Ziele

  1. Erfahren Sie, wie die Themenquellen für eine Seite heruntergeladen und geändert werden können.
  2. Erfahren Sie, wie Sie Code mit der Live-Site vergleichen, um eine Echtzeitvorschau zu erhalten.
  3. 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

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:

  1. Erstellen Sie einen lokalen Benutzer in AEM zur Verwendung mit einem Proxy-Entwicklungs-Server.
  2. Laden Sie die Themenquellen von AEM herunter und öffnen Sie sie mit einer lokalen IDE, wie VSCode.
  3. Ändern Sie die Themenquellen und verwenden Sie einen Proxy-Dev-Server, um CSS- und JavaScript-Änderungen in Echtzeit in der Vorschau anzuzeigen.
  4. 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

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:

  1. Erstellen Sie ein neues Git-Repository in Cloud Manager

  2. Fügen Sie Ihr Themenquellen-Projekt zum Cloud Manager-Git-Repository hinzu:

    $ 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>

  3. Konfigurieren Sie eine Frontend-Pipeline in Cloud Manager, um den Frontend-Code bereitzustellen.

  4. 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:

Herzlichen Glückwunsch!

Herzlichen Glückwunsch, Sie haben gerade ein Thema aktualisiert und für AEM bereitgestellt!

Nächste Schritte

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.

Auf dieser Seite