AEM Headless 애플리케이션은 통합 작성 미리보기를 지원합니다. 미리보기 경험은 AEM 작성자의 콘텐츠 조각 편집기를 사용자 지정 앱(HTTP를 통해 주소 지정 가능)에 연결하므로 미리보고 있는 콘텐츠 조각을 렌더링하는 앱에 대한 딥 링크를 사용할 수 있습니다.
콘텐츠 조각 미리보기를 사용하려면 다음 몇 가지 조건을 충족해야 합니다.
미리보기 URL, 사용 URL 표현식는 콘텐츠 조각 모델의 속성에 설정됩니다.
각 콘텐츠 조각 모델에는 미리보기 URL이 설정될 수 있습니다. 미리보기 URL은 아래 표에 나열된 URL 표현식을 사용하여 콘텐츠 조각별로 매개 변수화할 수 있습니다. 여러 URL 표현식을 단일 미리보기 URL에 사용할 수 있습니다.
URL 표현식 | 값 | |
---|---|---|
컨텐츠 조각 경로 | ${contentFragment.path} |
/content/dam/wknd-shared/en/adventures/surf-camp-bali/surf-camp-bali |
컨텐츠 조각 ID | ${contentFragment.id} |
12c34567-8901-2aa3-45b6-d7890aa1c23c |
컨텐츠 조각 변형 | ${contentFragment.variation} |
main |
콘텐츠 조각 모델 경로 | ${contentFragment.model.path} |
/conf/wknd-shared/settings/dam/cfm/models/adventure |
콘텐츠 조각 모델 이름 | ${contentFragment.model.name} |
adventure |
미리보기 URL 예:
https://preview.app.wknd.site/adventure${contentFragment.path}
다음으로 확인됨: https://preview.app.wknd.site/adventure/content/dam/wknd-shared/en/adventures/surf-camp-bali/surf-camp-bali
https://preview.news.wknd.site/${contentFragment.model.name}/${contentFragment.id}.html?variation=${contentFragment.variation}
확인됨 https://preview.news.wknd.site/article/99c34317-1901-2ab3-35b6-d7890aa1c23c.html?variation=main
구성된 콘텐츠 조각 모델을 사용하는 모든 콘텐츠 조각에는 미리보기 버튼이 있습니다. 미리보기 버튼은 콘텐츠 조각 모델의 미리보기 URL을 열고 열려 있는 콘텐츠 조각의 값을 URL 표현식.
앱에서 콘텐츠 조각 변경 내용을 미리 볼 때 하드 새로 고침(브라우저의 로컬 캐시 지우기)을 수행합니다.
AEM Headless GraphQL API를 사용하여 AEM의 모험을 표시하는 간단한 React 애플리케이션인 WKND 앱을 살펴보겠습니다.
예제 코드는에서 사용할 수 있습니다. Github.com.
콘텐츠 조각 미리보기에 사용되는 URL 또는 경로는 다음을 사용하여 구성 가능해야 합니다. URL 표현식. WKND 앱의 미리보기 활성화 버전에서는 AdventureDetail
경로에 바인딩된 구성 요소 /adventure<CONTENT FRAGMENT PATH>
. 따라서 WKND Adventure 모델의 미리보기 URL을 로 설정해야 합니다. https://preview.app.wknd.site:3000/adventure${contentFragment.path}
이 경로로 확인합니다.
콘텐츠 조각 미리 보기는 앱에 주소 지정 가능한 경로가 있으며 이 경로는 로 채울 수 있는 경우에만 작동합니다. URL 표현식 미리 보기 가능한 방식으로 앱의 해당 콘텐츠 조각을 렌더링합니다.
src/App.js
...
function App() {
return (
<Router>
<div className="App">
<header>
<Link to={"/"}>
<img src={logo} className="logo" alt="WKND Logo"/>
</Link>
<hr />
</header>
<Routes>
{/* The route's path must match the Adventure Model's Preview URL expression. In React since the path has `/` you must use wildcards to match instead of the usual `:path` */}
<Route path='/adventure/*' element={<AdventureDetail />}/>
<Route path="/" element={<Home />}/>
</Routes>
</div>
</Router>
);
}
export default App;
다음 AdventureDetail
구성 요소는 를 통해 미리보기 URL에 삽입된 콘텐츠 조각 경로를 구문 분석합니다. ${contentFragment.path}
URL 표현식를 경로 URL에서 사용하고, 이 URL을 사용하여 WKND Adventure를 수집하고 렌더링합니다.
src/components/AdventureDetail.js
...
function AdventureDetail() {
// Read the `path` value which is the parameter used to query for the adventure's details
// since the params value captures the `*` wildcard in `/adventure/*`, or everything after the first `/` in the Content Fragment path.
const params = useParams();
const pathParam = params["*"];
// Add the leading '/' back on
const path = '/' + pathParam;
// Query AEM for the Adventures's details, using the Content Fragment's `path`
const { adventure, references, error } = useAdventureByPath(path);
// Handle error and loading conditions
if (error) {
return <Error errorMessage={error} />;
} else if (!adventure) {
return <Loading />;
}
return (<div className="adventure-detail">
...
<AdventureDetailRender {...adventure} references={references} />
</div>);
}
...