Documentación AEM Tutoriales de AEM Tutorial de AEM sin encabezado

Contenido localizado con AEM sin encabezado

Última actualización: 5 de mayo de 2025

Se aplica a:
Experience Manager as a Cloud Service

Temas:

Creado para:

Intermedio
Desarrollador

AEM proporciona un Marco de trabajo de integración de traducciones para contenido sin encabezado, lo que permite que los fragmentos de contenido y los recursos de soporte se traduzcan fácilmente para su uso en distintas configuraciones regionales. Este es el mismo marco de trabajo que se utiliza para traducir otro contenido de AEM, como páginas, fragmentos de experiencias, Assets y Forms. Una vez que se ha traducido contenido sin encabezado y se ha publicado, está listo para que lo consuman las aplicaciones sin encabezado.

Estructura de carpetas de Assets

Asegúrese de que los fragmentos de contenido localizados en AEM sigan la estructura de localización recomendada.

Carpetas de recursos localizadas de AEM

Las carpetas de configuración regional deben ser elementos del mismo nivel y el nombre de la carpeta, en lugar del título, debe ser un código ISO 639-1 válido que represente la configuración regional del contenido incluido en la carpeta.

El código de configuración regional también es el valor utilizado para filtrar los fragmentos de contenido devueltos por la consulta de GraphQL.

Código de configuración regional	Ruta de AEM	Configuración regional de contenido
de	/content/dam/…/de/…	Contenido en alemán
en	/content/dam/…/en/…	Contenido en inglés
es	/content/dam/…/es/…	Contenido en español

Consulta persistente de GraphQL

AEM proporciona un filtro de GraphQL _locale que filtra automáticamente el contenido por código de configuración regional Por ejemplo, consultar todas las aventuras en inglés en el proyecto del sitio WKND se puede hacer con una nueva consulta persistente wknd-shared/adventures-by-locale definida como:

query($locale: String!) {
  adventureList(_locale: $locale) {
    items {
      _path
      title
    }
  }
}

La variable $locale utilizada en el filtro _locale requiere el código de configuración regional (por ejemplo en, en_us o de) especificado en la convención de localización basada en carpetas de recursos de AEM.

Ejemplo de React

Vamos a crear una aplicación React simple que controle qué contenido de Adventure consultar desde AEM en función de un selector de configuración regional usando el filtro _locale.

Cuando se selecciona English en el selector de configuración regional, se devuelven los fragmentos de contenido de aventura en inglés de /content/dam/wknd/en, cuando se selecciona Spanish, luego los fragmentos de contenido en español de /content/dam/wknd/es, etc., etc.

Aplicación de ejemplo React localizada

Crear un(a) `LocaleContext`

Primero, cree un contexto React para permitir que se use la configuración regional en los componentes de la aplicación React.

// src/LocaleContext.js

import React from 'react'

const DEFAULT_LOCALE = 'en';

const LocaleContext = React.createContext({
    locale: DEFAULT_LOCALE,
    setLocale: () => {}
});

export default LocaleContext;

Crear un componente de React `LocaleSwitcher`

A continuación, cree un componente React del conmutador de configuración regional que establezca el valor LocaleContext's en la selección del usuario.

Este valor de configuración regional se utiliza para dirigir las consultas de GraphQL, asegurándose de que solo devuelven contenido que coincida con la configuración regional seleccionada.

// src/LocaleSwitcher.js

import { useContext } from "react";
import LocaleContext from "./LocaleContext";

export default function LocaleSwitcher() {
  const { locale, setLocale } = useContext(LocaleContext);

  return (
    <select value={locale}
            onChange={e => setLocale(e.target.value)}>
      <option value="de">Deutsch</option>
      <option value="en">English</option>
      <option value="es">Español</option>
    </select>
  );
}

Consultar contenido mediante el filtro `_locale`

El componente Aventuras consulta AEM todas las aventuras por configuración regional y enumera sus títulos. Esto se logra pasando el valor de configuración regional almacenado en el contexto de React a la consulta mediante el filtro _locale.

Este método se puede ampliar a otras consultas de la aplicación, asegurándose de que todas las consultas incluyan únicamente el contenido especificado por la configuración regional seleccionada por el usuario.

La consulta a AEM se realiza en el vínculo personalizado de React getAdventuresByLocale, que se describe con más detalle en la sección Consulta de la documentación de AEM GraphQL.

// src/Adventures.js

import { useContext } from "react"
import { useAdventuresByLocale } from './api/persistedQueries'
import LocaleContext from './LocaleContext'

export default function Adventures() {
    const { locale } = useContext(LocaleContext);

    // Get data from AEM using GraphQL persisted query as defined above
    // The details of defining a React useEffect hook are explored in How to > AEM Headless SDK
    let { data, error } = useAdventuresByLocale(locale);

    return (
        <ul>
            {data?.adventureList?.items?.map((adventure, index) => {
                return <li key={index}>{adventure.title}</li>
            })}
        </ul>
    )
}

Definir `App.js`

Por último, vincule todo ajustando la aplicación React con LanguageContext.Provider y estableciendo el valor de configuración regional. Esto permite que los demás componentes de React, LocaleSwitcher y Adventures, compartan el estado de selección de configuración regional.

// src/App.js

import { useState, useContext } from "react";
import LocaleContext from "./LocaleContext";
import LocaleSwitcher from "./LocaleSwitcher";
import Adventures from "./Adventures";

export default function App() {
  const [locale, setLocale] = useState(useContext(LocaleContext).locale);

  return (
    <LocaleContext.Provider value={{locale, setLocale}}>
      <LocaleSwitcher />
      <Adventures />
    </LocaleContext.Provider>
  );
}

recommendation-more-help

Contenido localizado con AEM sin encabezado

Estructura de carpetas de Assets

Consulta persistente de GraphQL

Ejemplo de React

Crear un(a) LocaleContext

Crear un componente de React LocaleSwitcher

Consultar contenido mediante el filtro _locale

Definir App.js

Crear un(a) `LocaleContext`

Crear un componente de React `LocaleSwitcher`

Consultar contenido mediante el filtro `_locale`

Definir `App.js`