Designarbeitsablauf

In diesem Kapitel aktualisieren wir die Themenquellen einer Adobe Experience Manager-Site, um markenspezifische Stile anzuwenden. Wir erfahren, wie Sie einen Proxy-Server verwenden, um eine Vorschau von CSS- und JavaScript-Aktualisierungen anzuzeigen, während wir Code für die Live-Site verwenden. In diesem Tutorial wird auch beschrieben, wie Sie Designaktualisierungen mithilfe der Frontend-Pipeline von Adobe Cloud Manager auf einer AEM Site bereitstellen.

Am Ende wird unsere Site aktualisiert und enthält Stile, die mit der WKND-Marke übereinstimmen.

Voraussetzungen

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

Ziele

  1. Erfahren Sie, wie die Themenquellen für eine Site 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 Designs mithilfe der Frontend-Pipeline von Adobe Cloud Manager vertraut.

Aktualisieren eines Designs

Nehmen Sie als Nächstes Änderungen an den Themenquellen vor, damit die Site 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-Entwicklungsserver.
  2. Laden Sie die Designquellen von AEM herunter und öffnen Sie sie mit einer lokalen IDE, wie VSCode.
  3. Ändern Sie die Designquellen 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 und -mockups der WKND übereinstimmt.

Lösungsdateien

Herunterladen der fertigen Stile für die WKND-Beispieldesign

Bereitstellen eines Designs mithilfe einer Frontend-Pipeline

Stellen Sie mithilfe der Frontend-Pipeline von Cloud Manager Updates für ein Design in einer AEM Umgebung bereit.

Allgemeine Schritte für das Video:

  1. Neues Git erstellen Repository in Cloud Manager

  2. Fügen Sie Ihr Design-Quellen-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 Front-End-Pipeline in Cloud Manager , um den Frontend-Code bereitzustellen.

  4. Führen Sie die Front-End-Pipeline aus, um Aktualisierungen für die Ziel-AEM-Umgebung bereitzustellen.

Beispielberichte

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 AEM bereitgestellt!

Nächste Schritte

Machen Sie sich mit der AEM-Entwicklung vertraut und verstehen Sie mehr über die zugrunde liegende Technologie, indem Sie mithilfe der AEM Projektarchetyp.

Auf dieser Seite