DocumentationAEMTutoriels AEMTutoriel d’AEM Headless

Modéliser du contenu

Last update: Mon Jan 29 2024 00:00:00 GMT+0000 (Coordinated Universal Time)

Créé pour :

  • Intermediate
  • Developer

Bienvenue dans le chapitre du tutoriel sur les fragments de contenu et les points d’entrée GraphQL dans Adobe Experience Manager (AEM). Nous aborderons l’exploitation de fragments de contenu, la création de modèles de fragment et l’utilisation de points d’entrée GraphQL dans AEM.

Les fragments de contenu offrent une approche structurée de la gestion du contenu sur tous les canaux, offrant ainsi flexibilité et réutilisation. L’activation des fragments de contenu dans AEM permet la création de contenu modulaire, ce qui améliore la cohérence et l’adaptabilité.

Tout d’abord, nous vous guiderons tout au long de l’activation des fragments de contenu dans AEM, en abordant les configurations et paramètres nécessaires à une intégration transparente.

Nous allons ensuite aborder la création de modèles de fragment, qui définissent la structure et les attributs. Découvrez comment concevoir des modèles conformes à vos exigences en matière de contenu et les gérer efficacement.

Ensuite, nous allons démontrer la création de fragments de contenu à partir des modèles, en fournissant des conseils détaillés concernant la création et la publication.

En outre, nous allons explorer la définition des points d’entrée GraphQL AEM. GraphQL récupère efficacement les données d’AEM et nous configurerons des points d’entrée pour exposer les données souhaitées. Les requêtes persistantes optimisent les performances et la mise en cache.

Tout au long du tutoriel, nous vous proposons des explications, des exemples de code et des conseils pratiques. À la fin de ce tutoriel, vous disposerez des compétences nécessaires pour activer les fragments de contenu, créer des modèles de fragment, générer des fragments et définir des points d’entrée GraphQL AEM et des requêtes persistantes. Commençons.

Configuration tenant compte du contexte

  1. Accédez à Outils > Explorateur de configurations pour créer une configuration pour l’expérience découplée.

    Création d’un dossier.

    Fournissez un titre et un nom, et cochez Requêtes persistantes GraphQL et Modèles de fragment de contenu.

Modèles de fragment de contenu

  1. Accédez à Outils > Modèles de fragment de contenu et sélectionnez le dossier avec le nom de la configuration créée à l’étape 1.

    Dossier de modèle.

  2. Dans le dossier, sélectionnez Créer et donnez au modèle le nom Teaser. Ajoutez les types de données suivants au modèle Teaser.

    table 0-row-4 1-row-4 2-row-4 3-row-4 4-row-4 5-row-4
    Type de données Nom Requis Options
    Référence de contenu Ressource Oui Ajoutez une image par défaut si vous le souhaitez. Par exemple : /content/dam/wknd-headless/assets/AdobeStock_307513975.mp4.
    Une seule ligne de texte Titre Oui
    Texte monoligne Pré-titre Non
    Texte multiligne Description Non Assurez-vous que le type par défaut est de texte enrichi.
    Énumération Style Oui Effectuez le rendu sous forme de liste déroulante. Les options sont Héros -> Héros et En vedette -> En vedette.

    Modèle Teaser.

  3. Dans le dossier, créez un deuxième modèle nommé Offre. Cliquez sur Créer et donnez au modèle le nom « Offre » et ajoutez les types de données suivants :

    table 0-row-4 1-row-4 2-row-4 3-row-4
    Type de données Nom Requis Options
    Référence de contenu Ressource Oui Ajoutez une image par défaut. Exemple : /content/dam/wknd-headless/assets/AdobeStock_238607111.jpeg
    Texte multiligne Description Non
    Texte multiligne Article Non

    Modèle Offre.

  4. Dans le dossier, créez un troisième modèle nommé Liste des images. Cliquez sur Créer et donnez au modèle le nom « Liste des images » et ajoutez les types de données suivants :

    table 0-row-4 1-row-4
    Type de données Nom Requis Options
    Référence du fragment Énumérer les éléments Oui Effectuer le rendu sous la forme de champ multiple. Le modèle de fragment de contenu autorisé est Offre.

    Modèle Liste des images.

Fragments de contenu

  1. Accédez maintenant à Assets et créez un dossier pour le nouveau site. Cliquez sur créer et nommez le dossier.

    Ajout d’un dossier.

  2. Une fois le dossier créé, sélectionnez-le et ouvrez ses Propriétés.

  3. Dans l’onglet Configurations cloud du dossier, sélectionnez la configuration créée précédemment.

    Configuration cloud AEM Headless de dossier de ressources.

    Cliquez dans le nouveau dossier et créez un teaser. Cliquez sur Créer et Fragment de contenu et sélectionnez le modèle Teaser. Nommez le modèle Héros et cliquez sur Créer.

    table 0-row-2 1-row-2 2-row-2 3-row-2 4-row-2 5-row-2
    Nom Remarques
    Ressource Laissez comme valeur par défaut ou choisissez une autre ressource (vidéo ou image).
    Titre Explore. Discover. Live.
    Pré-titre Join use for your next adventure.
    Description Laissez vide.
    Style Hero

    Fragment héros.

Points d’entrée GraphQL

  1. Accédez à Outils > GraphQL.

    AEM GraphiQL.

  2. Cliquez sur Créer et donnez un nom au nouveau point d’entrée, puis choisissez la configuration nouvellement créée.

    Point d’entrée GraphQL AEM Headless.

Requêtes persistantes GraphQL

  1. Testons le nouveau point d’entrée. Accédez à Outils > Éditeur de requêtes GraphQL et sélectionnez notre point d’entrée dans la liste déroulante en haut à droite de la fenêtre.

  2. Dans l’éditeur de requêtes, créez quelques requêtes différentes.

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

    Vous devriez obtenir une liste contenant le fragment unique créé plus haut.

    Pour cet exercice, créez une requête complète utilisée par l’application AEM Headless. Créez une requête qui renvoie un seul teaser par chemin d’accès. Dans l’éditeur de requêtes, saisissez la requête suivante :

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

    Dans l’entrée Variables de requête en bas, saisissez ce qui suit :

    code language-json 
    {
    "path": "/content/dam/pure-headless/hero"
}
    note note
    NOTE
    Vous devrez peut-être ajuster la variable de requête path en fonction des noms des dossiers et des fragments.

    Exécutez la requête pour recevoir les résultats du fragment de contenu créé précédemment.

  3. Cliquez sur Enregistrer pour conserver (enregistrer) la requête et donnez-lui le nom teaser. Cela nous permet de référencer la requête par nom dans l’application.

Étapes suivantes

Félicitations. Vous avez correctement configuré AEM as a Cloud Service pour permettre la création de fragments de contenu et de points d’entrée GraphQL. Vous avez également créé un modèle de fragment de contenu et un fragment de contenu, défini un point d’entrée GraphQL et une requête persistante. Vous pouvez maintenant passer au chapitre suivant du tutoriel, où vous apprendrez à créer une application React AEM Headless qui consomme les fragments de contenu et le point d’entrée GraphQL que vous avez créés dans ce chapitre.

Chapitre suivant : API AEM Headless et React

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