AEM bietet eine Framework für die Übersetzungsintegration für Headless-Inhalte, sodass Inhaltsfragmente und unterstützende Assets einfach übersetzt werden können, damit sie in verschiedenen Gebietsschemata verwendet werden können. Hierbei handelt es sich um dasselbe Framework, mit dem andere AEM Inhalte wie Seiten, Experience Fragments, Assets und Forms übersetzt werden. Einmal Headless-Inhalt wurde übersetztund veröffentlicht wurde, ist es für den Verbrauch durch Headless-Anwendungen bereit.
Stellen Sie sicher, dass die lokalisierten Inhaltsfragmente in AEM dem empfohlene Lokalisierungsstruktur.
Die Gebietsschemaordner müssen gleichrangige Ordner sein, und der Ordnername muss ein gültiger Ordnername und nicht der Titel sein. ISO 639-1-Code das Gebietsschema des im Ordner enthaltenen Inhalts darstellt.
Der Gebietsschema-Code ist auch der Wert, der zum Filtern der von der GraphQL-Abfrage zurückgegebenen Inhaltsfragmente verwendet wird.
Gebietsschema-Code | AEM | Gebietsschema für Inhalte |
---|---|---|
de | /content/dam/…/de/… | Deutscher Inhalt |
en | /content/dam/…/en/… | englischer Inhalt |
es | /content/dam/…/es/… | Spanischer Inhalt |
AEM bietet eine _locale
GraphQL-Filter, der Inhalte automatisch nach Gebietsschema-Code filtert. Beispielsweise können Sie alle englischen Abenteuer im WKND-Referenz-Demoprojekt kann mit einer neuen persistenten Abfrage durchgeführt werden wknd-shared/adventures-by-locale
definiert als:
query($locale: String!) {
adventureList(_locale: $locale) {
items {
_path
title
}
}
}
Die $locale
in der Variablen _locale
-Filter erfordert den Gebietsschema-Code (z. B. en
, en_us
oder de
) wie in angegeben Lokalisierungskonvention für Asset-Ordner AEM.
Erstellen wir eine einfache React-Anwendung, die steuert, welche Abenteuer-Inhalte von AEM basierend auf einem Gebietsschema-Selektor mithilfe der _locale
Filter.
Wann englisch wird in der Gebietsschema-Auswahl ausgewählt, dann unter "Englisch Adventure Content Fragments" /content/dam/wknd/en
zurückgegeben werden, wenn spanisch ausgewählt ist, wird Spanische Inhaltsfragmente unter /content/dam/wknd/es
usw. usw.
LocaleContext
Erstellen Sie zunächst eine React-Kontext , damit das Gebietsschema über die Komponenten der React-Anwendung hinweg verwendet werden kann.
// src/LocaleContext.js
import React from 'react'
const DEFAULT_LOCALE = 'en';
const LocaleContext = React.createContext({
locale: DEFAULT_LOCALE,
setLocale: () => {}
});
export default LocaleContext;
LocaleSwitcher
React-KomponenteAls Nächstes erstellen Sie eine React-Komponente mit dem Gebietsschema-Umschalter, die als LocaleContext's -Wert zur Auswahl des Benutzers hinzufügen.
Dieser Gebietsschemawert wird verwendet, um die GraphQL-Abfragen zu leiten und sicherzustellen, dass nur Inhalte zurückgegeben werden, die dem ausgewählten Gebietsschema entsprechen.
// 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>
);
}
_locale
filterDie Komponente Abenteuer fragt AEM alle Abenteuer nach Gebietsschema ab und listet deren Titel auf. Dies wird erreicht, indem der im React-Kontext gespeicherte Gebietsschemawert mithilfe der _locale
Filter.
Dieser Ansatz kann auf andere Abfragen in Ihrer Anwendung erweitert werden, um sicherzustellen, dass alle Abfragen nur Inhalte enthalten, die durch die Gebietsschema-Auswahl eines Benutzers angegeben wurden.
Die Abfrage nach AEM wird im benutzerdefinierten React-Haken ausgeführt getAdventuresByLocale, ausführlicher beschrieben in der Dokumentation AEM GraphQL-Abfrage.
// 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>
)
}
App.js
Verbinden Sie alles, indem Sie die React-Anwendung in die LanguageContext.Provider
und legen Sie den Gebietsschemawert fest. Dies ermöglicht die anderen React-Komponenten, LocaleSwitcherund Abenteuer , um den Status der Gebietsschema-Auswahl freizugeben.
// 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>
);
}