> For the complete documentation index, see [llms.txt](https://bai-da-shuspersonal-organization.gitbook.io/2025wmg/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://bai-da-shuspersonal-organization.gitbook.io/2025wmg/di-si-zhang-chan-pin-she-ji-gui-ge/quan-yu-xing-gong-neng/ye-mian-biao-ti-qu-kuai.md).

# 頁面標題區塊

### 功能簡述

{% hint style="info" %}

* 使用於頁面的開頭上方，用以說明頁面主題，讓使用者可快速理解頁面內容並產生預期
* 除單元/分類標籤、標題文字外，若頁面有多種內容要呈現，會透過「頁籤切換列」進行下方內容的切換
* 在頁籤切換的同時，會自動切換相對應的獨立網址，方便使用者分享或快速連回指定的頁籤內容。\
  如:頁面網址為【/wmg】，而頁面上有3個頁籤，當點選切換至第3個頁籤時，網址會切換為【/wmg/3】\
  \
  ※單元頁面網址設定可參考 [全站Meta Data設定清單](/2025wmg/fu-lu-qing-dan/quan-zhan-meta-data-she-ding-qing-dan.md#wang-zhi-meta-data-page-urlpage-titlepage-description)
  {% endhint %}

### 設計規格

{% tabs %}
{% tab title="桌機版" %}

<figure><img src="https://933433492-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FigGuRzvi7b8gTMDtYDBn%2Fuploads%2F3lrmmjyTjwy05hB47ZDf%2FFrame%20627303.png?alt=media&amp;token=a27e2f80-06a5-47b0-a7de-8978ee26f3c2" alt=""><figcaption></figcaption></figure>

1. **單元/分類標籤**
   * 一般頁面
     * 標示該頁面所屬的單元名稱，如:2.1-世界壯年運動會頁面會顯示「世壯運」
   * 列表內頁 (2.3.2.1-物資徵求內頁、3.1.1-最新消息內頁)
     * 標示該內頁所屬分類名稱，如:3.1.1-最新消息內頁會顯示「活動資訊」<br>
2. **頁面標題文字**
   * 依客戶議定之頁面名稱<br>
3. **頁籤切換列**
   * 當頁面有超過2個分類內容以上時，會顯示頁籤切換列
   * 點選頁籤切換按鈕可切換下方內容
   * 切換頁籤內容時，會自動切換相對應的獨立網址，方便使用者分享或快速連回指定的頁籤內容。如:頁面網址為【/wmg】，而頁面上有3個頁籤，當點選切換至第3個頁籤時，網址會切換為【/wmg/3】
   * 頁籤切換按鈕狀態\
     ![](https://933433492-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FigGuRzvi7b8gTMDtYDBn%2Fuploads%2FrNBm0VXpFX3UzYJmwc4M%2F%E8%9E%A2%E5%B9%95%E6%93%B7%E5%8F%96%E7%95%AB%E9%9D%A2%202024-10-31%20151633.png?alt=media\&token=c6990ee4-8f2f-4d93-a46a-7aa31fcf76e5)
     {% endtab %}

{% tab title="手機版" %}

<figure><img src="https://933433492-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FigGuRzvi7b8gTMDtYDBn%2Fuploads%2FPgO5ZlsEEMVzmPH8wJ6d%2FFrame%20627304.png?alt=media&amp;token=00e18361-fe4d-4a46-b65b-92925c07d5da" alt=""><figcaption></figcaption></figure>

3. **頁籤切換列**
   1. 相關規格如桌機版
   2. 寬度較窄時，頁籤切換列可左右滑動查看更多項目，或者點選指示按鈕亦可左右滑動
   3. 當位於最左或最右位置時，另一側顯示滑動指示按鈕，提醒使用者可左右滑動(示意如下)

      <figure><img src="https://933433492-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FigGuRzvi7b8gTMDtYDBn%2Fuploads%2FJUIT1iqKU5kexWpz2xOd%2FFrame%20627302.png?alt=media&amp;token=c8989604-0bf2-44d5-9761-4cb4ecb53285" alt=""><figcaption></figcaption></figure>

{% endtab %}
{% endtabs %}

***

### 修訂紀錄

<table data-full-width="false"><thead><tr><th width="111" data-type="number">序號</th><th width="114">修訂時間</th><th width="203">主要修改內容</th><th>修訂來源</th><th>備註</th></tr></thead><tbody><tr><td>1</td><td>2024.11</td><td>頁籤切換列加上左右滑動指示按鈕</td><td>內部討論後調整</td><td></td></tr></tbody></table>