이 장에서는 두 개의 동적 Adventure Detail 경로를 사용하여 편집 가능한 구성 요소를 지원합니다. 발리 서프 캠프 및 포틀랜드의 베어바나.
Adventure Detail SPA 경로는 다음과 같이 정의됩니다. /adventure/:slug
여기서 slug
은 Adventure 컨텐츠 조각의 고유 식별자 속성입니다.
이전 두 장에서는 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
Remote SPA에서 나가는 요청에 대한 매핑은 setupProxy
구성 완료 SPA Bootstrap.
AEM SPA Editor를 통해 SPA이 열릴 때 SPA 요청에 대한 매핑은에서 수행된 Sling 매핑 구성을 통해 구성됩니다. AEM 구성.
먼저, 중재자 만들기 adventure
페이지 세그먼트:
adventure
그런 다음 편집 가능한 영역이 필요한 각 SPA URL에 해당하는 AEM 페이지를 만듭니다.
bali-surf-camp
beervana-in-portland
이 두 AEM 페이지에는 일치하는 SPA 경로에 대해 각각 작성된 컨텐츠가 있습니다. 다른 SPA 라우팅이 작성을 필요로 하는 경우 새 AEM 페이지는 원격 SPA 페이지의 루트 페이지(/content/wknd-app/us/en/home
)을 클릭하여 제품에서 사용할 수 있습니다.
그럼 <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
편집 a WKND 앱 홈 페이지 페이지
선택 미리 보기 오른쪽 상단의 모드 선택기에서
을(를) 탭합니다. 발리 서프 캠프 해당 경로로 이동할 SPA 카드
선택 편집 모드 선택기에서
을(를) 찾습니다 레이아웃 컨테이너 편집 가능한 영역 바로 위 일정
를 엽니다. 페이지 편집기의 사이드 바, 을(를) 선택하고 을(를) 선택합니다. 구성 요소 보기
활성화된 구성 요소 중 일부를 레이아웃 컨테이너
홍보 마케팅 자료를 만들 수 있습니다. 다음과 같은 모습일 수 있습니다.
미리 보기 AEM 페이지 편집기의 변경 사항
로컬에서 실행되는 WKND 앱 새로 고침 http://localhost:3000로 이동합니다. 발리 서프 캠프 작성된 변경 사항을 보려는 경로
매핑된 AEM 페이지가 없는 모험 세부 정보 경로로 이동할 때 해당 경로 인스턴스에 작성 기능이 없습니다. 이러한 페이지에서 작성할 수 있도록 하려면 모험 페이지!
축하합니다! SPA에서 동적 경로에 작성 기능을 추가했습니다.
이제 AEM SPA Editor를 사용하여 특정 편집 가능한 영역을 Remote SPA에 추가하는 방법의 첫 번째 단계 탐색을 완료했습니다!