Inhaltsmodellierung

Willkommen beim Tutorial-Kapitel zu Inhaltsfragmenten und GraphQL-Endpunkten in Adobe Experience Manager (AEM). Darin erfahren Sie, wie Sie in AEM Inhaltsfragmente nutzen, Fragmentmodelle erstellen und GraphQL-Endpunkte verwenden.

Inhaltsfragmente stellen einen strukturierten Ansatz für die kanalübergreifende Verwaltung von Inhalten bereit, der Flexibilität und Wiederverwendbarkeit bietet. Die Aktivierung von Inhaltsfragmenten in AEM ermöglicht die Erstellung modularer Inhalte, wodurch die Konsistenz und Anpassungsfähigkeit verbessert werden.

Zunächst werden Sie durch die Aktivierung von Inhaltsfragmenten in AEM geführt. Behandelt werden dabei die erforderlichen Konfigurationen und Einstellungen für eine nahtlose Integration.

Als Nächstes geht es um die Erstellung von Fragmentmodellen, die Struktur und Attribute definieren. Sie erfahren, wie Sie auf Ihre Inhaltsanforderungen abgestimmte Modelle entwerfen und effektiv verwalten.

Anschließend sehen Sie, wie Sie Inhaltsfragmente aus den Modellen erstellen, und Sie erhalten schrittweise Anleitungen zum Verfassen und Veröffentlichen.

Darüber hinaus beschäftigen wir uns mit der Definition von AEM GraphQL-Endpunkten. GraphQL ruft effizient Daten aus AEM ab. Wir richten Endpunkte ein und konfigurieren sie, um die gewünschten Daten bereitzustellen. Durch persistierte Abfragen werden Leistung und Caching optimiert.

Im gesamten Tutorial werden Erklärungen, Code-Beispiele und praktische Tipps bereitgestellt. Am Ende sind Sie in der Lage, Inhaltsfragmente zu aktivieren, Fragmentmodelle zu erstellen, Fragmente zu generieren und AEM GraphQL-Endpunkte sowie persistierte Abfragen zu definieren. Fangen wir an!

Kontextsensitive Konfiguration

  1. Navigieren Sie zu Tools > Configuration Browser, um eine Konfiguration für das Headless-Erlebnis zu erstellen.

    Ordner erstellen

    Geben Sie einen Titel sowie einen Namen an und aktivieren Sie GraphQL-persistierte Abfragen und Inhaltsfragmentmodelle.

Inhaltsfragmentmodelle

  1. Navigieren Sie zu Tools > Inhaltsfragmentmodelle und wählen Sie den Ordner mit dem Namen der in Schritt 1 erstellten Konfiguration aus.

    Modellordner

  2. Wählen Sie im Ordner die Option Erstellen aus und geben Sie dem Modell den Namen Teaser. Fügen Sie die folgenden Datentypen zum Modell Teaser hinzu.

    table 0-row-4 1-row-4 2-row-4 3-row-4 4-row-4 5-row-4
    Datentyp Name Erforderlich Optionen
    Inhaltsreferenz Asset ja Fügen Sie, sofern gewünscht, ein Standardbild hinzu, z. B. „/content/dam/wknd-headless/assets/AdobeStock_307513975.mp4“.
    Einzeilentext Titel ja
    Einzeilentext Vortitel nein
    Mehrzeilentext Beschreibung nein Stellen Sie sicher, dass als Standardtyp „Rich-Text“ angegeben ist.
    Aufzählung Stil ja Rendern Sie diesen Datentyp als Dropdown-Liste. Die Optionen sind „Hero“, „Hero und ausgewählt“ und „Ausgewählt“.

    Modell „Teaser“

  3. Erstellen Sie im Ordner ein zweites Modell mit dem Namen Angebot. Klicken Sie auf „Erstellen“, geben Sie dem Modell den Namen „Angebot“ und fügen Sie die folgenden Datentypen hinzu:

    table 0-row-4 1-row-4 2-row-4 3-row-4
    Datentyp Name Erforderlich Optionen
    Inhaltsreferenz Asset ja Fügen Sie ein Standardbild hinzu, Z. B.: /content/dam/wknd-headless/assets/AdobeStock_238607111.jpeg
    Mehrzeilentext Beschreibung nein
    Mehrzeilentext Artikel nein

    Angebotsmodell

  4. Erstellen Sie im Ordner ein drittes Modell mit dem Namen Bilderliste. Klicken Sie auf „Erstellen“, geben Sie dem Modell den Namen „Bilderliste“ und fügen Sie die folgenden Datentypen hinzu:

    table 0-row-4 1-row-4
    Datentyp Name Erforderlich Optionen
    Fragmentreferenz Listenelemente ja Rendern als „Mehrere Felder“. Das zulässige Inhaltsfragmentmodell ist „Angebot“.

    Modell „Bilderliste“

Inhaltsfragmente

  1. Navigieren Sie nun zu „Assets“ und erstellen Sie einen Ordner für die neue Site. Klicken Sie auf „Erstellen“ und benennen Sie den Ordner.

    Ordner hinzufügen

  2. Nachdem der Ordner erstellt wurde, wählen Sie den Ordner aus und öffnen Sie seine Eigenschaften.

  3. Wählen Sie auf der Registerkarte Cloud-Konfigurationen des Ordners die zuvor erstellte Konfiguration aus.

    AEM Headless-Asset-Ordner – Cloud-Konfiguration

    Klicken Sie in den neuen Ordner und erstellen Sie einen Teaser. Klicken Sie auf Erstellen und Inhaltsfragment und wählen Sie das Modell Teaser aus. Nennen Sie das Modell Hero und klicken Sie auf Erstellen.

    table 0-row-2 1-row-2 2-row-2 3-row-2 4-row-2 5-row-2
    Name Anmerkungen
    Asset Behalten Sie den Standardwert bei oder wählen Sie ein anderes Asset (Video oder Bild) aus.
    Titel Explore. Discover. Live.
    Vortitel Join use for your next adventure.
    Beschreibung Lassen Sie dieses Feld leer.
    Stil Hero

    Hero-Fragment

GraphQL-Endpunkte

  1. Navigieren Sie zu Tools > GraphQL.

    AEM GraphiQL

  2. Klicken Sie auf Erstellen, benennen Sie den neuen Endpunkt und wählen Sie die neu erstellte Konfiguration aus.

    AEM Headless-GraphQL-Endpunkt

GraphQL-persistierte Abfragen

  1. Testen Sie nun den neuen Endpunkt. Navigieren Sie dazu zu Tools > GraphQL-Abfrage-Editor und wählen Sie oben rechts im Fenster Ihren Endpunkt für die Dropdown-Liste aus.

  2. Erstellen Sie im Abfrage-Editor verschiedene Abfragen.

    code language-graphql
    {
        teaserList {
            items {
            title
            }
        }
    }
    

    Sie sollten eine Liste mit dem oben erstellten Einzelfragment erhalten.

    Erstellen Sie für diese Übung eine vollständige Abfrage, die die AEM Headless-App nutzt. Erstellen Sie eine Abfrage, die einen einzelnen Teaser anhand des Pfads zurückgibt. Geben Sie im Abfrage-Editor die folgende Abfrage ein:

    code language-graphql
    query TeaserByPath($path: String!) {
    component: teaserByPath(_path: $path) {
        item {
        __typename
        _path
        _metadata {
            stringMetadata {
            name
            value
            }
        }
        title
        preTitle
        style
        asset {
            ... on MultimediaRef {
            __typename
            _authorUrl
            _publishUrl
            format
            }
            ... on ImageRef {
            __typename
            _authorUrl
            _publishUrl
            mimeType
            width
            height
            }
        }
        description {
            html
            plaintext
        }
        }
    }
    }
    

    Geben Sie unten im Eingabefeld für die Abfragevariablen Folgendes ein:

    code language-json
    {
        "path": "/content/dam/pure-headless/hero"
    }
    
    note note
    NOTE
    Möglicherweise müssen Sie die Abfragevariable path basierend auf dem Ordner- und Fragmentnamen anpassen.

    Führen Sie die Abfrage aus, um die Ergebnisse des zuvor erstellten Inhaltsfragments zu erhalten.

  3. Klicken Sie auf Speichern, um die Abfrage zu persistieren (speichern), und geben Sie der Abfrage den Namen Teaser. Dadurch können Sie auf die Abfrage anhand des Namens in der Anwendung verweisen.

Nächste Schritte

Herzlichen Glückwunsch! Sie haben erfolgreich AEM as a Cloud Service konfiguriert, um die Erstellung von Inhaltsfragmenten und GraphQL-Endpunkten zu ermöglichen. Sie haben auch ein Inhaltsfragmentmodell und ein Inhaltsfragment erstellt sowie einen GraphQL-Endpunkt und eine persistierte Abfrage definiert. Sie können jetzt zum nächsten Tutorial-Kapitel weitergehen. Darin erfahren Sie, wie Sie eine AEM Headless-React-Anwendung erstellen, die die in diesem Kapitel erstellten Inhaltsfragmente und GraphQL-Endpunkte verwendet.

Nächstes Kapitel: AEM Headless-APIs und React

recommendation-more-help
e25b6834-e87f-4ff3-ba56-4cd16cdfdec4