Inhaltsmodellierung

Willkommen beim Tutorial-Kapitel zu Inhaltsfragmenten und GraphQL-Endpunkten in Adobe Experience Manager (AEM). Wir behandeln die Nutzung von Inhaltsfragmenten, das Erstellen von Fragmentmodellen und die Verwendung von GraphQL-Endpunkten in AEM.

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

Zunächst führen wir Sie durch die Aktivierung von Inhaltsfragmenten in AEM, die die erforderlichen Konfigurationen und Einstellungen für eine nahtlose Integration abdecken.

Als Nächstes werden wir die Erstellung von Fragmentmodellen behandeln, die Struktur und Attribute definieren. Erfahren Sie, wie Sie Modelle entwerfen, die auf Ihre Inhaltsanforderungen abgestimmt sind, und sie effektiv verwalten.

Anschließend werden wir die Erstellung von Inhaltsfragmenten aus den Modellen demonstrieren und schrittweise Anleitungen zum Authoring und Publishing geben.

Darüber hinaus werden wir die Definition AEM GraphQL-Endpunkte untersuchen. GraphQL ruft effizient Daten aus AEM ab. Wir richten Endpunkte ein und konfigurieren sie, um die gewünschten Daten verfügbar zu machen. Beständige Abfragen optimieren die Leistung und Zwischenspeicherung.

Während des Tutorials werden wir Erklärungen, Codebeispiele und praktische Tipps bereitstellen. Am Ende verfügen Sie über die Fertigkeiten, Inhaltsfragmente zu aktivieren, Fragmentmodelle zu erstellen, Fragmente zu generieren und AEM GraphQL-Endpunkte und persistente Abfragen zu definieren. Fangen wir an!

Kontextabhängige Konfiguration

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

   

   Bereitstellung einer title und name und aktivieren Sie Persistente GraphQL-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.

   

2. Wählen Sie im Ordner die Option Erstellen und benennen Sie das Modell Teaser. Fügen Sie die folgenden Datentypen zum Teaser -Modell.

   Datentyp	Name	Erforderlich	Optionen
   Inhaltsreferenz	Asset	ja	Fügen Sie bei Bedarf ein Standardbild hinzu. Beispiel: /content/dam/wknd-headless/assets/AdobeStock_307513975.mp4
   Einzeilentext	Titel	ja
   Einzeilentext	Vortitel	nein
   Mehrzeilentext	Beschreibung	nein	Stellen Sie sicher, dass der Standardtyp Rich-Text ist.
   Aufzählung	Stil	ja	Als Dropdown-Liste rendern. Die Optionen sind Hero -> Hero und Vorgestellt -> Vorgestellt

   

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:

   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

   

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

   Datentyp	Name	Erforderlich	Optionen
   Fragmentreferenz	Listenelemente	ja	Als mehrere Felder wiedergeben. Zulässiges Inhaltsfragmentmodell ist Angebot.

   

Inhaltsfragmente

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

   

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

3. Im Ordner Cloud-Konfigurationen Registerkarte, wählen Sie die Konfiguration aus früher erstellt.

   

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

   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	Leer lassen
   Stil	Hero

   

GraphQL-Endpunkte

1. Navigieren Sie zu Tools > GraphQL

   

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

   

GraphQL – Persistierte Abfragen

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

2. Erstellen Sie im Abfrageeditor verschiedene Abfragen.

   {
       teaserList {
           items {
           title
           }
       }
   }
   

   Sie sollten eine Liste mit dem einzelnen Fragment erhalten above.

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

   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
       }
       }
   }
   }
   

   Im Abfragevariablen Eingabe unten:

   {
       "path": "/content/dam/pure-headless/hero"
   }
   

   HINWEIS

   Möglicherweise müssen Sie die Abfragevariable anpassen path basierend auf dem Ordner und den Fragmentnamen.

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

3. Klicken Speichern , um die Abfrage zu speichern und die Abfrage zu benennen Teaser. Dadurch können wir die Abfrage anhand des Namens in der Anwendung referenzieren.

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, einen GraphQL-Endpunkt und eine persistente Abfrage definiert. Sie können jetzt zum nächsten Tutorial-Kapitel übergehen, in dem Sie erfahren, 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

Ressourcen für Business.Adobe.com