使用AEM Headless的本地化内容

AEM提供 翻译集成框架 对于无标题内容,允许轻松翻译内容片段和支持资产以跨区域设置使用。 这是用于翻译其他AEM内容(如页面、体验片段、资产和Forms)的相同框架。 一次 无标题内容已翻译,且已发布,则可供无头应用程序使用。

资产文件夹结构

确保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 筛选器需要区域设置代码(例如 en, en_usde) AEM资产文件夹基础本地化约定.

React示例

让我们创建一个简单的React应用程序,该应用程序可根据使用的区域设置选择器,控制要从AEM中查询的Adventure内容 _locale 过滤器。

When 英语 在区域设置选择器中进行选择,然后在 /content/dam/wknd/en 返回时 西班牙语 ,然后选择下的西班牙文内容片段 /content/dam/wknd/es、等等。

本地化的React示例应用程序

创建 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>
  );
}

在此页面上