DokumentationAEM as a Cloud ServiceBenutzerhandbuch

Erste Schritte für Entwickler für WYSIWYG Authoring mit Edge Delivery Services edge-dev-getting-started

Last update: Mon Jul 15 2024 00:00:00 GMT+0000 (Coordinated Universal Time)
  • Themen:

Erstellt für:

  • Admin
  • Entwickler

In diesem Handbuch erfahren Sie, wie Sie mit einer neuen Adobe Experience Manager-Site arbeiten, auf der Edge Delivery Services und der Universal Editor für WYSIWYG-Inhaltserstellung verwendet werden.

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:

Auswählen des geeigneten Editors editor-choice

AEM bietet zwei verschiedene Inhaltseditoren, deren Auswahl von Ihrer Situation abhängig ist.

  • Universeller Editor: Dies sollte die Standardauswahl für neue Sites sein.
  • AEM-Seiteneditor: Dies sollte für eine bestehende AEM Sites-Migration in Edge Delivery Services ausgewählt werden.

Dieses Handbuch konzentriert sich auf AEM-Projekte für Edge Delivery Services, die den universellen Editor verwenden. Im Dokument Verwenden von Edge Delivery Services mit AEM finden Sie weitere Informationen zum Auswählen des richtigen Editors und zur Migration vorhandener AEM Sites in Edge Delivery Services.

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.

TIP
Weitere Einzelheiten zu Bausteinen und zur Entwicklung für Edge Delivery Services finden Sie im Abschnitt Build der Edge Delivery Services-Dokumentation.

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.

TIP
Weitere Einzelheiten zu Bausteinen und zur Entwicklung für Edge Delivery Services finden Sie im Abschnitt Build der Edge Delivery Services-Dokumentation.

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.

  1. 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.

    Kopieren eines Repository-Projekts

  2. 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.

    Erstellen des Repositorys

  3. Navigieren Sie auf einer neuen Registerkarte im selben Browser zu https://github.com/apps/aem-code-sync und klicken Sie auf Konfigurieren.

    Code-Synchronisierung

  4. Klicken Sie auf Konfigurieren für die Organisation, in der Sie Ihr neues Repository im vorherigen Schritt erstellt haben.

    Auswählen der Organisation für die Code-Synchronisierung

  5. 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.

    Gewähren von Zugriff auf die AEM-Code-Synchronisierung

  6. Nachdem die AEM-Code-Synchronisierung installiert wurde, erhalten Sie einen Bestätigungsbildschirm. Kehren Sie zur Browser-Registerkarte Ihres neuen Repositorys zurück.

    Installationsbestätigung zur Code-Synchronisierung

  7. Klicken Sie auf die Datei fstab.yaml, um sie zu öffnen, und dann auf das Symbol Diese Datei bearbeiten, um sie zu bearbeiten.

    fstab.yaml

  8. 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.

    Aktualisieren von fstab

  9. Fügen Sie nach Bedarf eine Commit-Nachricht hinzu und klicken Sie auf Änderungen übergeben, wodurch sie direkt an die main-Verzweigung übergeben werden.

    Übergeben von Änderungen

  10. Kehren Sie zum Stammverzeichnis Ihres Repositorys zurück und klicken Sie auf paths.json und dann auf das Symbol Diese Datei bearbeiten.

    paths.json

  11. 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.

    Aktualisieren von paths.json

  12. Fügen Sie nach Bedarf eine Commit-Nachricht hinzu und klicken Sie auf Änderungen übergeben, wodurch sie direkt an die main-Verzweigung übergeben werden.

    Übergeben von Änderungen

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.

NOTE
Um Ihre Site mit dem universellen Editor zu bearbeiten, müssen Sie einen Chromium-basierten Browser nutzen.

  1. Laden Sie die neueste WYSIWYG-Authoring-Vorlage mit der Edge Delivery Services-Website von GitHub unter https://github.com/adobe-rnd/aem-boilerplate-xwalk/releases herunter.

  2. 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.

    Erstellen einer neuen Site über die Konsole

  3. 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.

    Importieren von Vorlagen

  4. Laden Sie die von GitHub heruntergeladene WYSIWYG-Authoring-Vorlage mit der Edge Delivery Services-Site-Vorlage hoch.

    • Die Vorlage darf nur einmal hochgeladen werden. Nach dem Hochladen kann sie wiederverwendet werden, um zusätzliche Sites zu erstellen.

  5. 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.

    Auswählen der Vorlage

  6. 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.

    Site-Details

  7. AEM bestätigt die Site-Erstellung mit einem Dialogfeld. Tippen oder klicken Sie zum Quittieren auf OK.

    Bestätigung der Site-Erstellung

  8. Navigieren Sie in der Sites-Konsole zur Datei index.html der neu erstellten Site und tippen oder klicken Sie in der Symbolleiste auf Bearbeiten.

    Bearbeiten der neuen Site

  9. 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.

    Universeller Editor

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.

  1. 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.

    Auswählen der zu veröffentlichenden Seiten

  2. Tippen oder klicken Sie im Bestätigungsdialogfeld auf Veröffentlichen, um den Prozess zu starten.

    Dialogfeld „Veröffentlichen“

  3. Öffnen Sie in demselben Browser eine neue Registerkarte und navigieren Sie zur URL Ihrer neuen Site.

    • https://main--<repository-name>--<owner>.hlx.page

  4. Sehen Sie sich Ihren veröffentlichten Inhalt an.

    Veröffentlichter Inhalt

Nächste Schritte next-steps

Nachdem Sie nun ein WYSIWYG-Authoring-Projekt mit Edge Delivery Services haben, können Sie Ihre eigenen Bausteine erstellen und gestalten.

Weitere Informationen finden Sie in der Anleitung Erstellen von für den universellen Editor instrumentierten Blöcken.

TIP
Eine durchgängige Anleitung zum Erstellen eines neuen Edge Delivery Services-Projekts, das für WYSIWYG-Authoring mit AEM as a Cloud Service als Inhaltsquelle aktiviert ist, finden Sie in diesem Webinar AEM GEMs .
recommendation-more-help
fbcff2a9-b6fe-4574-b04a-21e75df764ab