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

이 장에서는 두 개의 동적 Adventure Detail 경로를 사용하여 편집 가능한 구성 요소를 지원합니다. 발리 서프 캠프 및 포틀랜드의 베어바나.

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

Adventure Detail SPA 경로는 다음과 같이 정의됩니다. /adventure/:slug 여기서 slug 은 Adventure 컨텐츠 조각의 고유 식별자 속성입니다.

AEM 페이지에 SPA URL 매핑

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

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

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

원격 SPA 경로 AEM 페이지 경로
/ /content/wknd-app/us/en/home
/adventure/발리 서핑 캠프 /content/wknd-app/us/en/home/adventure/발리 서핑 캠프
/adventure/베어바나 포틀랜드 /content/wknd-app/us/en/home/adventure/베어바나 인 포틀랜드

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

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

원격 SPA 매핑

Remote SPA에서 나가는 요청에 대한 매핑은 setupProxy 구성 완료 SPA Bootstrap.

SPA 편집기 매핑

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

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

이 두 AEM 페이지에는 일치하는 SPA 경로에 대해 각각 작성된 컨텐츠가 있습니다. 다른 SPA 라우팅이 작성을 필요로 하는 경우 새 AEM 페이지는 원격 SPA 페이지의 루트 페이지(/content/wknd-app/us/en/home)을 클릭하여 제품에서 사용할 수 있습니다.

WKND 앱 업데이트

그럼 <ResponsiveGrid...> 에서 만들어진 구성 요소 마지막 장에 대해 AdventureDetail SPA 구성 요소, 편집 가능한 컨테이너 만들기

ResponsiveGrid SPA 구성 요소 배치

배치 <ResponsiveGrid...> 에서 AdventureDetail 구성 요소는 해당 경로에 편집 가능한 컨테이너를 만듭니다. 방법은 여러 경로에서 AdventureDetail 렌더링할 구성 요소는 동적으로 조정해야 합니다 <ResponsiveGrid...>'s pagePath 속성을 사용합니다. 다음 pagePath 경로 인스턴스가 표시되는 탐색을 기반으로 해당 AEM 페이지를 가리키도록 파생되어야 합니다.

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

  2. 가져오기 ResponsiveGrid 구성 요소를 위에 배치하여 <h2>Itinerary</h2> 구성 요소.

  3. 에서 다음 속성을 설정합니다. <ResponsiveGrid...> 구성 요소. 참고 사항 pagePath 속성이 현재 속성을 추가합니다 slug 위에 정의된 매핑에 따라 어드벤처 페이지에 매핑됩니다.

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

    이를 통해 ResponsiveGrid AEM 리소스에서 컨텐츠를 검색하는 구성 요소입니다.

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

업데이트 AdventureDetail.js 다음 줄 사용:

...
import { ResponsiveGrid } from '@adobe/aem-react-editable-components';
...

function AdventureDetailRender(props) {
    ...
    // Get the slug from the React route parameter, this will be used to specify the AEM Page to store/read editable content from
    const { slug } = useParams();

    return(
        ...
        // Pass the slug in
        function AdventureDetailRender({ title, primaryImage, activity, adventureType, tripLength,
                groupSize, difficulty, price, description, itinerary, references, slug }) {
            ...
            return (
                ...
                <ResponsiveGrid
                    pagePath={`/content/wknd-app/us/en/home/adventure/${slug}`}
                    itemPath="root/responsivegrid"/>

                <h2>Itinerary</h2>
                ...
            )
        }
    )
}

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

AdventureDetail.js

AEM에서 컨테이너 작성

사용 <ResponsiveGrid...> 제자리에 pagePath 렌더링되는 모험에 따라 동적으로 설정하면 컨텐츠를 작성하려고 합니다.

  1. AEM 작성자에 로그인

  2. 다음으로 이동 사이트 > WKND 앱 > us > en

  3. 편집 a WKND 앱 홈 페이지 페이지

    • 로 이동합니다 발리 서프 캠프 편집할 SPA 경로 지정

  4. 선택 미리 보기 오른쪽 상단의 모드 선택기에서

  5. 을(를) 탭합니다. 발리 서프 캠프 해당 경로로 이동할 SPA 카드

  6. 선택 편집 모드 선택기에서

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

  8. 를 엽니다. 페이지 편집기의 사이드 바, 을(를) 선택하고 을(를) 선택합니다. 구성 요소 보기

  9. 활성화된 구성 요소 중 일부를 레이아웃 컨테이너

    • 이미지
    • 텍스트
    • 제목

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

    발리 모험 세부 사항 작성

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

  11. 로컬에서 실행되는 WKND 앱 새로 고침 http://localhost:3000로 이동합니다. 발리 서프 캠프 작성된 변경 사항을 보려는 경로

    원격 SPA 발리

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

축하합니다!

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

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

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

이 페이지에서는