Designarbeitsablauf

VORSICHT

Das Tool für die schnelle Site-Erstellung ist derzeit eine technische Vorschau. Sie wird zu Test- und Evaluierungszwecken bereitgestellt und ist nicht zur Verwendung in der Produktion bestimmt, es sei denn, sie wurde mit der Adobe Support vereinbart.

In diesem Kapitel werden wir die Themenquellen einer Adobe Experience Manager-Site aktualisieren, um markenspezifische Stile anzuwenden. Wir erfahren, wie Sie mit einem Proxy-Server eine Vorschau von CSS- und JavaScript-Aktualisierungen anzeigen können, während wir mit der Live-Site kodieren. 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, um Stile zur Marke WKND hinzuzufügen.

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