AEM Headless本地化內容

上次更新: 2024-01-26
  • 主題:
  • GraphQL API
    檢視有關此主題的更多資訊
  • 建立對象:
  • Intermediate
    Developer

AEM提供 翻譯整合框架 針對Headless內容,可讓您輕鬆翻譯內容片段和支援資產,以便用於各種地區設定。 這是用於翻譯其他AEM內容(例如頁面、體驗片段、資產和Forms)的相同架構。 一次 headless內容已翻譯和發佈後,即可供Headless應用程式使用。

資產檔案夾結構

確保AEM中的本地化內容片段遵循 建議的本地化結構.

本地化的AEM資產資料夾

地區設定資料夾必須是同層級資料夾,而且資料夾名稱(而非標題)必須是有效的名稱 ISO 639-1程式碼 代表資料夾中所包含內容的地區設定。

地區設定代碼也是用於篩選GraphQL查詢傳回的內容片段的值。

地區代碼 AEM路徑 內容地區設定
de /content/dam/…/de/… 德文內容
en /content/dam/…/en/… 英文內容
es /content/dam/…/es/… 西班牙文內容

GraphQL持續查詢

AEM提供 _locale GraphQL篩選器,可依地區設定代碼自動篩選內容。 例如,查詢 wknd網站專案 可以使用新的持久查詢完成 wknd-shared/adventures-by-locale 定義為:

query($locale: String!) {
  adventureList(_locale: $locale) {
    items {
      _path
      title
    }
  }
}

$locale 變數用於 _locale 篩選器需要地區設定代碼(例如 enen_us,或 de),如 AEM資產資料夾基礎本地化慣例.

React範例

讓我們建立一個簡單的React應用程式,該應用程式使用根據地區設定選擇器,控制要從AEM查詢哪些Adventure內容。 _locale 篩選。

時間 英文 在地區設定選擇器中選擇,然後在 /content/dam/wknd/en 於下列情況時傳回: 西班牙文 選取「 」,然後選取「 」下的「西班牙文內容片段」 /content/dam/wknd/es,以此類推。

本地化React範例應用程式

建立 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元件

接下來,建立地區設定切換器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元件會依地區設定查詢AEM的所有冒險並列出其標題。 這是透過使用將儲存在React內容中的地區設定值傳遞給查詢來達成 _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>
  );
}

本頁內容