DocumentatieAEMTutorials voor AEMAEM Headless-tutorial

Modellering van inhoud

Last update: Mon Jul 15 2024 00:00:00 GMT+0000 (Coordinated Universal Time)

Gemaakt voor:

  • tussenpersoon
  • Ontwikkelaar

Welkom bij de zelfstudie over inhoudsfragmenten en GraphQL-eindpunten in Adobe Experience Manager (AEM). We zullen het gebruik van Content Fragments, het maken van Fragmentmodellen en het gebruik van GraphQL-eindpunten in AEM behandelen.

Inhoudsfragmenten bieden een gestructureerde aanpak voor het beheer van inhoud tussen kanalen, zodat u over meer flexibiliteit en herbruikbaarheid beschikt. Als u Content Fragments in AEM inschakelt, kunt u modulaire inhoud maken, waardoor de consistentie en het aanpassingsvermogen worden vergroot.

Eerst, zullen wij u door het toelaten van de Fragmenten van de Inhoud in AEM begeleiden, die noodzakelijke configuraties en montages voor naadloze integratie behandelen.

Vervolgens gaat het maken van fragmentmodellen, waarmee structuur en kenmerken worden gedefinieerd, aan de orde komen. Leer hoe u modellen ontwerpt die zijn afgestemd op uw inhoudsvereisten en deze effectief beheert.

Dan, zullen wij het creëren van de Fragmenten van de Inhoud van de modellen aantonen, die geleidelijke begeleiding op creatie en het publiceren verstrekken.

Daarnaast zullen we zoeken naar het definiëren van eindpunten voor AEM GraphQL. GraphQL haalt efficiënt gegevens op uit AEM en wij stellen eindpunten in en configureren deze om de gewenste gegevens beschikbaar te maken. Met permanente query's worden de prestaties en caching geoptimaliseerd.

Tijdens de gehele zelfstudie geven we uitleg, codevoorbeelden en praktische tips. Tegen het eind, zult u de vaardigheden hebben om de Fragmenten van de Inhoud toe te laten, tot de Modellen van het Fragment te leiden, Fragments te produceren, en AEM eindpunten van GraphQL en voortgezette vragen te bepalen. Laten we beginnen!

Contextbewuste configuratie

  1. Navigeer aan Hulpmiddelen > Browser van de Configuratie om een configuratie voor de headless ervaring tot stand te brengen.

    creeer omslag

    Verstrek a titel en naam, en controleer GraphQL de Verlengde Vragen en Modellen van het Fragment van de Inhoud.

Modellen van inhoudsfragmenten

  1. Navigeer aan Hulpmiddelen > de Modellen van het Fragment van de Inhoud en selecteer de omslag met de naam van de configuratie die in stap 1 wordt gecreeerd.

    Modelomslag

  2. Binnen de omslag, creeert de uitgezochte ____ en noemt het model Taser. Voeg de volgende datatypes aan het 1} model van het Taser {toe.

    table 0-row-4 1-row-4 2-row-4 3-row-4 4-row-4 5-row-4
    Datatype Naam Vereist Opties
    Content Reference Element ja Voeg desgewenst een standaardafbeelding toe. Voorbeeld: /content/dam/wknd-headless/assets/AdobeStock_307513975.mp4
    Tekst met één regel Titel ja
    Tekst met één regel Voortitel nee
    Tekst met meerdere regels Beschrijving nee Zorg ervoor dat het standaardtype tekst met opmaak is
    Opsomming Stijl ja Renderen als vervolgkeuzelijst. Opties zijn Hero -> hero en Topaanbieding -> aanbevolen

    model van de Taser

  3. Binnen de omslag, creeer een tweede model genoemd Aanbieding. Klik op Maken en geef het model de naam "Aanbieding" en voeg de volgende datatypen toe:

    table 0-row-4 1-row-4 2-row-4 3-row-4
    Datatype Naam Vereist Opties
    Content Reference Element ja Standaardafbeelding toevoegen. Voorbeeld: /content/dam/wknd-headless/assets/AdobeStock_238607111.jpeg
    Tekst met meerdere regels Beschrijving nee
    Tekst met meerdere regels Artikel nee

    model van de Aanbieding

  4. Binnen de omslag, creeer een derde model genoemd Lijst van het Beeld. Klik op Maken en geef het model de naam "Lijst van afbeeldingen" en voeg de volgende datatypen toe:

    table 0-row-4 1-row-4
    Datatype Naam Vereist Opties
    Fragmentverwijzing Items weergeven ja Renderen als meerdere velden. Toegestaan inhoudsfragmentmodel is aangeboden.

    Model van de Lijst van het Beeld

Inhoudsfragmenten

  1. Navigeer nu naar Assets en maak een map voor de nieuwe site. Klik op Maken en geef de map een naam.

    voeg omslag toe

  2. Nadat de omslag wordt gecreeerd, selecteer de omslag en open zijn Eigenschappen.

  3. In het lusje van de Configuraties van de Wolk van de omslag ____, selecteer de configuratie vroegergecreeerd.

    omslag van Activa AEM de Hoofdloze wolkenconfiguratie

    Klik in de nieuwe map en maak een teaser. Klik creëren en het Fragment van de Inhoud en selecteren het Taser model. Noem het model Hero en klik creeer.

    table 0-row-2 1-row-2 2-row-2 3-row-2 4-row-2 5-row-2
    Naam Notities
    Element Als standaardwaarde behouden of een ander element kiezen (video of afbeelding)
    Titel Explore. Discover. Live.
    Voortitel Join use for your next adventure.
    Beschrijving Leeg laten
    Stijl Hero

    heldfragment

GraphQL-eindpunten

  1. Ga aan Hulpmiddelen > GraphQL

    AEM GraphiQL

  2. Klik creëren en geef het nieuwe eindpunt een naam en kies de pas gecreëerde configuratie.

    AEM het eindpunt van GraphQL zonder hoofd

Aangehouden GraphQL-query's

  1. Laten we het nieuwe eindpunt testen. Navigeer aan Hulpmiddelen > de Redacteur van de Vraag van GraphQL en kies ons eindpunt voor de daling neer in het hoogste recht van het venster.

  2. In de vraagredacteur, creeer een paar verschillende vragen.

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

    U zou een lijst moeten krijgen die het enige gemaakte fragment hierbovenbevatten.

    Voor deze oefening, creeer een volledige vraag die de AEM headless app gebruikt. Maak een query die één teaser per pad retourneert. Voer de volgende query in in de query-editor:

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

    In de input van vraagvariabelen bij de bodem, ga binnen:

    code language-json 
    {
    "path": "/content/dam/pure-headless/hero"
}
    note note
    NOTE
    Mogelijk moet u de queryvariabele path aanpassen op basis van de map- en fragmentnamen.

    Voer de query uit om de resultaten van het eerder gemaakte inhoudsfragment te ontvangen.

  3. Klik sparen om (sparen) de vraag voort te zetten en de vraag teaser te noemen. Hierdoor kunnen we de query op naam weergeven in de toepassing.

Volgende stappen

Gefeliciteerd! U hebt AEM as a Cloud Service geconfigureerd om het maken van Content Fragments en GraphQL-eindpunten toe te staan. U hebt ook een model van het Fragment van de Inhoud en een Fragment van de Inhoud, en bepaald een eindpunt van GraphQL en persisted vraag gecreeerd. U bent nu bereid om zich op het volgende zelfstudie- hoofdstuk te bewegen, waar u zult leren hoe te om een AEM toepassing van de Reactie van de Zwaartepunt tot stand te brengen die de Fragments van de Inhoud en het eindpunt van GraphQL verbruikt u in dit hoofdstuk creeerde.

Volgend hoofdstuk: AEM headless API's en Reageer

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