DokumentationAEMAEM-TutorialsTutorials zu AEM Sites

Erstellen eines Blocks

Last update: Thu Mar 27 2025 00:00:00 GMT+0000 (Coordinated Universal Time)
  • Gilt für:
  • Experience Manager as a Cloud Service

Erstellt für:

  • Einsteiger
  • Entwickler

Nachdem die JSON des Teaser-Blocks in die teaser-Verzweigung verschoben wurde, kann der Block im universellen Editor von AEM bearbeitet werden.

Die Erstellung eines Blocks in der Entwicklung ist aus mehreren Gründen wichtig:

  1. Dadurch wird sichergestellt, dass Definition und Modell des Blocks korrekt sind.
  2. Entwickelnde haben die Möglichkeit, die semantische HTML des Blocks zu überprüfen, die als Grundlage für die Entwicklung dient.
  3. Es wird die Bereitstellung sowohl des Inhalts als auch der semantischen HTML in der Vorschau-Umgebung ermöglicht, was eine schnellere Blockentwicklung unterstützt.

Öffnen des universellen Editors mit Code aus der teaser-Verzweigung

  1. Melden Sie sich bei der AEM-Autoreninstanz an.

  2. Navigieren Sie zu Sites und wählen Sie die Site (WKND [universeller Editor]) aus, die im vorherigen Kapitel erstellt wurde.

    AEM Sites

  3. Erstellen oder bearbeiten Sie eine Seite, um den neuen Block hinzuzufügen, und stellen Sie sicher, dass der Kontext zur Unterstützung der lokalen Entwicklung verfügbar ist. Seiten können zwar überall auf der Site erstellt werden, es ist jedoch oft am besten, für jeden neuen Arbeitsbereich separate Seiten zu erstellen. Erstellen Sie eine neue Seite „Ordner“ mit dem Namen Verzweigungen. Jede Unterseite wird verwendet, um die Entwicklung der gleichnamigen Git-Verzweigung zu unterstützen.

    AEM-Sites – Erstellen einer Seite für Verzweigungen

  4. Erstellen Sie unter der Seite Verzweigungen eine neue Seite mit dem Titel Teaser, was dem Namen der Entwicklungsverzweigung entspricht, und klicken Sie auf Öffnen, um die Seite zu bearbeiten.

    AEM Sites – Erstellen einer Seite „Teaser“

  5. Aktualisieren Sie den universellen Editor, um den Code aus der Verzweigung teaser zu laden, indem Sie ?ref=teaser zur URL hinzufügen. Achten Sie darauf, den Abfrageparameter VOR dem #-Symbol hinzufügen.

    Universeller Editor – Auswählen der Teaser-Verzweigung

  6. Wählen Sie den ersten Abschnitt unter Main, klicken Sie auf die Schaltfläche Hinzufügen und wählen Sie den Teaser-Block aus.

    Universeller Editor – Hinzufügen eines Blocks

  7. Wählen Sie auf der Arbeitsfläche den neu hinzugefügten Teaser aus und erstellen Sie die Felder rechts oder über die Inline-Bearbeitungsfunktion.

    Universeller Editor – Erstellen eines Blocks

  8. Klicken Sie nach Abschluss der Erstellung auf die Schaltfläche Veröffentlichen oben rechts im universellen Editor, veröffentlichen Sie als Vorschau und veröffentlichen Sie die Änderungen in der Vorschauumgebung. Die Änderungen werden dann in der Domain aem.page für die Website veröffentlicht.
    AEM Sites – Veröffentlichen oder Vorschau

  9. Warten Sie, bis die Änderungen in der Vorschau veröffentlicht wurden, und öffnen Sie dann die Web-Seite über die AEM CLI unter http://localhost:3000/branches/teaser.

    Lokale Site – Aktualisieren

Der Inhalt des erstellten Teaser-Blocks und die semantische HTML sind jetzt auf der Vorschau-Website verfügbar und können mithilfe der AEM-CLI in der lokalen Entwicklungsumgebung entwickelt werden.

recommendation-more-help
bb44cebf-d964-4e3c-b64e-ce882243fe4d