在本章中,我們啟用兩個動態冒險詳細資訊路徑來支援可編輯的元件; 巴厘島衝浪營 和 波特蘭貝爾瓦納.
Adventure Detail SPA路由定義為 /adventure/:slug
位置 slug
是冒險內容片段上的唯一識別碼屬性。
在前兩章中,我們將可編輯的元件內容從SPA首頁檢視對應至AEM中對應的遠端SPA根目錄頁面,位於 /content/wknd-app/us/en/
.
為SPA動態路由的可編輯元件定義對映類似,但是必須在路由的執行個體與AEM頁面之間進行1:1對映配置。
在本教學課程中,我們使用WKND冒險內容片段的名稱(此為路徑的最後一個區段),並將其對應至下的簡單路徑 /content/wknd-app/us/en/adventure
.
遠端SPA路由 | AEM頁面路徑 |
---|---|
/ | /content/wknd-app/us/en/home |
/adventure/bali-surf-camp | /content/wknd-app/us/en/home/adventure/bali-surf-camp |
/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
設定完成於 BootstrapSPA.
透過SPA SPA編輯器開啟SPA時,AEM要求的對應可透過在中完成的Sling對應設定進行設定 設定AEM.
首先,建立中介 adventure
頁面區段:
adventure
然後,建立與需要可編輯區域的每個SPA URL相對應的AEM頁面。
bali-surf-camp
beervana-in-portland
這兩個AEM頁面分別擁有其相符SPA路由的編寫內容。 如果其他SPA路由需要編寫,則必須在其SPA SPA URL的遠端AEM頁面的根頁面(/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 Author
瀏覽至 網站> WKND應用程式>我們>英文
編輯 此 WKND應用程式首頁 頁面
選取 預覽 從右上角的模式選取器
點選 巴厘島衝浪營 SPA中用於導覽至其路由的卡片
選取 編輯 從模式選取器
找到 配置容器 上方的可編輯區域 行程
開啟 頁面編輯器側欄,然後選取 元件檢視
將部分已啟用的元件拖曳至 配置容器
並建立一些促銷行銷資料。 它看起來可能像這樣:
預覽 您在AEM頁面編輯器中進行的變更
重新整理在本機執行的WKND應用程式 http://localhost:3000,導覽至 巴厘島衝浪營 檢視所編寫變更的路由!
當導覽至沒有對應AEM頁面的冒險詳細資訊路由時,該路由執行個體上沒有製作功能。 若要在這些頁面上啟用撰寫功能,只需在「 」下建立具有相符名稱的AEM頁面 冒險 頁面!
恭喜!您已新增在SPA中編寫動態路由的功能!
您現在已經完成了探索AEM SPA Editor如何用來將特定可編輯區域新增到遠端SPA的第一步!