AEM提供 翻译集成框架 对于无标题内容,允许轻松翻译内容片段和支持资产以跨区域设置使用。 这是用于翻译其他AEM内容(如页面、体验片段、资产和Forms)的相同框架。 一次 无标题内容已翻译,且已发布,则可供无头应用程序使用。
确保AEM中的本地化内容片段在 推荐的本地化结构.
区域设置文件夹必须是同级文件夹,并且文件夹名称(而不是标题)必须有效 ISO 639-1代码 表示文件夹中包含的内容的区域设置。
区域设置代码也是用于筛选GraphQL查询返回的内容片段的值。
区域设置代码 | AEM路径 | 内容区域设置 |
---|---|---|
de | /content/dam/…/de/… | 德语内容 |
en | /content/dam/…/en/… | 英语内容 |
es | /content/dam/…/es/… | 西班牙语内容 |
AEM提供 _locale
可按区域设置代码自动筛选内容的GraphQL过滤器。 例如,查询 WKND参考演示项目 可以使用新的保留查询完成 wknd-shared/adventures-by-locale
定义为:
query($locale: String!) {
adventureList(_locale: $locale) {
items {
_path
title
}
}
}
的 $locale
变量 _locale
筛选器需要区域设置代码(例如 en
, en_us
或 de
) AEM资产文件夹基础本地化约定.
让我们创建一个简单的React应用程序,该应用程序可根据使用的区域设置选择器,控制要从AEM中查询的Adventure内容 _locale
过滤器。
When 英语 在区域设置选择器中进行选择,然后在 /content/dam/wknd/en
返回时 西班牙语 ,然后选择下的西班牙文内容片段 /content/dam/wknd/es
、等等。
LocaleContext
首先,创建 React context 以允许在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组件接下来,创建一个区域设置切换器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
过滤器冒险组件按区域设置查询AEM的所有冒险,并列出其标题。 这是通过使用 _locale
过滤器。
此方法可以扩展到您应用程序中的其他查询,从而确保所有查询仅包含用户区域设置选择指定的内容。
对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
最后,将React应用程序封装在中,并将其与 LanguageContext.Provider
和设置区域设置值。 这允许其他React组件, 区域设置切换器和 冒险 共享区域设置选择状态。
// 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>
);
}