動態路由和可編輯的元件
在本章中,我們啟用兩個動態冒險詳細資訊路徑來支援可編輯的元件;Bali Surf Camp 和 波特蘭的Beervana。
Adventure Detail SPA路由定義為/adventure/:slug
,其中slug
是Adventure內容片段上的唯一識別碼屬性。
將SPA URL對應至AEM頁面
在前兩章中,我們將可編輯的元件內容從SPA首頁檢視對應至AEM中位於/content/wknd-app/us/en/
的對應遠端SPA根頁面。
為SPA動態路由的可編輯元件定義對映類似,但是必須在路由的執行個體與AEM頁面之間進行1:1對映配置。
在本教學課程中,我們會使用WKND冒險內容片段的名稱(此為路徑的最後一個區段),並將其對應至/content/wknd-app/us/en/adventure
下的簡單路徑。
因此,根據此對應,我們必須在以下位置建立兩個新的AEM頁面:
/content/wknd-app/us/en/home/adventure/bali-surf-camp
/content/wknd-app/us/en/home/adventure/beervana-in-portland
遠端SPA對應
已透過BootstrapSPA中完成的setupProxy
設定來設定離開遠端SPA之要求的對應。
SPA編輯器對應
透過SPA SPA Editor開啟SPA時AEM要求的對應是透過設定AEM中完成的Sling對應設定所設定。
在AEM中建立內容頁面
首先,建立中介adventure
頁面區段:
-
登入AEM Author
-
導覽至 網站> WKND應用程式>我們>英文> WKND應用程式首頁
- 此AEM頁面會對應為SPA的根目錄,因此我們在這裡開始為其他SPA路由建立AEM頁面結構。
-
點選 建立 並選取 頁面
-
選取 遠端SPA頁面 範本,然後點選 下一步
-
填寫頁面屬性
- 標題:冒險
- 名稱:
adventure
- 此值會定義AEM頁面的URL,因此必須符合SPA的路由區段。
-
點選 完成
然後,建立與需要可編輯區域的每個SPA URL相對應的AEM頁面。
-
在網站管理員中導覽至新的 Adventure 頁面
-
點選 建立 並選取 頁面
-
選取 遠端SPA頁面 範本,然後點選 下一步
-
填寫頁面屬性
- 標題:巴厘島衝浪營
- 名稱:
bali-surf-camp
- 此值會定義AEM頁面的URL,因此必須符合SPA路由的最後一個區段
-
點選 完成
-
重複步驟3-6以在Portland 中建立 Beervana頁面,包含:
- 標題:波特蘭的Beervana
- 名稱:
beervana-in-portland
- 此值會定義AEM頁面的URL,因此必須符合SPA路由的最後一個區段
這兩個AEM頁面分別擁有其相符SPA路由的編寫內容。 如果其他SPA路由需要編寫,則必須在AEM中遠端AEM頁面的根頁面(/content/wknd-app/us/en/home
)底下的SPA URL上建立新的SPA頁面。
更新WKND應用程式
讓我們將在最後一個章節中建立的<ResponsiveGrid...>
元件放到AdventureDetail
SPA元件中,建立可編輯的容器。
放置ResponsiveGrid 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
檔案應該如下所示:
在AEM中編寫容器
在<ResponsiveGrid...>
已就緒且其pagePath
已根據轉譯的冒險動態設定後,我們會嘗試在其中製作內容。
-
登入AEM Author
-
導覽至 網站> WKND應用程式>我們> en
-
編輯 WKND應用程式首頁 頁面
- 導覽至SPA中的 巴厘島衝浪營 路線以進行編輯
-
從右上角的模式選擇器中選取 預覽
-
點選SPA中的 Bali Surf Camp 卡以瀏覽其路線
-
從模式選取器中選取 編輯
-
在 行程 的正上方找到 配置容器 可編輯區域
-
開啟 頁面編輯器的側列,然後選取 元件檢視
-
將部分已啟用的元件拖曳至 配置容器
- 影像
- 文字
- 標題
並建立一些促銷行銷資料。 它看起來可能像這樣:
-
在AEM頁面編輯器中 預覽 您的變更
-
重新整理在http://localhost:3000本機執行的WKND應用程式,瀏覽至 巴厘島衝浪營 路線,以檢視所編寫的變更!
當導覽至沒有對應AEM頁面的冒險詳細資訊路由時,該路由執行個體上沒有製作功能。 若要啟用這些頁面的撰寫功能,只要在 冒險 頁面下建立具有相符名稱的AEM頁面即可!
恭喜!
恭喜!您已新增在SPA中編寫動態路由的功能!
- 將AEM React Editable元件的ResponsiveGrid元件新增至動態路由
- 建立AEM頁面,以支援在SPA中製作兩個特定路徑(Bali Surf Camp和Beervana in Portland)
- 動態巴厘島衝浪營路線上的撰寫內容!
您現在已經完成了探索AEM SPA Editor如何用來將特定可編輯區域新增到遠端SPA的第一步!