昨天把文章文稿、插圖都順利搬上 WordPress，今天則是來處理更進階的「內容切版」與「視覺穿插」大挑戰！
目標是讓讀者不只能閱讀，更能一秒切換觀點、一眼看懂差異，打造「會說故事的 UI + UX」！
這篇文章原本就有兩個版本的內容：
| 模式 | 敘述風格 | 讀者對象 |
|---|---|---|
| 小白模式 | 童話故事＋角色對話 | 初學者、聽過區塊鏈但不熟的人 |
| 專家模式 | 技術原理＋應用分析 | 想更深入理解 Web3 的設計師、產品人 |
但問題來了：
❓ 要怎麼在同一頁面中讓兩種風格並存又不混亂？
| 元件名稱 | 功能說明 |
|---|---|
| Toggle 切換開關 | 顯示／隱藏小白或專家模式的內容塊（不 reload） |
| Tooltip + 摺疊區塊 | 專有名詞點擊補充解釋，避免閱讀中斷 |
| Anchor 目錄定位 | 快速導引到想看的模式段落或表格 |
這部分也同步優化：
| 圖像 | 對應段落 | 切換顯示策略 |
|---|---|---|
| 三隻小豬角色圖 | 開場故事段 | 小白模式保留，專家模式不顯示 |
| 駭客狼 | 危機段落 | 小白模式保留，專家模式不顯示 |
| 表格視覺化 | 專家段落 | 專家專用，搭配數據與文字比對 |
| 模式 | 內容排版範例 |
|---|---|
| 小白 | 插圖 + 故事敘述 |
| 專家 | 圖表 + 清單說明 + 專有名詞定義 |
👀 在桌機版下，會使用動畫滑動進場，強化閱讀節奏。
📱 手機版則重新排版為單欄垂直展示，確保可讀性與互動滑順。
今天是將「靜態草稿」轉換為「活著的內容」的重要一天！
切換機制不只是炫技，而是希望讓每個讀者都能在自己的節奏與理解中獲得樂趣與吸收。
接下來，還有一大任務等著我 —— Day16 要讓這些元件動起來，變得更直覺、更吸睛！
iThome鐵人賽
看影片追技術