# G-22 網站地圖
> [name=JasonWu]

###### tags: `G系統功能頁`

## API 清單
No | API | Desc | 執行順序 | 執行條件 | 參考
---|----------|---------------------|----------|--------------------|--------
1 | [URI-A-02](https://hackmd.io/Cbw7V8AETEOzCk4s7TgfwA) | 多語標籤 | 1 | page init |
2 | [URI-G-22](https://hackmd.io/DKUebuTnTaKDZfflLN9vnQ) | Site Map API | 1 | page init |

## 頁面相關路徑

## 原頁面網址
- https://www.taiwantrade.com/sitemap

## 頁面輸入 URL 解析
- 網址輸入 sitemap

## 頁面說明
- sitemap 畫面

- 展開分類相關畫面

### 頁面區塊說明
- G-22-01 共用Header Service元件, 參考[`L01`](https://docs.google.com/spreadsheets/d/1FfU1adulMCzdWNQNjagsm5rHYhokRwhKfzY-Lurvw9Q/edit#gid=1382704913)
- G-22-02
- 麵包屑，請參考 [G-22-02](#麵包屑)
- G-22-03
- 頁面標題，請參考 [G-22-03](#頁面標題)
- G-22-04
- 回首頁項目，請參考 [G-22-04](#回首頁項目)
- G-22-05
- 分類樹項目，請參考 [G-22-05](#分類樹項目)
- G-22-06
- sitemap 列表，請參考 [G-22-06](#sitemap列表)

### 頁面欄位說明
#### 麵包屑
- 顯示邏輯
- 固定顯示 Home > Site Map
- Home 為多語，{lang.home}
- Home 會加上連結，點選後回到首頁
- Site Map 為多語，{lang.sitemap}
- 操作邏輯

#### 頁面標題
- 顯示邏輯
- 固定顯示 Site Map
- Site Map 為多語，{lang.sitemap}
- 操作邏輯

#### 回首頁項目
- 顯示邏輯
- 固定顯示 Home
- Home 為多語，{lang.home}
- Home 會加上連結，點選後回到首頁
- 顯示樣式與下面的其他 sitemap 列表項目相同
- 操作邏輯

#### 分類樹項目
- 顯示邏輯
- G-22-05-1 Categories 為多語，{lang.categories}
- 參考 https://hackmd.io/DKUebuTnTaKDZfflLN9vnQ?view#%E8%A6%8F%E6%A0%BC1 ，解析 classify2 array, classify4 array, classify6 array
- 呼叫 api 網址 /sitemap/{did}
- G-22-05-2 第一層分類樹，依次顯示 classify2 array 中的資料，組成第一層
- 名稱顯示 {classify2.title}
- 點選連結網址為 {classify2.url}
- G-22-05-3 第二層分類樹，依次顯示 classify4 array 中的資料，且 {classify4.parentCateId} = {該層的 classify2.cateId}
- 名稱顯示 {classify4.title}
- 點選連結網址為 {classify4.url}
- G-22-05-4 第三層分類樹，依次顯示 classify6 array 中的資料，且 {classify6.parentCateId} = {該層的 classify4.cateId}
- 名稱顯示 {classify6.title}
- 點選連結網址為 {classify6.url}
- 一開始只顯示 G-22-05-1 的根目錄

- 操作邏輯
- G-22-05-1
- 點選前方箭頭時，會展開第一層分類樹，再次點選會關閉
- G-22-05-2
- 點選前方箭頭時，會展開該層的第二層分類樹，再次點選會關閉
- 點選連結，會切換到對應條件的條列頁
- G-22-05-3
- 點選前方箭頭時，會展開該層的第三層分類樹，再次點選會關閉
- 點選連結，會切換到對應條件的條列頁
- G-22-05-4
- 點選連結，會切換到對應條件的條列頁

#### sitemap列表

- 顯示邏輯
- 參考 https://hackmd.io/DKUebuTnTaKDZfflLN9vnQ?view#%E8%A6%8F%E6%A0%BC1 ，解析 others array
- G-22-06-1 第一層分類樹，依次顯示 others array 中的資料，組成第一層
- 名稱顯示 {others.title}
- 點選連結網址為 {others.url}
- G-22-06-2 第二層分類樹，顯示 others.childItem 中的資料
- 名稱顯示 {childItem.title}
- 點選連結網址為 {childItem.url}
- 操作邏輯
- G-22-06-1
- 點選前方箭頭時，會展開第一層分類樹，再次點選會關閉
- 如果第一層的 {others.url} != ''，代表除了展開外，點選 link 也可以開啟視窗，href = {others.url}
- G-22-06-2
- 點選連結，切換到對應的 url 頁面

## 多語清單
區塊 | 多語代碼 | 說明
-------------|--------------------------------|------------------------------
麵包屑 | lang.home | 麵包屑 Home
標題內容 | lang.sitemap | Site Map
第一層標題 | lang.categories | Categories