Lokaliserat innehåll med AEM Headless
AEM tillhandahåller en Översättningsintegreringsramverk för headless-innehåll, så att innehållsfragment och tillhörande material enkelt kan översättas för användning i olika språkområden. Detta är samma ramverk som används för att översätta annat AEM innehåll, som Sidor, Upplevelsefragment, Resurser och Forms. En gång headless content has been translated, och publiceras, är den klar att användas av headless-program.
Resursmappens struktur assets-folder-structure
Kontrollera att de lokaliserade innehållsfragmenten i AEM följer rekommenderad lokaliseringsstruktur.
Språkmapparna måste vara på samma nivå och mappnamnet, i stället för titeln, måste vara ett giltigt ISO 639-1-kod som representerar språkområdet för innehållet i mappen.
Språkinställningskoden är också det värde som används för att filtrera de innehållsfragment som returneras av GraphQL-frågan.
GraphQL beständig fråga
AEM tillhandahåller en _locale
GraphQL-filter som automatiskt filtrerar innehåll efter språkkod. Du kan till exempel ställa frågor om alla engelska äventyr i WKND-webbplatsprojekt kan utföras med en ny beständig fråga wknd-shared/adventures-by-locale
definieras som:
query($locale: String!) {
adventureList(_locale: $locale) {
items {
_path
title
}
}
}
The $locale
variabel som används i _locale
filtret kräver språkkoden (till exempel en
, en_us
, eller de
) enligt AEM lokaliseringskonvention för resursmapp.
Reaktionsexempel
Låt oss skapa ett enkelt React-program som styr vilket Adventure-innehåll som ska frågas från AEM baserat på en språkområdesväljare med _locale
filter.
När Engelska väljs i språkväljaren och sedan i Innehållsfragment för engelska Adventure under /content/dam/wknd/en
returneras, när Spanska är markerat och sedan spanska innehållsfragment under /content/dam/wknd/es
och så vidare.
Skapa en LocaleContext
Skapa först en Reaktionskontext så att språkområdet kan användas i alla React-programmets komponenter.
// src/LocaleContext.js
import React from 'react'
const DEFAULT_LOCALE = 'en';
const LocaleContext = React.createContext({
locale: DEFAULT_LOCALE,
setLocale: () => {}
});
export default LocaleContext;
Skapa en LocaleSwitcher
Reaktionskomponent locale-switcher
Skapa sedan en React-komponent för språkområdesväljaren som är LocaleContext's värdet efter användarens val.
Det här språkvärdet används för att köra GraphQL-frågor och säkerställa att de bara returnerar innehåll som matchar det valda språkområdet.
// 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>
);
}
Fråga innehåll med _locale
filter adventures
Komponenten Adventures frågar AEM efter alla äventyr efter språkområde och visar deras titlar. Detta uppnås genom att skicka språkvärdet som lagras i Reagera-kontexten till frågan med hjälp av _locale
filter.
Den här metoden kan utökas till andra frågor i programmet, så att alla frågor bara innehåller innehåll som anges av användarens språkområdesval.
Frågan mot AEM utförs i den anpassade React-kroken getAdventuresByLocale, som beskrivs mer ingående i dokumentationen 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>
)
}
Definiera App.js
Slutligen knyter man ihop allt genom att slå ihop React-programmet med LanguageContext.Provider
och ställa in språkvärdet. Detta gör att andra React-komponenter kan användas, LocaleSwitcheroch Annonser om du vill dela det lokala markeringstillståndet.
// 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>
);
}