在本章中,我們啟用兩個動態冒險詳細資訊路由,以支援可編輯的元件;在波特蘭的巴釐島衝浪營和貝爾瓦納。
冒險詳細資訊SPA路由定義為/adventure:path
,其中path
是WKND冒險(內容片段)的路徑,用於顯示相關詳細資訊。
在前兩個章節中,我們將可編輯的元件內容從SPA首頁檢視對應至AEM中/content/wknd-app/us/en/
的對應Remote SPA根頁面。
為SPA動態路由的可編輯元件定義映射類似,但我們必須在路由實例和AEM頁之間設定1:1映射方案。
在本教學課程中,我們將取名路徑的最後一段WKND探險內容片段,並將其對應至/content/wknd-app/us/en/adventure
下的簡單路徑。
遠程SPA路由 | AEM頁面路徑 |
---|---|
/ | /content/wknd-app/us/en/home |
/adventure:/content/dam/wknd/en/adventures/bali-surf-camp/bali-surf-camp | /content/wknd-app/us/en/home/adventure/bali-surf-camp |
/adventure:/content/dam/wknd/en/adventures/beervana-portland/beervana-portland | /content/wknd-app/us/en/home/adventure/beervana-in-portland |
因此,根據此對應,我們必須在以下位置建立兩個新AEM頁面:
/content/wknd-app/us/en/home/adventure/bali-surf-camp
/content/wknd-app/us/en/home/adventure/beervana-in-portland
離開Remote SPA的請求的對應是透過中BootstrapSPA所完成的setupProxy
設定來設定。
透過AEM SPA編輯器開啟SPA時,SPA要求的對應是透過在Configure AEM中完成的Sling對應設定來設定。
首先,建立中間adventure
頁面區段:
adventure
然後,建立對應至每個需要可編輯區域的SPA URL的AEM頁面。
bali-surf-camp
beervana-in-portland
這兩個AEM頁面會保留其相符SPA路由的個別製作內容。 如果其他SPA路由需要編寫,則必須在其SPA URL的AEM中Remote SPA頁面的根頁面(/content/wknd-app/us/en/home
)下建立新的AEM頁面。
將在最後一章中建立的<AEMResponsiveGrid...>
元件放入AdventureDetail
SPA元件中,建立可編輯的容器。
將<AEMResponsiveGrid...>
放入AdventureDetail
元件會在該路徑中建立可編輯的容器。 訣竅在於多條路由使用AdventureDetail
元件來呈現,因此我們必須動態調整<AEMResponsiveGrid...>'s pagePath
屬性。 必鬚根據路由的例項顯示的歷程,衍生pagePath
以指向對應的AEM頁面。
開啟並編輯react-app/src/components/AdventureDetail.js
在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();
...
匯入AEMResponsiveGrid
元件,並將其置於<h2>Itinerary</h2>
元件上方。
在<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
檔案應該如下所示:
在<AEMResponsiveGrid...>
已就緒且其pagePath
已根據轉譯的歷程動態設定後,我們會嘗試在其中編寫內容。
登入AEM作者
導覽至「Sites > WKND應用程式> us > en」
____ 編輯WKND 應用首 頁
從右上角的模式選擇器中選擇預覽
點選SPA中的Bali Surf Camp卡片,導覽至其路徑
從模式選擇器中選擇編輯
找到Layout Container可編輯區域,緊靠在Interial上方
開啟頁面編輯器的側欄,然後選取元件檢視
將部分已啟用的元件拖曳至版面容器
再製作一些促銷宣傳材料。 看起來可能像這樣:
____ 在AEM頁面編輯器中預覽您的變更
重新整理在http://localhost:3000本機執行的WKND應用程式,導覽至Bali Surf Camp路由,以查看撰寫的變更!
導覽至沒有對應AEM頁面的探險詳細路由時,該路由例項將沒有編寫功能。 若要在這些頁面上啟用編寫功能,只需在Adventure頁面下建立具有相符名稱的AEM頁面!
恭喜! 您已在SPA中新增動態路由的製作功能!
您現在已完成探索如何使用AEM SPA編輯器將特定可編輯區域新增至遠端SPA的前幾個步驟!
請留意! 本教學課程將擴充至Adobe的最佳作法和建議,說明如何將SPA Editor解決方案部署至AEM as aCloud Service和生產環境。