Erste-Schritte-Handbuch für Entwickelnde zum WYSIWYG-Authoring mit Edge Delivery Services edge-dev-getting-started
In diesem Handbuch erfahren Sie, wie Sie mit einer neuen Adobe Experience Manager-Site arbeiten, die Edge Delivery Services und den universellen Editor für die WYSIWYG-Inhaltserstellung verwendet.
Voraussetzungen prerequisites
Bevor Sie mit diesem Handbuch beginnen, sollten Sie bereits mit den Grundlagen der Edge Delivery Services vertraut sein und Zugriff auf diese haben. Hierzu zählt u. a. Folgendes:
- Sie haben das Edge Delivery Services-Tutorial abgeschlossen.
- Sie haben Zugriff auf eine AEM Cloud Service-Sandbox.
- Sie haben den universellen Editor in derselben Sandbox-Umgebung aktiviert.
Grundlegende Konzepte bei der Entwicklung für Edge Delivery Services core-concepts
Edge Delivery Services basiert auf dem Bausteinkonzept. AEM verfügt über eine umfassende Bibliothek vordefinierter Bausteine, die entsprechend Ihren Projektanforderungen erweitert werden können. Der Code für Edge Delivery Services-Projekte wird in GitHub verwaltet.
Bausteine blocks
Bausteine sind der grundlegendste Teil einer Seite, die von Edge Delivery Services bereitgestellt wird. Ein Baustein kapselt Stile und den Code, der eine logische Komponente einer Inhaltsseite steuert.
AEM stellt Standardbausteine als Teil des Produkts in der Projektvorlage bereit. Zu diesen Bausteinen gehören Überschrift, Text, Bilder, Links, Listen usw.
Edge Delivery Services und GitHub github-edge
Edge Delivery nutzt GitHub, damit Sie Code direkt über ihr GitHub-Repository verwalten und bereitstellen können.
Ihre Autorinnen und Autoren können mit dem universellen Editor Inhalte entweder mit dokumentbasiertem Authoring oder mit Inhalten in AEM erstellen. Entwicklerinnen und Entwickler können die Funktionalität Ihrer Site anpassen, indem sie CSS und JavaScript in GitHub verwenden, unabhängig davon, wie die Autorinnen und Autoren ihre Inhalte erstellen.
Websites werden automatisch für jede Ihrer Verzweigungen erstellt, von der Inhaltsvorschau bis zur Produktion. Jede Ressource, die Sie in Ihr GitHub-Repository einfügen, steht auf Ihrer Website ohne Erstellungsprozess zur Verfügung.
Erste Schritte mit WYSIWYG-Authoring und Edge Delivery Services getting-started
Sobald Sie die Voraussetzungen erfüllt und sich für die Verwendung des universellen Editors entschieden haben, können Sie mit Ihrem eigenen Projekt beginnen.
Erstellen Ihres GitHub-Projekts create-github-project
Zunächst müssen Sie ein neues Projekt auf GitHub erstellen, das auf der Adobe-Vorlage basiert.
-
Navigieren Sie zu
https://github.com/adobe-rnd/aem-boilerplate-xwalk, klicken Sie auf Diese Vorlage verwenden und wählen Sie Neues Repository erstellen.- Sie müssen bei GitHub angemeldet sein, um diese Option sehen zu können.
-
Das Repository wird Ihnen standardmäßig zugewiesen. Ändern Sie dies bei Bedarf, geben Sie einen Repository-Namen und eine Beschreibung ein und klicken Sie auf Repository erstellen.
-
Navigieren Sie auf einer neuen Registerkarte im selben Browser zu
https://github.com/apps/aem-code-syncund klicken Sie auf Konfigurieren.
-
Klicken Sie auf Konfigurieren für die Organisation, in der Sie Ihr neues Repository im vorherigen Schritt erstellt haben.
-
Wählen Sie auf der GitHub-Seite zur AEM-Code-Synchronisierung unter Repository-Zugriff die Option Nur Repositorys auswählen, wählen Sie das Repository aus, das Sie im vorherigen Schritt erstellt haben, und klicken Sie dann auf Speichern.
-
Nachdem die AEM-Code-Synchronisierung installiert wurde, erhalten Sie einen Bestätigungsbildschirm. Kehren Sie zur Browser-Registerkarte Ihres neuen Repositorys zurück.
-
Klicken Sie auf die Datei
fstab.yaml, um sie zu öffnen, und dann auf das Symbol Diese Datei bearbeiten, um sie zu bearbeiten.
-
Bearbeiten Sie die Datei
fstab.yaml, um den Bereitstellungspunkt Ihres Projekts zu aktualisieren. Ersetzen Sie die standardmäßige Google Docs-URL durch die URL Ihrer AEM as a Cloud Service-Authoring-Instanz und klicken Sie auf Änderungen übergeben….https://<aem-author>/bin/franklin.delivery/<owner>/<repository>/main- Durch Änderung des Bereitstellungspunkts werden die Edge Delivery Services darüber informiert, wo der Inhalt der Site gefunden werden soll.
-
Fügen Sie nach Bedarf eine Commit-Nachricht hinzu und klicken Sie auf Änderungen übergeben, wodurch sie direkt an die
main-Verzweigung übergeben werden.
-
Kehren Sie zum Stammverzeichnis Ihres Repositorys zurück und klicken Sie auf
paths.jsonund dann auf das Symbol Diese Datei bearbeiten.
-
Die Standardzuordnung verwendet den Namen des Repositorys. Aktualisieren Sie die Standardzuordnung entsprechend den Anforderungen für Ihr Projekt mit
/content/<site-name>/:/und klicken Sie auf Änderungen übergeben….- Stellen Sie Ihren eigenen
<site-name>bereit. Sie werden ihn in einem späteren Schritt benötigen. - Die Zuordnungen teilen Edge Delivery Services mit, wie der Inhalt in Ihrem AEM Repository der Site-URL zugeordnet werden soll.
- Stellen Sie Ihren eigenen
-
Fügen Sie nach Bedarf eine Commit-Nachricht hinzu und klicken Sie auf Änderungen übergeben, wodurch sie direkt an die
main-Verzweigung übergeben werden.
Erstellen und Bearbeiten einer neuen AEM-Site create-aem-site
Nachdem Sie nun über ein GitHub-Projekt verfügen, müssen Sie eine neue AEM-Site erstellen, die vom Projekt verwendet werden kann.
-
Laden Sie die neueste Site-Vorlage für das WYSIWYG-Authoring mit Edge Delivery Services von GitHub unter
https://github.com/adobe-rnd/aem-boilerplate-xwalk/releasesherunter. -
Melden Sie sich bei Ihrer AEM as a Cloud Service-Authoring-Instanz an, navigieren Sie zur Sites-Konsole und tippen oder klicken Sie auf Erstellen > Site aus Vorlage.
-
Klicken Sie auf der Registerkarte Site-Vorlage auswählen des Assistenten zum Erstellen von Sites auf die Schaltfläche Importieren, um eine neue Vorlage zu importieren.
-
Laden Sie die von GitHub heruntergeladene Site-Vorlage für das WYSIWYG-Authoring mit Edge Delivery Services hoch.
- Die Vorlage darf nur einmal hochgeladen werden. Nach dem Hochladen kann sie wiederverwendet werden, um zusätzliche Sites zu erstellen.
-
Nach dem Import wird die Vorlage im Assistenten angezeigt. Tippen oder klicken Sie, um sie auszuwählen, und tippen oder klicken Sie dann auf Weiter.
-
Füllen Sie die folgenden Felder aus und tippen oder klicken Sie auf Erstellen.
- Site-Titel: Fügen Sie einen beschreibenden Titel für die Site hinzu.
- Site-Name: Verwenden Sie den
<site-name>, den Sie im vorherigen Schritt definiert haben. - GitHub-URL: Verwenden Sie die URL des GitHub-Projekts, das Sie im vorherigen Schritt erstellt haben.
-
AEM bestätigt die Site-Erstellung mit einem Dialogfeld. Tippen oder klicken Sie zum Quittieren auf OK.
-
Navigieren Sie in der Sites-Konsole zur Datei
index.htmlder neu erstellten Site und tippen oder klicken Sie in der Symbolleiste auf Bearbeiten.
-
Der universelle Editor wird auf einer neuen Registerkarte geöffnet. Ggf. müssen Sie zur Authentifizierung auf Anmelden mit Adobe tippen oder klicken, um Ihre Seite bearbeiten zu können.
Sie können Ihre Site nun mit dem universellen Editor bearbeiten. Weitere Informationen finden Sie in der Dokumentation für den universellen Editor.
Veröffentlichen Ihrer neuen Site publishing
Sobald Sie Ihre neue Site mit dem universellen Editor fertig bearbeitet haben, können Sie Ihre Inhalte veröffentlichen.
-
Wählen Sie in der Sites-Konsole alle Seiten aus, die Sie für Ihre neue Site erstellt haben, und tippen oder klicken Sie in der Symbolleiste auf Quick Publish.
-
Tippen oder klicken Sie im Bestätigungsdialogfeld auf Veröffentlichen, um den Prozess zu starten.
-
Öffnen Sie in demselben Browser eine neue Registerkarte und navigieren Sie zur URL Ihrer neuen Site.
https://main--<repository-name>--<owner>.hlx.page
-
Sehen Sie sich Ihren veröffentlichten Inhalt an.
Nächste Schritte next-steps
Jetzt, da Sie über ein funktionierendes Projekt zum WYSIWYG-Authoring mit Edge Delivery Services verfügen, können Sie Ihre eigenen Blöcke erstellen und gestalten.
Weitere Informationen finden Sie in der Anleitung Erstellen von für den universellen Editor instrumentierten Blöcken.