DokumentationAEMBenutzerhandbuch

Visual Content Fragments visual-content-fragments

Letzte Aktualisierung: 27. Mai 2026
  • Gilt für:
  • Experience Manager as a Cloud Service

Erstellt für:

  • User
  • Developer

Inhaltsfragmente enthalten strukturierten Inhalt, der für die JSON-Ausgabe ohne Design oder Layout vorgesehen ist. Durch das Hinzufügen von HTML-Vorlagen können Sie vollständig dekorierte visuelle Erlebnisse mit strukturierten Inhalten im HTML-Format erstellen:

  • Die Visualisierung eines Inhaltsfragments hilft bei der Qualitätssicherung von Inhalten, sodass Stakeholder Inhalte vor der Verwendung überprüfen können, ohne den Inhaltsfragment-Editor öffnen zu müssen

  • Die Bereitstellung eines visuellen Fragments unterstützt die Omni-Channel-Bereitstellung und ermöglicht die Wiederverwendung modularer Erlebnisse in Kanälen wie Web, E-Mail oder Mobile Apps.

Die gerenderte Ausgabe eines AEM-Inhaltsfragments, das das Layout und Design einer angehängten HTML-Vorlage verwendet, wird als "Inhaltsfragment“.

HTML-Vorlagen enthalten Layout- und Design-Informationen, die die Visualisierung von Inhaltsfragmenten ermöglichen. Die Verbindung zwischen einer Vorlage und einem Inhaltsfragment wird mithilfe der Handlebars-Syntax hergestellt, um HTML-Tags den im Inhaltsfragmentmodell definierten Datentypen (Feldern) zuzuordnen. Diese Definition ermöglicht die Anzeige von Inhalten, die in den entsprechenden Feldern des Inhaltsfragment-Editors erstellt wurden, an den entsprechenden Stellen innerhalb der Vorlage.

Sie oder Ihr Entwicklungs-Team können Ihre eigenen HTML-Vorlagen erstellen und anpassen und dann eines oder mehrere von ihnen hochladen und an Inhaltsfragmentmodelle anhängen sodass die entsprechenden Fragmente in Erlebnisse gerendert, in der Vorschau angezeigt und nach Bedarf ​ bereitgestellt werden können.

NOTE
Eine generische Vorlage ist standardmäßig immer in AEM verfügbar und mit jedem Modell verknüpft. Diese Vorlage ermöglicht die Anzeige von Schlüssel/Wert-Paaren in strukturierten Inhalten in einem sauberen, tabellenartigen Format, um Anwendungsfälle für Content Quality Assurance (QA) zu unterstützen.

Erstellen einer Vorlage create-a-template

Mit Handlebars entwickelte HTML-Vorlagen ermöglichen die Vorschau und Bereitstellung visueller Inhaltsfragmente im HTML-Format. Die Handlebars.js-Syntax definiert Platzhalter für Inhalte, die in Inhaltsfragmentfeldern verfasst werden.

Einzelheiten zum Entwickeln eigener Vorlagen finden Sie unter Visual Content Fragments - Vorlagen.

Hochladen und Zuweisen Ihrer Vorlage upload-and-assign-your-template

Eine Vorlage ist mit einem Inhaltsfragmentmodell verknüpft, sodass sie mit allen Inhaltsfragmenten verwendet werden kann, die aus diesem Modell erstellt wurden.

Hochladen der neuen HTML-Vorlage:

  1. Öffnen Sie in der Inhaltsfragmentkonsole die Registerkarte für Inhaltsfragmentmodelle.

  2. Navigieren Sie zum Speicherort Ihres Fragmentmodells.

  3. Wählen Sie das Informationssymbol (i) für das gewünschte Modell aus:

    Inhaltsfragmentkonsole - Informationssymbol

    Das rechte Bedienfeld wird angezeigt.

  4. Scrollen Sie nach unten, um HTML Vorlagen anzuzeigen. Die Generische Vorlage wird bereits als Standard aufgeführt:

    Vorschau eines Fragments mit einer generischen HTML-Vorlage

  5. Wählen Sie + aus, um Ihre Vorlage aus einer HTML-Datei (.html) hochzuladen. In einem Dialogfeld können Sie lokale Dateisystem durchsuchen Ihre Vorlagendatei auswählen.

  6. Nach dem Hochladen werden zwei Ansichten der Vorlage angezeigt, die Sie überprüfen können:

    • Links: Darstellung der Vorlage ohne Inhalt
    • Rechts: der HTML-Code, der hier auch bearbeitet werden kann, bevor er in AEM importiert wird

    HTML-Vorlage beim Hochladen überprüfen

  7. Wählen Sie Weiter, um fortzufahren.

  8. Geben Sie einen Vorlagennamen zur Verwendung in AEM ein.

  9. Bestätigen Sie mit Vorlage erstellen.

  10. Die Vorlage wird in AEM erstellt und unter HTML-Vorlagen in den Eigenschaften von Inhaltsfragmentmodellen aufgeführt.
    Nach dem Laden kann sie für die Vorschau von Fragmenten) ​ werden. Sie können die Vorlage auch Herunterladen oder Löschen.

Vorschau eines Fragments mit einer Vorlage preview-your-fragment-with-a-template

So zeigen Sie eine Vorschau Ihres Inhaltsfragments mithilfe einer Vorlage an:

NOTE
Da die generische Vorlage immer verfügbar ist, können Sie eine Vorschau des Fragments anzeigen, ohne benutzerdefinierte Vorlagen zu laden.

  1. Navigieren Sie in der Inhaltsfragmentkonsole zum Speicherort des gewünschten Fragments.

  2. Sie haben folgende Möglichkeiten:

    • Wählen Sie Ihr Fragment in der Konsole aus
    • Fragment im Editor öffnen

  3. Wählen Vorschau in der oberen Symbolleiste von aus:

    • die Inhaltsfragmentkonsole
    • im Editor, in dem Sie dann „Vorlage auswählen

In beiden Fällen wird ein neues modales Fenster geöffnet.

  1. Wenn keine benutzerdefinierten Vorlagen verfügbar sind, verwendet AEM die Generische Vorlage um Ihr Fragment anzuzeigen. Die generische Vorlage:

    • Zeigt die Felder des Fragments in Tabellenform, Name und Inhalt an
    • Zeigt den vollständig hydrierten Inhalt referenzierter Fragmente in derselben Ansicht

  2. Wenn benutzerdefinierte Vorlagen verfügbar sind, können Sie die gewünschte Vorlage auswählen (einschließlich der "Vorlage).

  3. Wenn das Inhaltsfragment veröffentlicht ist, können Sie auch seine Vorschau-URL und Veröffentlichungs-URL anzeigen und kopieren.

Beispielsweise die Vorschau mit der generischen Vorlage:

Vorschau eines Fragments mit einer generischen HTML-Vorlage

Bereitstellen des visuellen Inhaltsfragments deliver-your-visual-content-fragment

Das visuelle Inhaltsfragment kann an eine Reihe von Zielen im HTML-Format bereitgestellt werden.

An den Browser senden deliver-to-the-browser

Kopieren Sie die Vorschau-URL oder die Veröffentlichungs-URL. Greifen Sie darauf direkt über Ihren Browser zu, um Ihr visuelles Inhaltsfragment zu sehen.

An Edge Delivery Services senden deliver-to-edge-delivery-services

Sie können Ihr visuelles Fragment auf einer Edge Delivery Service (EDS)-Seite bereitstellen.

  1. Navigieren Sie zu Ihrem EDS-Projekt.
  2. Fügen Sie einen (Block des ​ () hinzu oder greifen Sie ​.
  3. Fügen Sie die Veröffentlichungs-URL in den Block ein.
  4. Veröffentlichen Sie Ihre EDS-Seite. Die HTML-Darstellung Ihres Fragments wird angezeigt.
NOTE
Ausführliche Informationen finden Sie unter Integration mit Edge Delivery Services (Einbettungsblock)

An AEM senden deliver-to-an-AEM-page

Sie können Ihr visuelles Inhaltsfragment auf einer AEM-Seite mithilfe der Kernkomponente bereitstellen: Inhaltsfragment.

Beim Konfigurieren einer Inhaltsfragment-Komponente ​ Ihrer Seite:

  1. Geben Sie das erforderliche Inhaltsfragment an.

  2. Wählen Sie Inhaltsfragmentvisualisierung aus.

  3. Wählen Sie die gewünschte Visualisierungsvorlage aus der Dropdown-Liste aus.

    Konfigurieren der Inhaltsfragmentkomponente für ein visuelles Fragment

  4. Das visuelle Fragment wird auf der Seite angezeigt.

NOTE
Ausführliche Informationen finden Sie unter Integration - AEM Sites mit Kernkomponenten

Vorlage herunterladen download-your-template

So laden Sie Ihre HTML-Vorlage von AEM herunter:

  1. Öffnen Sie in der Inhaltsfragmentkonsole die Registerkarte für Inhaltsfragmentmodelle.

  2. Navigieren Sie zum Speicherort Ihres Fragmentmodells.

  3. Wählen Sie das Informationssymbol (i) für das gewünschte Modell aus:

    Inhaltsfragmentkonsole - Informationssymbol

    Das rechte Bedienfeld wird angezeigt.

  4. Scrollen Sie nach unten, um HTML-Vorlagen anzuzeigen.

  5. Wählen Sie die Auslassungszeichen nach der Vorlage aus, die Sie herunterladen möchten.

  6. Wählen Sie Herunterladen aus.

  7. Geben Sie den Dateinamen und den Speicherort an.

  8. Bestätigen Sie mit Speichern.

Vorlage löschen delete-your-template

So löschen Sie Ihre neue HTML-Vorlage (aus AEM):

  1. Öffnen Sie in der Inhaltsfragmentkonsole die Registerkarte für Inhaltsfragmentmodelle.

  2. Navigieren Sie zum Speicherort Ihres Fragmentmodells.

  3. Wählen Sie das Informationssymbol (i) für das gewünschte Modell aus:

    Inhaltsfragmentkonsole - Informationssymbol

    Das rechte Bedienfeld wird angezeigt.

  4. Scrollen Sie nach unten, um HTML-Vorlagen anzuzeigen.

  5. Wählen Sie die Auslassungszeichen nach der Vorlage aus, die Sie herunterladen möchten.

  6. Wählen Sie Löschen aus.

  7. Bestätigen Sie die Aktion im folgenden Dialogfeld mit Löschen.

recommendation-more-help
experience-manager-cloud-service-help-main-toc