동적 경로 및 편집 가능한 구성 요소

이 장에서는 두 개의 동적 Adventure Detail 경로를 사용하여 편집 가능한 구성 요소를 지원합니다.Bali Surf CampBeervana in Portland

동적 경로 및 편집 가능한 구성 요소

Adventure Detail SPA 경로는 /adventure:path으로 정의됩니다. 여기서 path은 WKND Adventure(컨텐츠 조각)에 대한 세부 정보를 표시하는 경로입니다.

AEM 페이지에 SPA URL 매핑

이전 두 장에서는 SPA 홈 보기의 편집 가능한 구성 요소 컨텐츠를 /content/wknd-app/us/en/에 있는 AEM의 해당 원격 SPA 루트 페이지에 매핑했습니다.

SPA 동적 경로의 편집 가능한 구성 요소에 대한 매핑을 정의하는 것은 비슷하지만 라우트의 인스턴스와 AEM 페이지 간에 1:1 매핑 구성표를 작성해야 합니다.

이 자습서에서는 경로의 마지막 세그먼트인 WKND Adventure 컨텐츠 조각의 이름을 가져와 /content/wknd-app/us/en/adventure 아래의 간단한 경로에 매핑합니다.

원격 SPA 경로 AEM 페이지 경로
/ /content/wknd-app/us/en/home
/adventure:/content/dam/wknd/en/adventure/bali-surf-camp/발리-surf-camp /content/wknd-app/us/en/home/adventure/발리-surf-camp
/adventure:/content/dam/wknd/en/adventures/beervanna-portland/beervanna-portland /content/wknd-app/us/en/home/adventure/beervanna-in-portland

따라서 이 매핑을 기반으로 에서는 두 개의 새 AEM 페이지를 만들어야 합니다.

  • /content/wknd-app/us/en/home/adventure/bali-surf-camp
  • /content/wknd-app/us/en/home/adventure/beervana-in-portland

원격 SPA 매핑

Remote SPA을 나가는 요청에 대한 매핑은 SPA에서 수행된 setupProxy 구성을 통해 구성됩니다.

SPA 편집기 매핑

AEM SPA Editor를 통해 SPA이 열릴 때 SPA 요청에 대한 매핑은 AEM 구성에서 수행된 Sling 매핑 구성을 통해 구성됩니다.

AEM에서 컨텐츠 페이지 만들기

먼저 중간 adventure 페이지 세그먼트를 만듭니다.

  1. AEM 작성자에 로그인
  2. 사이트 > WKND 앱 > us > en > WKND 앱 홈 페이지​로 이동합니다.
    • 이 AEM 페이지는 SPA의 루트로 매핑되므로 여기에서 다른 SPA 경로에 대한 AEM 페이지 구조 작성을 시작합니다.
  3. 만들기​를 탭하고 페이지​를 선택합니다
  4. 원격 SPA 페이지 템플릿을 선택하고 다음​을 누릅니다
  5. 페이지 속성 채우기
    • 제목:모험
    • 이름: adventure
      • 이 값은 AEM 페이지의 URL을 정의하므로 SPA의 경로 세그먼트와 일치해야 합니다.
  6. Done​을 누릅니다

그런 다음 편집 가능한 영역이 필요한 각 SPA URL에 해당하는 AEM 페이지를 만듭니다.

  1. 사이트 관리자의 새 Adventure 페이지로 이동합니다
  2. 만들기​를 탭하고 페이지​를 선택합니다
  3. 원격 SPA 페이지 템플릿을 선택하고 다음​을 누릅니다
  4. 페이지 속성 채우기
    • 제목:발리 서프 캠프
    • 이름: bali-surf-camp
      • 이 값은 AEM 페이지의 URL을 정의하므로 SPA 경로의 마지막 세그먼트와 일치해야 합니다
  5. Done​을 누릅니다
  6. 3-6단계를 반복하여 Portland 페이지의 Beervana 페이지를 만듭니다.
    • 제목:포틀랜드의 베어바나
    • 이름: beervana-in-portland
      • 이 값은 AEM 페이지의 URL을 정의하므로 SPA 경로의 마지막 세그먼트와 일치해야 합니다

이 두 AEM 페이지에는 일치하는 SPA 경로에 대해 작성된 각 컨텐츠가 들어 있습니다. 다른 SPA 라우팅에서 작성이 필요한 경우 새 AEM 페이지를 AEM의 원격 SPA 페이지의 루트 페이지(/content/wknd-app/us/en/home)에서 SPA URL에 만들어야 합니다.

WKND 앱 업데이트

마지막 장에서 만든 <AEMResponsiveGrid...> 구성 요소를 AdventureDetail SPA 구성 요소에 넣어 편집 가능한 컨테이너를 만들겠습니다.

AEMRresponsiveGrid SPA 구성 요소 배치

AdventureDetail 구성 요소에 <AEMResponsiveGrid...>을 지정하면 해당 경로에 편집 가능한 컨테이너가 만들어집니다. 트릭은 여러 경로가 AdventureDetail 구성 요소를 사용하여 렌더링하므로 <AEMResponsiveGrid...>'s pagePath 속성을 동적으로 조정해야 합니다. 라우트의 인스턴스가 표시되는 탐색을 기반으로 해당 AEM 페이지를 가리키도록 pagePath을 파생해야 합니다.

  1. react-app/src/components/AdventureDetail.js 열기 및 편집

  2. 컨텐츠 조각 경로에서 모험 이름을 파생시키는 AdventureDetail(..)'s 두 번째 return(..) 문 앞에 다음 줄을 추가합니다.

    ...
    // Get the last segment of the Adventure Content Fragment path to used to generate the pagePath for the AEMResponsiveGrid
    const adventureName = adventureData._path.split('/').pop();
    ...
    
  3. AEMResponsiveGrid 구성 요소를 가져와 <h2>Itinerary</h2> 구성 요소 위에 놓습니다.

  4. <AEMResponsiveGrid...> 구성 요소에서 다음 속성을 설정하십시오

    • pagePath = '/content/wknd-app/us/en/home/adventure/${adventureName}'
    • itemPath = 'root/responsivegrid'

    이렇게 하면 AEMResponsiveGrid 구성 요소가 AEM 리소스에서 해당 컨텐츠를 검색하도록 지시합니다.

    • /content/wknd-app/us/en/home/adventure/${adventureName}/jcr:content/root/responsivegrid

AdventureDetail.js을(를) 다음 줄로 업데이트합니다.

...
import AEMResponsiveGrid from '../components/aem/AEMResponsiveGrid';
...

function AdventureDetail(props) {
    ...
    // Get the last segment of the Adventure Content Fragment path to used to generate the pagePath for the AEMResponsiveGrid
    const adventureName = adventureData._path.split('/').pop();

    return(
        ...
        <AEMResponsiveGrid 
            pagePath={`/content/wknd-app/us/en/home/adventure/${adventureName}`}
            itemPath="root/responsivegrid"/>
            
        <h2>Itinerary</h2>
        ...
    )
}

AdventureDetail.js 파일은 다음과 같습니다.

AdventureDetail.js

AEM에서 컨테이너 작성

<AEMResponsiveGrid...> 이 제자리에 있고 pagePath 이 렌더링되는 모험에 따라 동적으로 설정되면 Adobe에서는 이 워크플로우에서 컨텐츠를 작성하려고 합니다.

  1. AEM 작성자에 로그인

  2. 사이트 > WKND 앱 > us > en 로 이동합니다.

  3. ____ WKND 앱 홈 페이지 편집

    • SPA에서 Bali Surf Camp 경로로 이동하여 편집합니다
  4. 오른쪽 상단의 모드 선택기에서 미리 보기​를 선택합니다

  5. SPA에서 Bali Surf Camp 카드를 탭하여 해당 경로로 이동합니다

  6. mode-selector에서 Edit​을 선택합니다.

  7. 레이아웃 컨테이너 편집 가능한 영역을 일정 바로 위에 놓습니다

  8. 페이지 편집기의 측면 막대​을 열고 구성 요소 보기​를 선택합니다

  9. 활성화된 구성 요소 중 일부를 레이아웃 컨테이너​로 드래그합니다.

    • 이미지
    • 텍스트
    • 제목

    홍보 마케팅 자료를 만들 수 있습니다. 다음과 같은 모습일 수 있습니다.

    발리 모험 세부 사항 작성

  10. ____ AEM 페이지 편집기에서 변경 사항 미리 보기

  11. http://localhost:3000에서 로컬로 실행되는 WKND 앱을 새로 고치려면 Bali Surf Camp 경로로 이동하여 작성된 변경 사항을 확인합니다.

    원격 SPA 발리

매핑된 AEM 페이지가 없는 모험 세부 정보 경로로 이동할 때 해당 경로 인스턴스에 작성 기능이 없습니다. 이러한 페이지에서 작성할 수 있도록 하려면 Adventure 페이지 아래에 이름이 일치하는 AEM 페이지를 만들면 됩니다!

축하합니다!

축하합니다! SPA에서 동적 경로에 작성 기능을 추가했습니다.

  • AEM React 편집 가능한 구성 요소의 ResponsiveGrid 구성 요소를 동적 경로에 추가했습니다
  • SPA(Bali Surf Camp and Beervana in Portland)에서 두 개의 특정 루트 작성을 지원하는 AEM 페이지가 작성되었습니다.
  • 동적 발리 서프 캠프 경로에서 컨텐츠를 작성합니다!

이제 AEM SPA Editor를 사용하여 특정 편집 가능한 영역을 Remote SPA에 추가하는 방법의 첫 번째 단계 탐색을 완료했습니다!

노트

채널을 고정하세요! 이 자습서는 SPA Editor 솔루션을 AEM as a Cloud Service 및 프로덕션 환경에 배포하는 방법에 대한 Adobe의 우수 사례 및 권장 사항을 포함하도록 확장됩니다.

이 페이지에서는