콘텐츠 조각 미리보기

AEM Headless 애플리케이션은 통합 작성 미리보기를 지원합니다. 미리보기 경험은 AEM 작성자의 콘텐츠 조각 편집기를 사용자 지정 앱(HTTP를 통해 주소 지정 가능)에 연결하므로 미리보고 있는 콘텐츠 조각을 렌더링하는 앱에 대한 딥 링크를 사용할 수 있습니다.

콘텐츠 조각 미리보기를 사용하려면 다음 몇 가지 조건을 충족해야 합니다.

1. 작성자가 액세스할 수 있는 URL에 앱을 배포해야 합니다.
2. AEM 게시 서비스가 아닌 AEM 작성자 서비스에 연결하도록 앱을 구성해야 합니다.
3. 앱을 사용할 수 있는 URL 또는 경로로 디자인해야 합니다. 컨텐츠 조각 경로 또는 ID 을 클릭하여 앱 경험에서 미리 보기 위해 표시할 콘텐츠 조각을 선택합니다.

URL 미리보기

미리보기 URL, 사용 URL 표현식는 콘텐츠 조각 모델의 속성에 설정됩니다.

1. AEM 작성자 서비스에 관리자로 로그인
2. 다음으로 이동 도구 > 일반 > 콘텐츠 조각 모델
3. 다음 항목 선택 콘텐츠 조각 모델 및 선택 속성 맨 위의 작업 표시줄을 구성합니다.
4. 다음을 사용하여 콘텐츠 조각 모델의 미리보기 URL 입력 URL 표현식
   • 미리보기 URL은 AEM Author 서비스에 연결하는 앱 배포를 가리켜야 합니다.

URL 표현식

각 콘텐츠 조각 모델에는 미리보기 URL이 설정될 수 있습니다. 미리보기 URL은 아래 표에 나열된 URL 표현식을 사용하여 콘텐츠 조각별로 매개 변수화할 수 있습니다. 여러 URL 표현식을 단일 미리보기 URL에 사용할 수 있습니다.

미리보기 URL 예:

• 의 미리보기 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
• 의 미리보기 URL 기사 모델은 다음과 같을 수 있습니다. 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 표현식.

앱에서 콘텐츠 조각 변경 내용을 미리 볼 때 하드 새로 고침(브라우저의 로컬 캐시 지우기)을 수행합니다.

React 예

AEM Headless GraphQL API를 사용하여 AEM의 모험을 표시하는 간단한 React 애플리케이션인 WKND 앱을 살펴보겠습니다.

예제 코드는에서 사용할 수 있습니다. Github.com.

URL 및 경로

콘텐츠 조각 미리보기에 사용되는 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>);
}
...