AEM Contenido localizado con sin encabezado

AEM proporciona 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. AEM Este es el mismo marco de trabajo que se utiliza para traducir otros contenidos, 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 assets-folder-structure

AEM Asegúrese de que los fragmentos de contenido localizados en la lista de distribución de contenido de la aplicación siguen la estructura de localización recomendada.

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.

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

AEM 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 Convenciones de localización basadas en carpetas de recursos de.

Ejemplo de React

AEM Vamos a crear una aplicación React simple que controle desde qué contenido de Adventure se va a realizar la consulta 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.

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

AEM El componente Aventuras consulta las de 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.

AEM AEM La consulta contra la configuración regional se realiza en el vínculo personalizado de React getAdventuresByLocale, descrito con más detalle en la documentación de Consulta de 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>
  );
}