AEM Headless를 사용한 현지화된 콘텐츠
AEM은 Headless 콘텐츠에 대한 번역 통합 프레임워크를 제공하여 콘텐츠 조각 및 지원 에셋을 로케일에서 사용하기 위해 쉽게 번역할 수 있도록 합니다. 페이지, 경험 조각, Assets 및 Forms과 같은 다른 AEM 콘텐츠를 번역하는 데 사용되는 것과 동일한 프레임워크입니다. 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 변수에는 AEM의 자산 폴더 기반 로컬라이제이션 규칙에 지정된 로케일 코드(예: en, en_us 또는 de)가 필요합니다.
React 예
_locale 필터를 사용하여 로케일 선택기를 기반으로 AEM에서 쿼리할 Adventure 콘텐츠를 제어하는 간단한 React 응용 프로그램을 만들어 보겠습니다.
로케일 선택기에서 영어 을(를) 선택하면 /content/dam/wknd/en의 영어 Adventure 콘텐츠 조각이 반환되고 스페인어 를 선택하면 /content/dam/wknd/es의 스페인어 콘텐츠 조각 등이 반환됩니다.
LocaleContext 만들기 locale-context
먼저 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
그런 다음 사용자의 선택 항목으로 LocaleContext's 값을 설정하는 로케일 전환기 React 구성 요소를 만듭니다.
이 로케일 값은 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 정의 app-js
마지막으로, 의 React 응용 프로그램을 LanguageContext.Provider(으)로 래핑하고 로케일 값을 설정하여 이 응용 프로그램을 모두 연결합니다. 이렇게 하면 다른 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>
);
}