AEM Contenido localizado con sin encabezado

AEM proporciona un Marco de integración de traducción 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 varias configuraciones regionales. AEM Este es el mismo marco de trabajo que se utiliza para traducir otro contenido, como páginas, fragmentos de experiencias, recursos y Forms. Una se ha traducido el contenido sin encabezado, y publicado, está listo para su consumo por aplicaciones sin encabezado.

Estructura de carpetas de recursos assets-folder-structure

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

AEM Carpetas de recursos localizadas de la

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 válido Código ISO 639-1 que representa la configuración regional del contenido contenido de 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
AEM ruta de acceso de la
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 _locale Filtro de GraphQL que filtra automáticamente el contenido por código de configuración regional Por ejemplo, consultar todas las aventuras en inglés en la Proyecto del sitio WKND se puede hacer con una nueva consulta persistente wknd-shared/adventures-by-locale definido como:

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

El $locale utilizada en la variable _locale Este filtro requiere el código de configuración regional (por ejemplo, en, en_us, o de) según se especifica en AEM convención de localización basada en carpetas de recursos.

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 la variable _locale filtro.

Cuándo Inglés se selecciona en el selector de configuración regional y, a continuación, Fragmentos de contenido de aventura en inglés en /content/dam/wknd/en se devuelven, cuando Español se selecciona y luego Fragmentos de contenido en español en /content/dam/wknd/es, etc., etc.

Aplicación de ejemplo React localizada

Crear un LocaleContext

En primer lugar, cree un Contexto de React para permitir que la configuración regional se utilice 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 LocaleSwitcher Componente React locale-switcher

A continuación, cree un componente React del conmutador de configuración regional que establezca en El contexto local a 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>
  );
}

Consulte el contenido mediante _locale filter adventures

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 utilizando _locale filtro.

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 La consulta contra la se realiza en el vínculo React personalizado AEM 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>
    )
}

Defina el App.js

Por último, enlácelo todo envolviendo la aplicación React con el LanguageContext.Provider y establecer el valor de configuración regional. Esto permite a los demás componentes de React, LocaleSwitcher, y Aventuras para compartir el estado de selección de la 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
e25b6834-e87f-4ff3-ba56-4cd16cdfdec4