Anpassen des Site-Designs

Erfahren Sie, wie das Site-Design erstellt wird, wie Sie es anpassen und wie Sie es mit AEM-Live-Inhalten testen können.

Die bisherige Entwicklung

Im vorherigen Dokument der Tour zu AEM Quick Site Creation, Abrufen von Git-Repository-Zugriffsinformationen, haben Sie gelernt, wie Frontend-Entwickler Cloud Manager benutzen, um auf Git-Repository-Informationen zuzugreifen. Sie sollten jetzt zu Folgendem in der Lage sein:

• Erfahren Sie ganz allgemein, was Cloud Manager ist.
• Rufen Sie Ihre Anmeldeinformationen ab, um auf AEM-Git zuzugreifen, damit Sie Ihre Anpassungen übernehmen können.

Dieser Teil der Tour geht einen Schritt weiter und konzentriert sich auf das Site-Design und zeigt Ihnen, wie Sie dieses anpassen und diese Anpassungen dann mit den von Ihnen abgerufenen Zugriffsdaten bestätigen.

Ziel

In diesem Dokument wird erläutert, wie das AEM-Site-Design erstellt wird, wie es angepasst wird und wie es mit AEM-Live-Inhalten getestet wird. Nach dem Lesen sollten Sie:

• Die grundlegende Struktur des Site-Designs und dessen Bearbeitung verstehen.
• Verstehen, wie Sie Ihre Design-Anpassungen mit echten AEM-Inhalten über einen lokalen Proxy testen können.
• Wissen, wie Sie Ihre Änderungen in das AEM Git-Repository übertragen.

Verantwortliche Rolle

Dieser Teil der Journey gilt für Front-End-Entwickler.

Die Grundlagen der Design-Struktur verstehen

Extrahieren Sie das vom AEM-Administrator bereitgestellte Design an die Stelle, an der Sie das Design bearbeiten möchten, und öffnen Sie Ihren bevorzugten Editor.

Sie sehen, dass das Design ein typisches Frontend-Projekt ist. Die wichtigsten Teile der Struktur sind:

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

Sobald Sie sich mit der Struktur des Design-Projekts vertraut gemacht haben, starten Sie den lokalen Proxy, damit Sie alle Design-Anpassungen basierend auf dem tatsächlichen AEM-Inhalt in Echtzeit sehen können.

Starten des lokalen Proxys

1. Navigieren Sie in der Befehlszeile zum Stammverzeichnis des Designs auf Ihrem lokalen Computer.

2. Führen Sie npm install aus. npm ruft die Abhängigkeiten ab und installiert das Projekt.

   

3. Führen Sie npm run live aus. Der Proxy-Server wird gestartet.

   

4. Wenn der Proxy-Server gestartet wird, wird automatisch ein Browser mit http://localhost:7001/ geöffnet. Tippen oder klicken Sie auf LOKAL ANMELDEN (NUR ADMINISTRATORAUFGABEN) und melden Sie sich mit den vom AEM-Administrator für Sie bereitgestellten Anmeldeinformationen des Proxy-Benutzers an.

   

   TIPP

   Wenn Sie diese Anmeldeinformationen nicht haben, wenden Sie sich an Ihren Admin und verweisen Sie auf den Abschnitt „Proxy-Benutzer einrichten“ des Artikels „Site aus Vorlage erstellen“ in dieser Journey.

5. Ändern Sie nach der Anmeldung die URL im Browser dahingehend, dass sie auf den Pfad zu den Beispielinhalten verweist, den der AEM-Administrator für Sie bereitgestellt hat.

   • Wenn der angegebene Pfad z. B. /content/<your-site>/en/home.html?wcmmode=disabled war
   • Würden Sie die URL zu http://localhost:7001/content/<your-site>/en/home.html?wcmmode=disabled ändern

   

Sie können auf der Site navigieren, um die Inhalte zu erkunden. Die Site wird live von der AEM-Live-Instanz abgerufen, damit Sie Ihre Design-Anpassungen an echten Inhalten vornehmen können.

Anpassen des Designs

Jetzt können Sie mit der Anpassung des Designs beginnen. Im Folgenden finden Sie ein einfaches Beispiel, um zu veranschaulichen, wie Sie Ihre Änderungen live über den Proxy anzeigen können.

1. Öffnen Sie die Datei <your-theme-sources>/src/site/_variables.scss in Ihrem Editor

   

2. Bearbeiten Sie die Variable $color-background und legen Sie einen anderen Wert außer Weiß fest. In diesem Beispiel wird orange verwendet.

   

3. Wenn Sie die Datei speichern, sehen Sie, dass der Proxy-Server die Änderung über die Zeile [Browsersync] File event [change] erkennt.

   

4. Wenn Sie zum Browser des Proxy-Servers zurückkehren, ist die Änderung sofort sichtbar.

   

Sie können das Design weiterhin an die Anforderungen anpassen, die Sie vom AEM-Administrator erhalten haben.

Bestätigen der Änderungen

Sobald Ihre Anpassungen abgeschlossen sind, können Sie diese im AEM-Git-Repository bestätigen. Zuerst müssen Sie das Repository auf Ihren lokalen Computer klonen.

1. Navigieren Sie über die Befehlszeile an die Stelle, an der Sie das Repository klonen möchten.

2. Führen Sie den Befehl aus, den Sie zuvor aus Cloud Manager abgerufen haben. Dieser sollte ähnlich wie git clone https://git.cloudmanager.adobe.com/<my-org>/<my-program>/ sein. Verwenden Sie den Git-Benutzernamen und das Passwort, das Sie im vorherigen Teil dieser Tour abgerufen haben.

   

3. Verschieben Sie das Design-Projekt, das Sie bearbeitet haben, mit einem Befehl, der mv <site-theme-sources> <cloned-repo> ähnelt, in das geklonte Repository.

4. Im Verzeichnis des geklonten Repository bestätigen Sie mit den folgenden Befehlen die Design-Dateien, die Sie gerade hierhin verschoben haben.

   git add .
   git commit -m "Adding theme sources"
   git push
   

5. Die Anpassungen werden an das AEM-Git-Repository gepusht.

   

Ihre Anpassungen werden jetzt sicher im AEM-Git-Repository gespeichert.

Wie geht es weiter

Nachdem Sie nun diesen Teil der AEM-Journey zur schnellen Site-Erstellung abgeschlossen haben, sollten Sie:

• Die grundlegende Struktur des Site-Designs und dessen Bearbeitung verstehen.
• Verstehen, wie Sie Ihre Design-Anpassungen mit echten AEM-Inhalten über einen lokalen Proxy testen können.
• Wissen, wie Sie Ihre Änderungen in das AEM Git-Repository übertragen.

Bauem Sie auf diesem Wissen auf und fahren Sie mit der Tour zur AEM Quick Site Creation fort, indem Sie das Dokument Bereitstellen Ihres benutzerdefinierten Designs noch einmal durchgehen, in dem Sie erfahren, wie Sie das Design mithilfe der Frontend-Pipeline bereitstellen.

Zusätzliche Ressourcen

Es wird empfohlen, zum nächsten Teil der Tour zu Quick Site Creation voranzuschreiten, indem Sie das Dokument Bereitstellen Ihres benutzerdefinierten Designs lesen. Allerdings finden Sie im Folgenden einige zusätzliche optionale Ressourcen, die einige in diesem Dokument erwähnte Konzepte vertiefen. Aber sie sind nicht erforderlich, um mit der Tour fortzufahren.

• AEM-Site-Design - Dies ist das GitHub-Repository des AEM-Site-Designs.
• npm - AEM-Designs, die zum schnellen Erstellen von Sites verwendet werden, die auf nmp basieren.
• webpack: AEM-Designs, die zum schnellen Erstellen von Sites verwendet werden, verwenden webpack.

Ressourcen für Business.Adobe.com