動態路由和可編輯的元件

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

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

將SPA URL對應至AEM頁面

在前兩章中，我們將可編輯的元件內容從SPA首頁檢視對應至AEM中對應的遠端SPA根目錄頁面，位於 /content/wknd-app/us/en/.

為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對應

對於離開遠端SPA的請求，其對應是透過 setupProxy 設定完成於 BootstrapSPA.

SPA編輯器對應

透過SPA SPA編輯器開啟SPA時，AEM要求的對應可透過在中完成的Sling對應設定進行設定 設定AEM.

在AEM中建立內容頁面

首先，建立中介 adventure 頁面區段：

1. 登入AEM Author
2. 瀏覽至 網站> WKND應用程式>我們>英文> 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
   • 名稱：beervana-in-portland
     • 此值會定義AEM頁面的URL，因此必須符合SPA路由的最後一個區段

這兩個AEM頁面分別擁有其相符SPA路由的編寫內容。 如果其他SPA路由需要編寫，則必須在其SPA SPA URL的遠端AEM頁面的根頁面(/content/wknd-app/us/en/homeAEM )。

更新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 檔案應如下所示：

在AEM中編寫容器

使用 <ResponsiveGrid...> 就位，及其 pagePath 我們會根據呈現的冒險動態設定，嘗試在其中製作內容。

1. 登入AEM Author

2. 瀏覽至 網站> WKND應用程式>我們>英文

3. 編輯 此 WKND應用程式首頁 頁面

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

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

5. 點選 巴厘島衝浪營 SPA中用於導覽至其路由的卡片

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

7. 找到 配置容器 上方的可編輯區域 行程

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

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

   • 影像
   • 文字
   • 標題

   並建立一些促銷行銷資料。 它看起來可能像這樣：

   

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

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

    

當導覽至沒有對應AEM頁面的冒險詳細資訊路由時，該路由執行個體上沒有製作功能。 若要在這些頁面上啟用撰寫功能，只需在「 」下建立具有相符名稱的AEM頁面 冒險 頁面！

恭喜！

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

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

您現在已經完成了探索AEM SPA Editor如何用來將特定可編輯區域新增到遠端SPA的第一步！