動態路由和可編輯的元件

Last update: Mon Jul 15 2024 00:00:00 GMT+0000 (Coordinated Universal Time)

主題：

建立對象：

undefined
undefined

在本章中，我們啟用兩個動態冒險詳細資訊路徑來支援可編輯的元件；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下的簡單路徑。

遠端SPA路由

AEM頁面路徑

/content/wknd-app/us/en/home

/adventure/bali-surf-camp

/content/wknd-app/us/en/home/adventure/bali-surf-camp

/adventure/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對應

已透過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檔案應該如下所示：

AdventureDetail.js