動態路由和可編輯的元件

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

動態路由和可編輯的元件

Adventure Detail SPA路由定義為 /adventure/:slug where slug 是「冒險內容片段」上的唯一識別碼屬性。

將SPA URL對應至AEM頁面

在前兩章中，我們將可編輯的元件內容從SPA首頁檢視對應至AEM中對應的Remote 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/巴釐島衝浪營 /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

遠端SPA對應

離開遠端SPA之請求的對應會透過 setupProxy 完成配置 BootstrapSPA.

SPA編輯器對應

透過AEM SPA編輯器開啟SPA時，SPA要求的對應是透過完成的Sling Mappings設定來設定 設定AEM.

在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以建立 貝爾瓦娜在波特蘭 頁面，包含：
    • 標題:貝爾瓦娜在波特蘭
    • 名稱: beervana-in-portland
      • 此值會定義AEM頁面的URL，因此必須符合SPA路徑的最後一個區段

這兩個AEM頁面會保留各自所編寫的內容，以供其相符的SPA路由使用。 如果其他SPA路由需要編寫，則必須在其SPA URL的遠端SPA頁面根頁面(/content/wknd-app/us/en/home)。

更新WKND應用程式

我們把 <ResponsiveGrid...> 在 最後一章，進入 AdventureDetail SPA元件，建立可編輯的容器。

放置ResponsiveGrid SPA元件

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

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

  2. 匯入 ResponsiveGrid 元件並放在上面 <h2>Itinerary</h2> 元件。

  3. 在 <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 檔案看起來應該像這樣：

AdventureDetail.js

在AEM中製作容器

使用 <ResponsiveGrid...> 就位，及其 pagePath 我們會嘗試在其中編寫內容，以根據轉譯的冒險動態設定。

  1. 登入AEM作者

  2. 導覽至 網站> WKND應用程式>我們>結束

  3. 編輯 the WKND應用首頁 頁面

    • 導覽至 巴釐島衝浪營 在SPA中路由以進行編輯

  4. 選擇 預覽 從右上角的模式選取器

  5. 點選 巴釐島衝浪營 卡片以導覽至其路線

  6. 選擇 編輯 從模式選取器

  7. 找出 版面容器 可編輯區域 行程

  8. 開啟 頁面編輯器側邊列，然後選取 元件視圖

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

    • 影像
    • 文字
    • 標題

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

    Bali Adventure Detail Authoring

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

  11. 重新整理在本機執行的WKND應用程式 http://localhost:3000，導覽至 巴釐島衝浪營 查看所作變更的路由！

    遠程SPA Bali

導覽至沒有對應AEM頁面的探險詳細路由時，該路由例項沒有編寫功能。 若要在這些頁面上啟用編寫，只需在 冒險 頁面！

恭喜！

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

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

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

本頁內容