---
# System prepended metadata

title: G-22 網站地圖
tags: [G系統功能頁]

---

# 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 畫面
![](https://i.imgur.com/EsX3bvv.jpg)

- 展開分類相關畫面
![](https://i.imgur.com/Al3L2gR.jpg)

### 頁面區塊說明
- 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 列表項目相同
- 操作邏輯

#### 分類樹項目
![](https://i.imgur.com/yVoCsOD.jpg)
- 顯示邏輯
    - 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://i.imgur.com/0UtfMmL.jpg)

- 顯示邏輯
    - 參考 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
