DocumentazioneAEMTutorial su AEMTutorial di AEM Headless

Modellazione dei contenuti

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

Creato per:

  • Intermedio
  • Sviluppatore

Benvenuti nel capitolo del tutorial su Frammenti di contenuto ed endpoint GraphQL in Adobe Experience Manager (AEM). Scopriremo come sfruttare i frammenti di contenuto, creare modelli di frammenti e utilizzare gli endpoint di GraphQL nell’AEM.

I frammenti di contenuto offrono un approccio strutturato alla gestione dei contenuti attraverso i canali, garantendo flessibilità e riutilizzabilità. L’abilitazione dei frammenti di contenuto nell’AEM consente la creazione di contenuti modulari, migliorando la coerenza e l’adattabilità.

Innanzitutto, ti guideremo attraverso l’abilitazione dei frammenti di contenuto in AEM, coprendo le configurazioni e le impostazioni necessarie per un’integrazione fluida.

Vengono quindi descritti la creazione di modelli per frammenti, che definiscono struttura e attributi. Scopri come progettare modelli allineati ai requisiti di contenuto e gestirli in modo efficace.

Quindi, verrà fornita una dimostrazione della creazione di frammenti di contenuto dai modelli, con istruzioni dettagliate sull’authoring e la pubblicazione.

Inoltre, esploreremo la definizione degli endpoint AEM-GraphQL. GraphQL recupera in modo efficiente i dati dall’AEM e configurerà gli endpoint per esporre i dati desiderati. Le query persistenti ottimizzano le prestazioni e la memorizzazione in cache.

Nel corso dell’esercitazione forniremo spiegazioni, esempi di codice e suggerimenti pratici. Entro la fine, avrai le competenze necessarie per abilitare Frammenti di contenuto, creare Modelli di frammenti, generare Frammenti e definire endpoint GraphQL AEM e query persistenti. Iniziamo!

Configurazione in base al contesto

  1. Passa a Strumenti > Browser configurazioni per creare una configurazione per l'esperienza headless.

    Crea cartella

    Specifica un titolo e un nome, quindi seleziona Query GraphQL persistenti e Modelli per frammenti di contenuto.

Modelli per frammenti di contenuto

  1. Passa a Strumenti > Modelli per frammenti di contenuto e seleziona la cartella con il nome della configurazione creata al passaggio 1.

    Cartella modelli

  2. Nella cartella, seleziona Crea e denomina il modello Teaser. Aggiungi i seguenti tipi di dati al modello Teaser.

    table 0-row-4 1-row-4 2-row-4 3-row-4 4-row-4 5-row-4
    Tipo di dati Nome Obbligatorio Opzioni
    Riferimento contenuto Risorsa sì Se lo desideri, aggiungi un’immagine predefinita. Esempio: /content/dam/wknd-headless/assets/AdobeStock_307513975.mp4
    Testo su riga singola Titolo sì
    Testo su riga singola Pre-titolo no
    Testo su più righe Descrizione no Assicurati che il tipo predefinito sia RTF
    Enumerazione Stile sì Menu a discesa Rendering come. Le opzioni sono Eroe -> protagonista e In primo piano -> in primo piano

    Modello teaser

  3. Nella cartella, crea un secondo modello denominato Offerta. Fai clic su Crea e assegna al modello il nome "Offerta" e aggiungi i seguenti tipi di dati:

    table 0-row-4 1-row-4 2-row-4 3-row-4
    Tipo di dati Nome Obbligatorio Opzioni
    Riferimento contenuto Risorsa sì Aggiungi immagine predefinita. Esempio: /content/dam/wknd-headless/assets/AdobeStock_238607111.jpeg
    Testo su più righe Descrizione no
    Testo su più righe Articolo no

    Modello di offerta

  4. All'interno della cartella, crea un terzo modello denominato Elenco immagini. Fai clic su Crea e assegna al modello il nome "Elenco immagini" e aggiungi i seguenti tipi di dati:

    table 0-row-4 1-row-4
    Tipo di dati Nome Obbligatorio Opzioni
    Riferimento frammento Elementi di elenco sì Esegui rendering come campo multiplo. Il modello per frammenti di contenuto consentito è Offerta.

    Modello elenco immagini

Frammenti di contenuto

  1. Passa ora ad Assets e crea una cartella per il nuovo sito. Fai clic su Crea e assegna un nome alla cartella.

    Aggiungi cartella

  2. Dopo aver creato la cartella, selezionala e apri le relative proprietà.

  3. Nella scheda Configurazioni cloud della cartella, seleziona la configurazione creata in precedenza.

    Configurazione cloud AEM headless cartella risorse

    Fai clic su nella nuova cartella e crea un teaser. Fai clic su Crea e Frammento di contenuto e seleziona il modello Teaser. Denomina il modello Hero e fai clic su Crea.

    table 0-row-2 1-row-2 2-row-2 3-row-2 4-row-2 5-row-2
    Nome Note
    Risorsa Lascia come valore predefinito o scegli un’altra risorsa (video o immagine)
    Titolo Explore. Discover. Live.
    Pre-titolo Join use for your next adventure.
    Descrizione Lascia vuoto
    Stile Hero

    frammento hero

Endpoint GraphQL

  1. Passa a Strumenti > GraphQL

    GraphiQL AEM

  2. Fai clic su Crea, assegna un nome al nuovo endpoint e scegli la configurazione appena creata.

    Endpoint GraphQL headless AEM

Query persistenti GraphQL

  1. Testiamo il nuovo endpoint. Passa a Strumenti > GraphQL Query Editor e scegli il nostro endpoint per il menu a discesa in alto a destra nella finestra.

  2. Nell’editor delle query, crea alcune query diverse.

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

    Dovresti ottenere un elenco contenente il singolo frammento creato sopra.

    Per questo esercizio, crea una query completa utilizzata dall’app AEM headless. Crea una query che restituisce un singolo teaser per percorso. Nell’editor delle query, immetti la seguente query:

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

    Nell'input variabili query in basso, immettere:

    code language-json 
    {
    "path": "/content/dam/pure-headless/hero"
}
    note note
    NOTE
    Potrebbe essere necessario modificare la variabile di query path in base ai nomi della cartella e del frammento.

    Esegui la query per ricevere i risultati del frammento di contenuto creato in precedenza.

  3. Fai clic su Salva per salvare la query in modo permanente e denominarla teaser. Questo consente di fare riferimento alla query per nome nell’applicazione.

Passaggi successivi

Congratulazioni Hai configurato correttamente AEM as a Cloud Service per consentire la creazione di frammenti di contenuto ed endpoint GraphQL. Hai anche creato un modello per frammenti di contenuto e un frammento di contenuto, definito un endpoint GraphQL e una query persistente. Ora puoi passare al prossimo capitolo dell’esercitazione, dove scoprirai come creare un’applicazione AEM Headless React che utilizza i frammenti di contenuto e l’endpoint GraphQL creati in questo capitolo.

Prossimo capitolo: API headless AEM e React

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