頁面佈局與閱讀體驗
為了給讀者提供舒服、高效的閱讀體驗，EpoCanvas Docs 採用了經典而清晰的三欄式頁面佈局。讀者在翻閱長篇文章時，隨時能掌握「自己在整個網站的哪個位置」以及「正在閱讀本文的哪個小節」。
整體介面分區說明
開啟任意一篇文件，頁面分為四個主要功能區域：
圖：以《渲染規則詳解》頁為例的三欄佈局標註圖。① 頂部全域導覽列；② 左側分類目錄；③ 中央內文閱讀區；④ 右側「本頁目錄」大綱。四個區域在圖中以邊框和序號標出。
圖：三欄佈局的結構示意，標註了各區域的名稱與職責。
1. 頂部全域導覽列 (Header)
位於頁面最上方，固定懸浮，在向下捲動瀏覽時始終保持可見，高度為 3.5rem。頂欄從左到右依次排列著以下元素（對照下方標註圖）：
圖：頂欄元素標註特寫。① Logo 與網站名稱；② 全域搜尋框；③ 主導覽按鈕組；④ 版本徽標；⑤ 語言切換器；⑥ 深淺色主題切換；⑦ GitHub 儲存庫入口；⑧ Telegram 社群入口。
- 網站 Logo 與標題（①）：左側展示 EpoCanvas 圖示與專案名稱，點擊可快速回到文件站首頁。
- 全域搜尋框（②）：在框內輸入關鍵字直接查找目前頁面內容；按
Ctrl+K/Cmd+K開啟全站檢索彈窗，詳見 全文搜尋與快捷鍵使用。 - 主導覽按鈕（③）：提供「首頁」、「產品說明」、「快速上手」等常用功能快速跳轉連結，目前所在板塊自動高亮。
- 版本徽標（④）：顯示目前文件對應的發布版本號（如
v1.2.0），點擊可查看 GitHub 上的詳細更新記錄。 - 多語系切換器（⑤）：點擊語言按鈕展開 10 種可選語言，選擇後跳轉到同一篇文章的目標語言版本，導覽、側邊欄與內文一起切換。
- 深淺色主題切換（⑥）：提供太陽/月亮圖示，在亮色模式和暗色模式間切換。
- GitHub 與 Telegram（⑦⑧）：右側圖示分別跳轉到開源儲存庫與技術社群。
2. 左側分類目錄 (Sidebar)
位於頁面左側（寬度 16.5rem，約 264 像素），按邏輯層級展示所有的文件章節：
- 分組摺疊：文件按「產品概覽與入門」、「核心功能與使用指南」等分組整理，點擊分組名可展開或收起。
- 目前頁面高亮：目前正在閱讀的文章會在左側選單中以主題色膠囊背景高亮。
- 捲動位置記憶：從一篇文章跳轉到另一篇時，左側側邊欄的捲動軸位置保持不變，不會跳回頂部。
3. 中央內文閱讀區 (Main Content)
位於螢幕中央，是承載技術文件內容的核心區域：
- 頁面標題與更新時間：內文頂部展示文章標題（取自 Frontmatter 的
title欄位）以及「最後更新於」日期，方便判斷內容時效。 - 適宜的閱讀寬度：內文區域最大寬度限制為
60rem，避免顯示器過寬導致一行文字過長、閱讀串行。 - 底部翻頁連結：每篇文件結尾自動產生「上一篇」和「下一篇」連結，按側邊欄順序連續閱讀。
- 程式碼區塊複製按鈕：每個程式碼區塊右上角有複製按鈕，一鍵複製程式碼原文。
4. 右側文章大綱 (Table of Contents)
位於內文右側：
- 自動擷取標題：系統在渲染頁面時自動解析目前文件中的二級標題（
##）和三級標題（###），產生「本頁目錄」。 - 隨動高亮追蹤：閱讀過程中隨著頁面向下捲動，大綱會自動高亮目前正在閱讀的小節。
- 點擊平滑直達：點擊大綱中的任意小標題，頁面平滑捲動到對應段落，並更新網址列錨點（如
#整體介面分區說明），方便複製分享。
亮色與暗色模式
EpoCanvas Docs 同時提供淺色和深色兩套主題，兩套配色全部由 src/styles/custom.css 中的 CSS 變數定義：
- 跟隨系統偏好：首次開啟網頁時，網站偵測作業系統的深淺色設定並呈現對應主題。
- 手動切換與記憶：點擊頂欄的主題切換按鈕可手動切換，選擇結果儲存在瀏覽器 LocalStorage 中，下次開啟仍然生效。
圖：同一網站在淺色模式下的顯示效果（以快速上手頁為例）。
手機與平板裝置的響應式調整
在手機或平板等不同尺寸的螢幕上，頁面會自動調整佈局以適應螢幕大小：
| 裝置類型 | 螢幕寬度 | 佈局表現 |
|---|---|---|
| 寬螢幕桌上型電腦 / 筆記型電腦 | >= 1152px | 完整展示標準的三欄佈局（左選單 + 中內文 + 右大綱）。 |
| 平板電腦 / 窄視窗 | 800px ~ 1152px | 右側大綱隱藏，保持左側導覽與內文雙欄佈局。 |
| 智慧型手機 | < 800px | 左右邊欄全部收起，內文全寬展示。點擊頂欄的選單按鈕滑出側邊欄抽屜。 |
無論是使用超寬螢幕顯示器還是在手機上臨時查閱，都能獲得自然舒適的閱讀體驗。