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變數需要地區設定代碼（例如en、en_us或de），如AEM資產資料夾基礎本地化慣例中所指定。
React範例
讓我們建立一個簡單的React應用程式，該應用程式使用_locale篩選器，根據地區設定選擇器，控制要從AEM查詢哪些Adventure內容。
在地區設定選取器中選取 英文 時，會傳回/content/dam/wknd/en下的英文冒險內容片段；選取 西班牙文 時，則會傳回/content/dam/wknd/es下的西班牙文內容片段，依此類推。
建立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>
);
}