> 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-nei-rong-yuan-jian.md).
# 頁面內容元件
### 功能簡述
{% hint style="info" %}
* 網站內頁除了部分特殊需求頁面，如：運動種類內頁、競賽場館內頁等，會盡量使用「內容元件」來呈現頁面內容資訊，除達到UI介面一致性的體驗外，也期望可大幅減低程式開發的成本。
* 主要內容元件，共有9種元件\
（其中段落標題元件不使用於[2.3.2.1-物資徵求內頁](/2025wmg/di-si-zhang-chan-pin-she-ji-gui-ge/2.0-shi-zhuang-yun/2.3-zan-zhu-zhuan-qu/2.3.2-wu-zi-zhi-qiu-lie-biao/2.3.2.1-wu-zi-zhi-qiu-nei-ye.md)＆[3.1.1-最新消息內頁](/2025wmg/di-si-zhang-chan-pin-she-ji-gui-ge/3.0-sai-hui-xiao-xi/3.1-zui-xin-xiao-xi-lie-biao/3.1.1-zui-xin-xiao-xi-nei-ye.md)）：
* 01 段落標題元件
* 02 小標元件
* 03 內文元件
* 04 單圖元件
* 05 多圖元件
* 06 Youtube元件
* 07 項目列表元件
* 08 按鈕連結元件
* 09 表格列表元件
{% endhint %}
### 01 段落標題元件
* 此段落標題元件，不使用於[2.3.2.1-物資徵求內頁](/2025wmg/di-si-zhang-chan-pin-she-ji-gui-ge/2.0-shi-zhuang-yun/2.3-zan-zhu-zhuan-qu/2.3.2-wu-zi-zhi-qiu-lie-biao/2.3.2.1-wu-zi-zhi-qiu-nei-ye.md)＆[3.1.1-最新消息內頁](/2025wmg/di-si-zhang-chan-pin-she-ji-gui-ge/3.0-sai-hui-xiao-xi/3.1-zui-xin-xiao-xi-lie-biao/3.1.1-zui-xin-xiao-xi-nei-ye.md)
{% tabs %}
{% tab title="桌機版" %}
1. **段落標題元件**
1. 桌機版顯示於該段落的左欄位置
2. 超過寬度往下斷行排列
3. 字數不限，建議20字
{% endtab %}
{% tab title="手機版" %}
1. **段落標題元件**
1. 手機版顯示於該段落的上方位置
2. 超過寬度往下斷行排列
3. 字數不限，建議20字
{% endtab %}
{% endtabs %}
### 02 小標元件
{% tabs %}
{% tab title="桌機版" %}
1. **小標元件**
1. 超過寬度往下斷行排列
2. 字數不限，建議40字
{% endtab %}
{% tab title="手機版" %}
{% endtab %}
{% endtabs %}
### 03 內文元件
{% tabs %}
{% tab title="桌機版" %}
1. **內文元件**
1. 超過寬度往下斷行排列（後台亦可透過Enter自行斷行）
2. 字數不限
{% endtab %}
{% tab title="手機版" %}
{% endtab %}
{% endtabs %}
### 04 單圖元件
{% tabs %}
{% tab title="桌機版" %}
1. **單圖圖片**
2. **圖片說明文字**
1. 可選擇編輯說明文字，或選擇空值隱藏說明文字
2. 字數限制50字
{% endtab %}
{% tab title="手機版" %}
{% endtab %}
{% endtabs %}
### 05 多圖元件
{% tabs %}
{% tab title="桌機版" %}
1. **輪播圖片**
1. 呈現多張圖片，可透過滑鼠左右拖拉前後張圖片
2. **圖片說明文字**
1. 一張圖片搭配一段圖片說明文字
2. 可選擇編輯說明文字，或選擇空值隱藏說明文字
3. 字數限制50字
3. **圖片左右切換按鈕**
1. 點選左右按鈕，亦可切換前後張圖片
2. 若無更多圖片，按鈕顯示為不可點擊狀態
{% endtab %}
{% tab title="手機版" %}
{% endtab %}
{% endtabs %}
### 06 Youtube元件
{% tabs %}
{% tab title="桌機版" %}
1. **Youtube影片嵌入框**
1. 點擊後於影片框內播放Youtube影片
2. 影片封面圖片抓取Youtube影片提供的縮圖(thumbnail)
```url
https://img.youtube.com/vi/[VIDEO_ID]/maxresdefault.jpg
```
2. **影片說明文字**
1. 可選擇編輯說明文字，或選擇空值隱藏說明文字
2. 字數限制50字
{% endtab %}
{% tab title="手機版" %}
{% endtab %}
{% endtabs %}
### 07 項目列表元件
{% tabs %}
{% tab title="桌機版" %}
1. **列表項目標題文字**
1. 超過寬度往下斷行排列
2. 字數限制20字
2. **項目列表**
1. 項目元件以 「Z字形」 順序排列，最多2欄
3. **項目元件**
1. 項目元件文字
1. 超過寬度往下斷行排列
2. 字數限制40字
2. 項目元件有2種形式
1. 連結外連：點擊後前往指定URL連結
2. 文件下載：點擊後下載指定檔案
{% endtab %}
{% tab title="手機版" %}
2. **項目列表**
1. 項目元件以 「垂直方向」 順序排列，最多1欄
{% endtab %}
{% endtabs %}
### 08 按鈕連結元件
{% tabs %}
{% tab title="桌機版" %}
1. **按鈕連結**
1. 點擊後前往指定URL連結
2. 按鈕文字字數限制10字
{% endtab %}
{% tab title="手機版" %}
{% endtab %}
{% endtabs %}
### 09 表格列表元件
{% tabs %}
{% tab title="桌機版" %}
1. 運用於不同頁面中，透過表格列表形式，說明較大量的資料內容，如：賽程表、運動項目等
2. 當表格高度較高時，向上滑動會凍結標題列，方便使用者對照表格列表內資料屬性，如下示意：
{% endtab %}
{% tab title="手機版" %}
1. 當螢幕寬度不足或手機版尺寸時，除上方標題列凍結之外，左方首欄亦會凍結，方便使用者對象標題＆首欄資料屬性，如下示意：
{% endtab %}
{% endtabs %}
***
### 修訂紀錄
