動態路由和可編輯的元件

在本章中,我們啟用兩個動態冒險詳細資訊路由,以支援可編輯的元件;在波特蘭的​巴釐島衝浪營​和​貝爾瓦納。

動態路由和可編輯的元件

冒險詳細資訊SPA路由定義為/adventure:path ,其中path是WKND冒險(內容片段)的路徑,用於顯示相關詳細資訊。

將SPA URL對應至AEM頁面

在前兩個章節中,我們將可編輯的元件內容從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

遠端SPA對應

離開Remote SPA的請求的對應是透過中BootstrapSPA所完成的setupProxy設定來設定。

SPA編輯器對應

透過AEM SPA編輯器開啟SPA時,SPA要求的對應是透過在Configure AEM中完成的Sling對應設定來設定。

在AEM中建立內容頁面

首先,建立中間adventure頁面區段:

  1. 登入AEM作者
  2. 導覽至「Sites > WKND應用程式> us > en > WKND應用程式首頁
    • 此AEM頁面會以SPA根頁面的形式對應,因此我們就開始為其他SPA路由建立AEM頁面結構。
  3. 點選​建立​並選取​頁面
  4. 選取​遠端SPA頁面​範本,然後點選​下一步
  5. 填寫頁面屬性
    • 標題:冒險
    • 名稱: adventure
      • 此值定義AEM頁面的URL,因此必須符合SPA的路由區段。
  6. 點選​完成

然後,建立對應至每個需要可編輯區域的SPA URL的AEM頁面。

  1. 導覽至「網站管理員」中新的​冒險​頁面
  2. 點選​建立​並選取​頁面
  3. 選取​遠端SPA頁面​範本,然後點選​下一步
  4. 填寫頁面屬性
    • 標題:巴釐島衝浪營
    • 名稱: bali-surf-camp
      • 此值會定義AEM頁面的URL,因此必須符合SPA路徑的最後一個區段
  5. 點選​完成
  6. 重複步驟3-6以在Portland 中建立 Beervana頁面,並使用:
    • 標題:貝爾瓦娜在波特蘭
    • 名稱: beervana-in-portland
      • 此值會定義AEM頁面的URL,因此必須符合SPA路徑的最後一個區段

這兩個AEM頁面會保留其相符SPA路由的個別製作內容。 如果其他SPA路由需要編寫,則必須在其SPA URL的AEM中Remote SPA頁面的根頁面(/content/wknd-app/us/en/home)下建立新的AEM頁面。

更新WKND應用程式

將在最後一章中建立的<AEMResponsiveGrid...>元件放入AdventureDetail SPA元件中,建立可編輯的容器。

放置AEMResponsiveGrid SPA元件

<AEMResponsiveGrid...>放入AdventureDetail元件會在該路徑中建立可編輯的容器。 訣竅在於多條路由使用AdventureDetail元件來呈現,因此我們必須動態調整<AEMResponsiveGrid...>'s pagePath屬性。 必鬚根據路由的例項顯示的歷程,衍生pagePath以指向對應的AEM頁面。

  1. 開啟並編輯react-app/src/components/AdventureDetail.js

  2. 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();
    ...
    
  3. 匯入AEMResponsiveGrid元件,並將其置於<h2>Itinerary</h2>元件上方。

  4. <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檔案應該如下所示:

AdventureDetail.js

在AEM中製作容器

<AEMResponsiveGrid...>已就緒且其pagePath已根據轉譯的歷程動態設定後,我們會嘗試在其中編寫內容。

  1. 登入AEM作者

  2. 導覽至「Sites > WKND應用程式> us > en

  3. ____ 編輯WKND 應用首

    • 導覽至SPA中的​巴釐島衝浪營​路線以編輯它
  4. 從右上角的模式選擇器中選擇​預覽

  5. 點選SPA中的​Bali Surf Camp​卡片,導覽至其路徑

  6. 從模式選擇器中選擇​編輯

  7. 找到​Layout Container​可編輯區域,緊靠在​Interial​上方

  8. 開啟​頁面編輯器的側欄,然後選取​元件檢視

  9. 將部分已啟用的元件拖曳至​版面容器

    • 影像
    • 文字
    • 標題

    再製作一些促銷宣傳材料。 看起來可能像這樣:

    Bali Adventure Detail Authoring

  10. ____ 在AEM頁面編輯器中預覽您的變更

  11. 重新整理在http://localhost:3000本機執行的WKND應用程式,導覽至​Bali Surf Camp​路由,以查看撰寫的變更!

    遠程SPA Bali

導覽至沒有對應AEM頁面的探險詳細路由時,該路由例項將沒有編寫功能。 若要在這些頁面上啟用編寫功能,只需在​Adventure​頁面下建立具有相符名稱的AEM頁面!

恭喜!

恭喜! 您已在SPA中新增動態路由的製作功能!

  • 將AEM React可編輯元件的ResponsiveGrid元件新增至動態路由
  • 建立AEM頁面,以支援SPA(Bali Surf Camp和Beervana,在Portland)中編寫兩條特定路線
  • 在動態的巴釐島衝浪營路線上製作內容!

您現在已完成探索如何使用AEM SPA編輯器將特定可編輯區域新增至遠端SPA的前幾個步驟!

注意

請留意! 本教學課程將擴充至Adobe的最佳作法和建議,說明如何將SPA Editor解決方案部署至AEM as aCloud Service和生產環境。

本頁內容