DokumentationAEMSjälvstudiekurser om AEMSjälvstudiekurs om AEM Headless

Innehållsmodellering

Last update: Sun Jul 14 2024 00:00:00 GMT+0000 (Coordinated Universal Time)

Skapat för:

  • Mellanliggande
  • Utvecklare

Välkommen till självstudiekurskapitlet om innehållsfragment och GraphQL-slutpunkter i Adobe Experience Manager (AEM). Vi ska använda innehållsfragment, skapa fragmentmodeller och använda GraphQL-slutpunkter i AEM.

Content Fragments erbjuder ett strukturerat sätt att hantera innehåll över flera kanaler, vilket ger flexibilitet och återanvändbarhet. Genom att aktivera innehållsfragment i AEM kan du skapa modulärt innehåll, vilket ger enhetlighet och anpassningsbarhet.

För det första vägleder vi dig genom att aktivera innehållsfragment i AEM, som omfattar nödvändiga konfigurationer och inställningar för smidig integrering.

Sedan ska vi ta upp hur du skapar fragmentmodeller, som definierar struktur och attribut. Lär dig hur du utformar modeller som är anpassade efter dina innehållskrav och hanterar dem effektivt.

Sedan visar vi hur man skapar innehållsfragment från modellerna och ger stegvis vägledning om redigering och publicering.

Dessutom ska vi utforska hur vi definierar AEM GraphQL slutpunkter. GraphQL hämtar effektivt data från AEM, och vi skapar och konfigurerar slutpunkter för att exponera önskade data. Beständiga frågor optimerar prestanda och cachning.

Under hela självstudiekursen kommer vi att ge förklaringar, kodexempel och praktiska tips. Slutligen har du de kunskaper du behöver för att aktivera innehållsfragment, skapa fragmentmodeller, generera fragment och definiera AEM GraphQL slutpunkter och beständiga frågor. Kom så börjar vi!

Kontextmedveten konfiguration

  1. Navigera till Verktyg > Konfigurationsläsaren för att skapa en konfiguration för den headless-upplevelsen.

    Skapa mapp

    Ange en titel och namn och kontrollera GraphQL Persisted Queries och Content Fragment Models.

Modeller för innehållsfragment

  1. Navigera till Verktyg > Innehållsfragmentmodeller och markera mappen med namnet på konfigurationen som skapades i steg 1.

    Modellmapp

  2. I mappen väljer du Skapa och ger modellen namnet Teaser. Lägg till följande datatyper i modellen Teaser.

    table 0-row-4 1-row-4 2-row-4 3-row-4 4-row-4 5-row-4
    Datatyp Namn Obligatoriskt Alternativ
    Innehållsreferens Tillgång ja Lägg till en standardbild om du vill. Exempel: /content/dam/wknd-headless/assets/AdobeStock_307513975.mp4
    Enkelradig text Titel ja
    Enkelradig text Förtitel no
    Flerradstext Beskrivning no Kontrollera att standardtypen är RTF-text
    Uppräkning Stil ja Rendera som listruta. Alternativen är Hero -> hero och Featured -> featured

    Teaser model

  3. I mappen skapar du en andra modell med namnet Erbjudande. Klicka på Skapa och ge modellen namnet"Erbjudande" och lägg till följande datatyper:

    table 0-row-4 1-row-4 2-row-4 3-row-4
    Datatyp Namn Obligatoriskt Alternativ
    Innehållsreferens Tillgång ja Lägg till standardbild. Exempel: /content/dam/wknd-headless/assets/AdobeStock_238607111.jpeg
    Flerradstext Beskrivning no
    Flerradstext Artikel no

    Erbjudandemodell

  4. I mappen skapar du en tredje modell med namnet Bildlista. Klicka på Skapa och ge modellen namnet "Bildlista" och lägg till följande datatyper:

    table 0-row-4 1-row-4
    Datatyp Namn Obligatoriskt Alternativ
    Fragmentreferens Listobjekt ja Återge som flera fält. Tillåten modell för innehållsfragment är Erbjudande.

    Bildlistmodell

Innehållsfragment

  1. Navigera nu till Assets och skapa en mapp för den nya webbplatsen. Klicka på Skapa och ge mappen ett namn.

    Lägg till mapp

  2. När mappen har skapats markerar du mappen och öppnar dess Egenskaper.

  3. Välj konfigurationen som skapades tidigare på fliken Molnkonfigurationer i mappen.

    Resursmapp AEM Headless-molnkonfiguration

    Klicka i den nya mappen och skapa ett teaser. Klicka på Skapa och Innehållsfragment och välj modellen Teaser. Namnge modellen Hero och klicka på Skapa.

    table 0-row-2 1-row-2 2-row-2 3-row-2 4-row-2 5-row-2
    Namn Anteckningar
    Tillgång Låt vara standardvärde eller välj en annan resurs (video eller bild)
    Titel Explore. Discover. Live.
    Förtitel Join use for your next adventure.
    Beskrivning Lämna tomt
    Stil Hero

    hjältefragment

GraphQL slutpunkter

  1. Navigera till Verktyg > GraphQL

    AEM GraphiQL

  2. Klicka på Skapa och ge den nya slutpunkten ett namn och välj den nya konfigurationen.

    AEM Headless GraphQL-slutpunkt

GraphQL Beständiga frågor

  1. Låt oss testa den nya slutpunkten. Navigera till Verktyg > GraphQL Query Editor och välj slutpunkt för listrutan i fönstrets övre högra hörn.

  2. Skapa några olika frågor i frågeredigeraren.

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

    Du bör hämta en lista som innehåller det enskilda fragmentet som skapades ovan.

    För den här övningen skapar du en fullständig fråga som AEM headless-appen använder. Skapa en fråga som returnerar ett enskilt teaser per sökväg. Ange följande fråga i frågeredigeraren:

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

    I frågevariablerna anger du indata längst ned:

    code language-json 
    {
    "path": "/content/dam/pure-headless/hero"
}
    note note
    NOTE
    Du kan behöva justera frågevariabeln path baserat på mapp- och fragmentnamnen.

    Kör frågan för att ta emot resultaten från det innehållsfragment som skapades tidigare.

  3. Klicka på Spara om du vill behålla (spara) frågan och ge frågan namnet teaser. Detta gör att vi kan referera till frågan efter namn i programmet.

Nästa steg

Grattis! Du har konfigurerat AEM as a Cloud Service så att innehållsfragment och GraphQL slutpunkter kan skapas. Du har också skapat en innehållsfragmentmodell och ett innehållsfragment, och definierat en GraphQL-slutpunkt och en beständig fråga. Du är nu redo att gå vidare till nästa självstudiekurs där du får lära dig hur du skapar ett AEM Headless React-program som använder de innehållsfragment och GraphQL-slutpunkter som du har skapat i det här kapitlet.

Nästa kapitel: AEM Headless APIs and React

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