이 장에서는 편집 가능한 구성 요소를 지원하기 위해 두 개의 동적 Adventure Detail 경로를 활성화합니다. 발리 서프 캠프 및 비어바나 인 포틀랜드.
Adventure Detail SPA 경로는 /adventure/:slug
위치 slug
는 어드벤처 콘텐츠 조각의 고유 식별자 속성입니다.
이전 두 장에서는 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을 떠나는 요청에 대한 매핑은 setupProxy
에서 구성 완료 SPA Bootstrap.
SPA 편집기를 통해 SPA을 열 때 AEM SPA 요청에 대한 매핑은에서 수행되는 Sling 매핑 구성을 통해 구성됩니다. AEM 구성.
먼저, 중개자를 만듭니다 adventure
페이지 세그먼트:
adventure
그런 다음 편집 가능한 영역이 필요한 각 AEM URL에 해당하는 SPA 페이지를 만듭니다.
bali-surf-camp
beervana-in-portland
이 두 AEM 페이지에는 일치하는 SPA 경로에 대해 각자가 작성한 콘텐츠가 보관됩니다. 다른 SPA 경로를 작성해야 하는 경우 새 AEM SPA 페이지를 원격 SPA 페이지의 루트 페이지(/content/wknd-app/us/en/home
AEM )을 참조하십시오.
다음을 배치합니다. <ResponsiveGrid...>
에서 생성된 구성 요소 마지막 챕터, 다음으로 이동 AdventureDetail
SPA 구성 요소, 편집 가능한 컨테이너 만들기
배치 <ResponsiveGrid...>
다음에서 AdventureDetail
구성 요소는 해당 경로에서 편집 가능한 컨테이너를 만듭니다. 비결은 여러 루트에서 AdventureDetail
렌더링할 구성 요소입니다. 다음을 동적으로 조정해야 합니다. <ResponsiveGrid...>'s pagePath
특성. 다음 pagePath
경로의 인스턴스가 표시하는 모험을 기반으로 해당 AEM 페이지를 가리키도록 파생되어야 합니다.
열기 및 편집 react-app-/src/components/AdventureDetail.js
가져오기 ResponsiveGrid
구성 요소 및 위에 배치 <h2>Itinerary</h2>
구성 요소.
에서 다음 속성을 설정합니다. <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
파일은 다음과 같아야 합니다.
포함 <ResponsiveGrid...>
제 자리에, 그리고 pagePath
렌더링되는 모험에 따라 동적으로 설정되므로 콘텐츠 작성을 시도합니다.
AEM 작성자에 로그인
다음으로 이동 사이트 > WKND 앱 > us > en
편집 다음 WKND 앱 홈 페이지 페이지
선택 미리 보기 오른쪽 상단의 모드 선택기에서
을 누릅니다. 발리 서프 캠프 경로로 이동할 SPA의 카드
선택 편집 모드 선택기에서
를 찾습니다. 레이아웃 컨테이너 편집 가능한 영역 바로 위 여행 일정
를 엽니다. 페이지 편집기의 사이드바을(를) 클릭하고 구성 요소 보기
활성화된 구성 요소 중 일부를 레이아웃 컨테이너
그리고 홍보 마케팅 자료를 만드세요. 다음과 같은 모습일 수 있습니다.
미리 보기 AEM 페이지 편집기의 변경 사항
로컬에서 실행 중인 WKND 앱 새로 고침 http://localhost:3000로 이동한 다음 발리 서프 캠프 작성된 변경 내용을 보기 위한 경로!
매핑된 AEM 페이지가 없는 모험 세부 경로로 이동하면 해당 경로 인스턴스에 작성 기능이 없습니다. 이러한 페이지에서 작성을 활성화하려면 아래에서 이름이 일치하는 AEM 페이지를 만들면 됩니다. 모험 페이지!
축하합니다! SPA에서 동적 경로에 작성 기능을 추가했습니다.
이제 AEM SPA Editor를 사용하여 원격 SPA에 특정 편집 가능한 영역을 추가하는 방법의 첫 번째 단계를 살펴보았습니다.