Modelado de contenido

Le damos la bienvenida al capítulo del tutorial sobre fragmentos de contenido y puntos finales de GraphQL en Adobe Experience Manager AEM (). Cubriremos el uso de los fragmentos de contenido, la creación de modelos de fragmentos y el uso de puntos finales de GraphQL AEM en la creación de segmentos de segmentos de contenido de la red de distribución de contenido ().

Los fragmentos de contenido ofrecen un enfoque estructurado para administrar el contenido en varios canales, lo que proporciona flexibilidad y reutilización. AEM Al habilitar los fragmentos de contenido en, se permite la creación de contenido modular en, lo que mejora la coherencia y la adaptabilidad.

AEM En primer lugar, le guiaremos a través de la activación de los fragmentos de contenido en la, que cubren las configuraciones y los ajustes necesarios para una integración sin problemas.

A continuación, se explica la creación de modelos de fragmento, que definen la estructura y los atributos. Aprenda a diseñar modelos alineados con los requisitos de contenido y a administrarlos de forma eficaz.

A continuación, se mostrará la creación de fragmentos de contenido a partir de los modelos, con instrucciones paso a paso para la creación y publicación.

AEM Además, exploraremos la definición de puntos finales de GraphQL de la. GraphQL AEM recupera de forma eficaz los datos de los usuarios y configuraremos los puntos de conexión para exponer los datos deseados. Las consultas persistentes optimizarán el rendimiento y el almacenamiento en caché.

A lo largo del tutorial, proporcionaremos explicaciones, ejemplos de código y sugerencias prácticas. AEM Al final, tendrá las habilidades para habilitar fragmentos de contenido, crear modelos de fragmentos, generar fragmentos y definir puntos finales de GraphQL y consultas persistentes de la forma más rápida y eficaz. ¡Vamos a empezar!

Configuración según el contexto

  1. Vaya a Herramientas > Explorador de configuración para crear una configuración para la experiencia sin encabezado.

    Crear carpeta

    Proporcione un título y nombre, y compruebe Consultas persistentes de GraphQL y Modelos de fragmentos de contenido.

Modelos de fragmento de contenido

  1. Vaya a Herramientas > Modelos de fragmento de contenido y seleccione la carpeta con el nombre de la configuración creada en el paso 1.

    Carpeta de modelo

  2. Dentro de la carpeta, seleccione Crear y asigne un nombre al modelo Teaser. Agregue los siguientes tipos de datos al modelo Teaser.

    table 0-row-4 1-row-4 2-row-4 3-row-4 4-row-4 5-row-4
    Tipo de datos Nombre Requerido Opciones
    Referencia de contenido Recurso Si lo desea, añada una imagen predeterminada. Ejemplo: /content/dam/wknd-headless/assets/AdobeStock_307513975.mp4
    Texto de línea única Título
    Texto de línea única Pre-Title no
    Texto multilínea Descripción no Asegúrese de que el tipo predeterminado sea texto enriquecido
    Lista desglosada Estilo Procesar como menú desplegable. Las opciones son Hero -> Hero y Destacado -> destacado

    Modelo teaser

  3. Dentro de la carpeta, cree un segundo modelo llamado Oferta. Haga clic en Crear y asigne al modelo el nombre "Oferta" y añada los siguientes tipos de datos:

    table 0-row-4 1-row-4 2-row-4 3-row-4
    Tipo de datos Nombre Requerido Opciones
    Referencia de contenido Recurso Agregar imagen predeterminada. Ejemplo: /content/dam/wknd-headless/assets/AdobeStock_238607111.jpeg
    Texto multilínea Descripción no
    Texto multilínea Artículo no

    Modelo de oferta

  4. Dentro de la carpeta, cree un tercer modelo denominado Lista de imágenes. Haga clic en Crear y asigne al modelo el nombre "Lista de imágenes" y añada los siguientes tipos de datos:

    table 0-row-4 1-row-4
    Tipo de datos Nombre Requerido Opciones
    Referencia al fragmento Elementos de la lista Procesar como campo múltiple. El modelo de fragmento de contenido permitido es Oferta.

    Modelo de lista de imágenes

Fragmentos de contenido

  1. Ahora, vaya a Assets y cree una carpeta para el nuevo sitio. Haga clic en crear y asigne un nombre a la carpeta.

    Agregar carpeta

  2. Una vez creada la carpeta, selecciónela y abra sus Propiedades.

  3. En la ficha Configuraciones en la nube de la carpeta, seleccione la configuración creada anteriormente.

    AEM Configuración de nube de la carpeta de recursos sin encabezado

    Haga clic en la carpeta nueva y cree un teaser. Haga clic en Crear y en Fragmento de contenido y seleccione el modelo Teaser. Asigne un nombre al modelo Hero y haga clic en Crear.

    table 0-row-2 1-row-2 2-row-2 3-row-2 4-row-2 5-row-2
    Nombre Notas
    Recurso Deje como valor predeterminado o elija un recurso diferente (vídeo o imagen)
    Título Explore. Discover. Live.
    Pre-Title Join use for your next adventure.
    Descripción Dejar en blanco
    Estilo Hero

    fragmento a pantalla completa

Extremos de GraphQL

  1. Vaya a Herramientas > GraphQL

    AEM GraphiQL

  2. Haga clic en Crear, asigne un nombre al nuevo extremo y elija la configuración recién creada.

    AEM Extremo de GraphQL sin encabezado

Consultas persistentes de GraphQL

  1. Vamos a probar el nuevo punto final. Vaya a Herramientas > Editor de consultas de GraphQL y elija el punto final en la lista desplegable de la parte superior derecha de la ventana.

  2. En el editor de consultas, cree algunas consultas diferentes.

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

    Debe obtener una lista que contenga el fragmento único creado arriba.

    AEM Para este ejercicio, cree una consulta completa que utilice la aplicación sin encabezado de la aplicación de la. Cree una consulta que devuelva un solo teaser por ruta. En el editor de consultas, introduzca la siguiente consulta:

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

    En la entrada variables de consulta de la parte inferior, escriba:

    code language-json
    {
        "path": "/content/dam/pure-headless/hero"
    }
    
    note note
    NOTE
    Es posible que necesite ajustar la variable de consulta path en función de los nombres de carpeta y fragmento.

    Ejecute la consulta para recibir los resultados del fragmento de contenido creado anteriormente.

  3. Haga clic en Guardar para mantener (guardar) la consulta y asigne un nombre a la consulta teaser. Esto nos permite hacer referencia a la consulta por su nombre en la aplicación.

Pasos siguientes

Enhorabuena. Ha configurado correctamente AEM as a Cloud Service para permitir la creación de fragmentos de contenido y extremos de GraphQL. También ha creado un modelo de fragmento de contenido y un fragmento de contenido, y ha definido un punto final de GraphQL y una consulta persistente. AEM Ya está listo para pasar al siguiente capítulo del tutorial, donde aprenderá a crear una aplicación de React sin encabezado que consuma los fragmentos de contenido y el punto de conexión de GraphQL creados en este capítulo.

AEM Capítulo siguiente: API sin encabezado de y React

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