Erfahren Sie, wie das Site-Design erstellt wird, wie Sie es anpassen und wie Sie es mit AEM-Live-Inhalten testen können.
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:
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.
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:
Dieser Teil der Journey gilt für Front-End-Entwickler.
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-Designssrc/site
: JS- und CSS-Dateien, die für die gesamte Site geltensrc/components
: JS- und CSS-Dateien, die für AEM-Komponenten spezifisch sindsrc/resources
: Statische Dateien wie Symbole, Logos und SchriftartenWeitere Informationen zum standardmäßigen AEM-Site-Design finden Sie unter dem GitHub-Link im Abschnitt Zusätzliche Ressourcen am Ende dieses Dokuments.
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.
Navigieren Sie in der Befehlszeile zum Stammverzeichnis des Designs auf Ihrem lokalen Computer.
Führen Sie npm install
aus. npm ruft die Abhängigkeiten ab und installiert das Projekt.
Führen Sie npm run live
aus. Der Proxy-Server wird gestartet.
Wenn der Proxy-Server gestartet wird, wird automatisch ein Browser mit http://localhost:7001/
geöffnet. Auswählen LOKAL ANMELDEN (NUR ADMINISTRATORAUFGABEN) und melden Sie sich mit den vom AEM Administrator angegebenen Anmeldeinformationen des Proxybenutzers an.
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.
Ä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.
/content/<your-site>/en/home.html?wcmmode=disabled
warhttp://localhost:7001/content/<your-site>/en/home.html?wcmmode=disabled
ändernSie 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.
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.
Öffnen Sie die Datei <your-theme-sources>/src/site/_variables.scss
in Ihrem Editor
Bearbeiten Sie die Variable $color-background
und legen Sie einen anderen Wert außer Weiß fest. In diesem Beispiel wird orange
verwendet.
Wenn Sie die Datei speichern, sehen Sie, dass der Proxy-Server die Änderung über die Zeile [Browsersync] File event [change]
erkennt.
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.
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.
Navigieren Sie über die Befehlszeile an die Stelle, an der Sie das Repository klonen möchten.
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.
Verschieben Sie das Design-Projekt, das Sie bearbeitet haben, mit einem Befehl, der mv <site-theme-sources> <cloned-repo>
ähnelt, in das geklonte Repository.
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
Die Anpassungen werden an das AEM-Git-Repository gepusht.
Ihre Anpassungen werden jetzt sicher im AEM-Git-Repository gespeichert.
Nachdem Sie nun diesen Teil der AEM-Journey zur schnellen Site-Erstellung abgeschlossen haben, sollten Sie:
Machen Sie sich mit diesem Wissen vertraut und fahren Sie mit der Journey zur AEM SchnellSite-Erstellung fort, indem Sie das Dokument erneut überprüfen. Bereitstellen Ihres benutzerdefinierten Designs, Hier erfahren Sie, wie Sie das Design mithilfe der Frontend-Pipeline bereitstellen.
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.