Contenuto localizzato con AEM headless
L'AEM fornisce Framework integrazione traduzione per contenuti headless, che consentono di tradurre facilmente frammenti di contenuto e risorse di supporto per l’utilizzo in più lingue. Si tratta dello stesso framework utilizzato per tradurre altri contenuti AEM, come pagine, frammenti di esperienza, risorse e Forms. Una volta il contenuto headless è stato tradotto, e pubblicato, è pronto per essere utilizzato dalle applicazioni headless.
Struttura delle cartelle di Assets assets-folder-structure
Assicurati che i Frammenti di contenuto localizzati nell’AEM seguano il struttura di localizzazione consigliata.
Le cartelle delle impostazioni locali devono essere di pari livello e il nome della cartella, anziché il titolo, deve essere valido Codice ISO 639-1 che rappresenta le impostazioni locali del contenuto contenuto della cartella.
Il codice locale è anche il valore utilizzato per filtrare i Frammenti di contenuto restituiti dalla query GraphQL.
Query persistente GraphQL
L'AEM fornisce _locale
Filtro di GraphQL che filtra automaticamente il contenuto in base al codice locale. Ad esempio, eseguendo una query su tutte le avventure in inglese nel Progetto sito WKND può essere eseguito con una nuova query persistente wknd-shared/adventures-by-locale
definito come:
query($locale: String!) {
adventureList(_locale: $locale) {
items {
_path
title
}
}
}
Il $locale
variabile utilizzata nel _locale
il filtro richiede il codice locale (ad esempio en
, en_us
, o de
) come specificato in Convenzione di localizzazione basata su cartelle di risorse AEM.
Esempio di React
Creiamo una semplice applicazione React che controlla quali contenuti Adventure eseguire query dall’AEM in base a un selettore delle impostazioni internazionali utilizzando _locale
filtro.
Quando Inglese è selezionato nel selettore delle impostazioni internazionali, quindi Frammenti di contenuto di Adventure in inglese in /content/dam/wknd/en
vengono restituiti, quando Spagnolo è selezionato, quindi Frammenti di contenuto spagnolo in /content/dam/wknd/es
e così via.
Creare un LocaleContext
Innanzitutto, crea un Contesto di React per consentire l'utilizzo delle impostazioni locali nei componenti dell'applicazione React.
// src/LocaleContext.js
import React from 'react'
const DEFAULT_LOCALE = 'en';
const LocaleContext = React.createContext({
locale: DEFAULT_LOCALE,
setLocale: () => {}
});
export default LocaleContext;
Creare un LocaleSwitcher
Componente React locale-switcher
Quindi, crea un componente React per il commutatore delle impostazioni internazionali che imposti LocaleContext alla selezione dell'utente.
Questo valore delle impostazioni locali viene utilizzato per indirizzare le query GraphQL e garantisce che restituiscano solo il contenuto corrispondente alle impostazioni locali selezionate.
// 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>
);
}
Eseguire query sul contenuto utilizzando _locale
filter adventures
Il componente Avventure richiede all’AEM tutte le avventure per lingua ed elenca i relativi titoli. Ciò si ottiene passando il valore locale memorizzato nel contesto React alla query utilizzando _locale
filtro.
Questo approccio può essere esteso ad altre query nell’applicazione, garantendo che tutte le query includano solo il contenuto specificato dalla selezione locale di un utente.
L’interrogazione contro l’AEM viene eseguita nel gancio React personalizzato getAdventuresByLocale, descritto più dettagliatamente nella sezione Query della documentazione di 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>
)
}
Definisci il App.js
Infine, legare il tutto racchiudendo l’applicazione React con la LanguageContext.Provider
e l'impostazione del valore locale. Ciò consente agli altri componenti React di: LocaleSwitcher, e Avventure per condividere lo stato di selezione delle impostazioni internazionali.
// 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>
);
}