AEM Headless的本地化内容
AEM为Headless内容提供了翻译集成框架，允许轻松翻译内容片段和支持资源以供跨区域设置使用。 该框架与用于翻译其他AEM内容(如页面、体验片段、Assets和Forms)的框架相同。 在翻译Headless内容并发布后，便可以供Headless应用程序使用。
Assets文件夹结构 assets-folder-structure
确保AEM中的本地化内容片段遵循建议的本地化结构。
区域设置文件夹必须是同级，并且文件夹名称（而不是标题）必须是表示文件夹中所包含内容区域设置的有效ISO 639-1代码。
区域设置代码也是用于筛选GraphQL查询返回的内容片段的值。
GraphQL持久查询
AEM提供了一个_locale GraphQL筛选器，可按区域设置代码自动筛选内容。 例如，查询WKND站点项目中的所有英语冒险可以使用定义为：wknd-shared/adventures-by-locale
query($locale: String!) {
adventureList(_locale: $locale) {
items {
_path
title
}
}
}
_locale筛选器中使用的$locale变量需要AEM基于资产文件夹的本地化约定中指定的区域设置代码（例如en、en_us或de）。
React示例
让我们创建一个简单的React应用程序，该应用程序使用_locale过滤器根据区域设置选择器控制要从AEM查询哪些Adventure内容。
在区域设置选择器中选择 English 时，将返回/content/dam/wknd/en下的English Adventure内容片段；选择 Spanish 时，将返回/content/dam/wknd/es下的Spanish内容片段，依此类推。
创建LocaleContext
首先，创建一个React上下文，以允许在React应用程序的组件中使用区域设置。
// src/LocaleContext.js
import React from 'react'
const DEFAULT_LOCALE = 'en';
const LocaleContext = React.createContext({
locale: DEFAULT_LOCALE,
setLocale: () => {}
});
export default LocaleContext;
创建LocaleSwitcher React组件 locale-switcher
接下来，创建一个区域设置切换器React组件，该组件将LocaleContext的值设置为用户的选择。
此区域设置值用于驱动GraphQL查询，确保它们仅返回与所选区域设置相匹配的内容。
// 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筛选器查询内容 adventures
Adventures组件按区域设置查询AEM的所有冒险并列出其标题。 这是通过使用_locale过滤器将React上下文中存储的区域设置值传递给查询来实现的。
此方法可以扩展到应用程序中的其他查询，确保所有查询仅包含由用户的区域设置选择指定的内容。
对AEM的查询在自定义React挂接getAdventuresByLocale中执行，有关更多详细信息，请参阅“查询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>
)
}
定义App.js
最后，通过使用LanguageContext.Provider封装React应用程序并设置区域设置值，将其全部连接在一起。 这允许其他React组件LocaleSwitcher和Adventures共享区域设置选择状态。
// 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>
);
}