AEM Headless를 사용한 현지화된 콘텐츠
AEM에서 다음을 제공합니다. 번역 통합 프레임워크 headless 콘텐츠의 경우 콘텐츠 조각 및 지원 에셋을 로케일에서 사용하기 위해 쉽게 번역할 수 있도록 합니다. 페이지, 경험 조각, 에셋 및 Forms과 같은 다른 AEM 콘텐츠를 번역하는 데 사용되는 것과 동일한 프레임워크입니다. 한 번 헤드리스 콘텐츠 번역됨, 그리고 게시되어 headless 애플리케이션에서 사용할 준비가 되었습니다.
에셋 폴더 구조 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 예
를 사용하여 로케일 선택기를 기반으로 AEM에서 쿼리할 Adventure 콘텐츠를 제어하는 간단한 React 애플리케이션을 만들어 보겠습니다. _locale 필터.
날짜 영어 로케일 선택기에서 영어 Adventure Content Fragments가 /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 구성 요소 반응 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
모험 구성 요소는 모든 모험을 로케일별로 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>
);
}