更新日誌

改進內容

新的閱讀時間計算算法

取代了簡單的「字數/250」估算，實施了更精確的閱讀時間計算：

計算因素： - 中文字符：400 字/分鐘（原 250 字/分鐘） - 英文單詞：200 詞/分鐘 - 段落數量：每段落增加 1% 閱讀時間（上下文切換成本） - 標點密度：高密度標點增加最多 20% 時間（複雜句子理解成本）

公式： 閱讀時間 = (中文字數/400 + 英文詞數/200) × 段落因子 × 標點因子

效果： - 短文章（<500字）：1-2 分鐘（更準確） - 中等文章（1000-2000字）：3-6 分鐘 - 長文章（>3000字）：8-15 分鐘（根據複雜度調整）

其他改進

• 補發文章：生成 2026-03-31 李嘉誠港口交易文章
• Sitemap 更新：添加 4月6日、4月7日文章，移除不存在的世界衛生日文章

為所有文章添加標籤，新增標籤雲頁面與相關功能。

更新內容

• 為 33 篇文章添加標籤（每篇 3-5 個）
• 標籤雲頁面 tags.html
• 文章頁顯示標籤
• 點擊標籤查看相關文章
• 首頁新增熱門標籤預覽
• 導航新增標籤連結

新增站內搜尋功能，支援模糊搜尋標題、摘要與分類。

更新內容

• 搜尋頁面 search.html
• 輕量模糊搜尋演算法
• 即時搜尋結果顯示
• 搜尋結果高亮關鍵字
• 首頁新增搜尋框
• 導航新增搜尋連結

標籤系統修復

問題修復

• 修復標籤不顯示問題：文章頁面現在正確顯示標籤（在文章結尾、相關文章之前）
• 修復標籤雲頁面：從「暫無標籤」修復為顯示視覺化標籤雲，包含25+標籤
• 修復JavaScript路徑問題：tags.js、search.js、related-articles.js 現在正確處理 article/ 子目錄中的相對路徑

數據更新

• 為全部35篇文章自動生成標籤（3-5個標籤/文章）
• 創建 scripts/add-tags.py 工具用於自動標籤生成

頁面重新設計

標籤雲頁面 (tags.html)

• 視覺化標籤雲：字體大小根據文章數量對數縮放（0.85rem - 1.6rem）
• 顏色漸變：按使用頻率從淺到深（Klein Blue 色系）
• Hover效果：放大、顯示文章數量、邊框變色
• 字母分組列表：所有標籤按首字母分組顯示
• 響應式布局：支持手機、平板、桌面

閱讀清單頁面 (reading-list.html)

• 空狀態設計：插圖 + 文案 + 瀏覽文章按鈕
• 文章卡片布局：與首頁統一的3列網格（桌面）
• 移除按鈕：卡片右上角 X 按鈕，hover 顯示
• 動畫效果：卡片載入淡入動畫、移除淡出動畫
• 批量操作：清空清單按鈕帶確認對話框

搜尋頁面 (search.html)

• 大搜尋框：置中、圓角、聚焦效果
• 搜尋結果卡片：與首頁統一的布局
• 關鍵字高亮：使用 <mark> 標籤高亮匹配文字
• 排序選項：按相關度或日期排序
• 熱門搜尋：香港、人工智能、中東、經濟
• 無結果狀態：友好提示 + 熱門文章推薦

文章頁面 (article.html)

• 閱讀清單按鈕：從底部移到文章 header 區域
• 標籤顯示：文章結尾的圓角 pill 形狀標籤
• Hover效果：標籤hover時變為Klein Blue背景

視覺風格統一

顏色系統

• 主色：Klein Blue (#002FA7)
• 背景：白色 / 深色模式黑色
• 文字：深灰 / 淺灰
• 強調：紅色（用於刪除按鈕）

組件統一

• 按鈕樣式：圓角6px、統一padding、hover效果
• 卡片陰影：0 8px 24px rgba(0,0,0,0.08)
• 間距系統：8px基準
• 字體層級：統一的字體大小和行高

響應式

• 手機端：單列布局
• 平板：2列
• 桌面：3列

技術改進

JavaScript 優化

• tags.js：支持多標籤篩選（預留）、視覺化標籤大小計算
• reading-list.js：添加載入動畫、移除動畫
• search.js：高亮匹配關鍵字、排序功能

CSS 優化

• 統一的過渡動畫（0.2s-0.3s ease）
• 深色模式支持
• 無障礙標籤（aria-label）

測試驗證

• 所有35篇文章標籤顯示正常
• 標籤雲頁面顯示25+標籤
• 搜尋功能高亮顯示正常
• 閱讀清單添加/移除功能正常
• 響應式布局在手機/平板/桌面正常

新增閱讀清單功能，讓用戶可以保存文章到本地清單，提升回訪率。

更新內容

• 文章頁新增「加入閱讀清單」按鈕
• 使用 localStorage 儲存文章資訊
• 新增「我的閱讀清單」獨立頁面
• 支援從清單移除文章
• 導航與頁尾新增閱讀清單連結

手機端導航重構

漢堡選單

• 側邊抽屜選單：手機端改為 ☰ 圖標，點擊展開右側選單
• 圖標導航：選單項配有統一風格的 Lucide 圖標
• 平滑動畫：選單滑入/滑出動畫、背景遮罩漸變
• 點擊外部關閉：點擊遮罩或按 ESC 鍵關閉選單

底部導航欄

• 4個核心入口：首頁、分類、搜尋、閱讀清單
• 固定底部：始終可見，方便手機操作
• 當前頁面高亮：激活狀態顯示 Klein Blue
• 圖標+文字：清晰的功能識別

觸控目標優化

• 最小44px：所有按鈕和點擊目標確保最小 44x44px
• 增加間距：導航項目間距擴大，避免誤觸
• 手指友好：移動端按鈕尺寸優化

文章目錄（TOC）

桌面端浮動目錄

• 右側固定位置：距離右側 2rem，跟隨滾動
• 自動生成：從 h2/h3 標題自動生成目錄
• 當前章節高亮：使用 IntersectionObserver 追蹤閱讀位置
• 可折疊：點擊標題可收起/展開目錄
• 平滑滾動：點擊目錄項平滑滾動到對應章節

手機端頂部目錄

• 可折疊設計：默認收起，點擊展開
• 全寬顯示：佔據屏幕寬度，易於觸控
• 階層縮進：h3 標題縮進顯示層級關係

社交分享功能

分享按鈕組

• 位置：文章標題下方、元數據區域
• 平台支持：
• 複製連結（帶成功提示）
• Facebook
• Twitter/X
• LINE
• 微信（彈窗提示）
• Web Share API（如支援）

用戶體驗

• Toast 提示：複製成功後顯示提示
• Web Share API：支持原生分享菜單
• 微信分享彈窗：提供複製連結的便捷方式

首頁視覺層級優化

區塊分隔

• 精選報導：Hero 區塊添加「精選報導」標籤
• 最新報導：文章網格區塊添加「最新報導」標籤
• 分隔線：兩區塊之間添加漸變分隔線
• 區塊留白：增加區塊間距，提升視覺呼吸感

卡片統一

• 統一比例：所有卡片圖片使用 16:9 比例
• 統一高度：CSS Grid 確保卡片對齊
• 圖片外框：添加圓角和 overflow hidden
• Hover效果：圖片放大、卡片上浮陰影
• 內容區域：獨立 padding，結構清晰

響應式優化

斷點調整

• 桌面：≥1200px，顯示浮動 TOC
• 平板：768px-1199px，隱藏 TOC，2列卡片
• 手機：<768px，底部導航，手機 TOC

字體大小

• 響應式字體縮放
• 觸控目標在各尺寸設備適配

技術實現

新文件

• js/toc.js：目錄生成和滾動追蹤
• js/share.js：社交分享功能

模板更新

• nav.html：添加漢堡選單和底部導航
• head.html：添加移動端導航 CSS
• footer.html：添加底部導航欄
• index-template.html：視覺層級和卡片統一
• article-template.html：TOC 和分享按鈕

建置腳本更新

• 更新卡片生成邏輯，匹配新的 HTML 結構

測試驗證

• 桌面端導航正常
• 手機端漢堡選單開關正常
• 底部導航四個入口正常
• 文章 TOC 生成和高亮正常
• 社交分享按鈕點擊正常
• 複製連結功能正常
• 首頁卡片對齊正常

在文章頁添加字體大小控制按鈕，讓讀者可根據個人需求調整閱讀體驗。

功能說明

• A-：縮小字體（每次 -10%）
• A：重置為預設大小（100%）
• A+：放大字體（每次 +10%）

技術實現

• 使用 CSS 變量 --article-font-scale 動態調整
• 調整範圍：80% - 150%
• 偏好設定自動儲存到 localStorage
• 下次訪問自動恢復上次設定

位置

文章頁導航欄右側，與深色模式切換按鈕並排

為分類頁面添加文章摘要顯示，提升資訊密度與用戶體驗。

更新內容

• 分類頁文章卡片現在顯示摘要（前 120 字）
• 優化卡片樣式，支援多行文字截斷
• 維持原有響應式設計

為全站所有圖片添加 loading 屬性，提升頁面載入效能：

• 文章頁 Hero 圖片：loading="eager" — 首屏優先載入
• 首頁次要圖片：loading="lazy" — 進入視口才載入
• 存檔頁全部圖片：loading="lazy" — 32 張圖片延遲載入
• 分類頁動態圖片：loading="lazy" — 動態生成時添加

預期效果： - 首屏載入速度提升（減少初始 HTTP 請求） - 節省用戶流量（未滾動到的圖片不載入） - 改善 Lighthouse 效能評分

將 build-site.py 中的硬編碼模板抽出為獨立模板文件，並引入組件化架構統一管理網站結構。

主要改動

• 新增 templates/components/ 目錄存放共用組件
• 創建 head.html, header.html, nav.html, footer.html, theme-script.html
• 重寫 build-site.py 從文件讀取模板而非硬編碼
• 統一導航欄 scrollbar 隱藏樣式
• 導航與頁腳新增「更新日誌」連結

好處

以後修改導航只需要編輯 templates/components/ 目錄下的文件，無需修改 Python 代碼。所有頁面（index, archive, category, changelog, article）使用一致的組件。

新增網站地圖與 RSS 訂閱功能，提升搜尋引擎可見度與用戶訂閱體驗。

新增功能

• Sitemap.xml：包含 28 個 URL，幫助搜尋引擎完整索引
• RSS Feed：支援 Feedly、Inoreader 等閱讀器訂閱
• 所有頁面添加 RSS auto-discovery 標籤

文章頁面現在會自動顯示相關文章推薦。系統根據文章分類自動匹配同類別的其他文章，幫助讀者發現更多感興趣的內容。

功能特點

• 基於相同分類智能推薦
• 每篇文章顯示最多 3 篇相關文章
• 客戶端動態載入，不影響頁面性能

為所有頁面補齊社交媒體分享預覽標籤，分享連結時會顯示專業的新聞卡片樣式。

更新內容

• 首頁：完整的 OG 與 Twitter Card 標籤
• 存檔頁：新增分享預覽支援
• 分類頁：新增分享預覽支援
• 文章頁：維持現有完整支援

修復霍爾木茲海峽文章的類別設定，統一「國際地緣政治」類別名稱，確保相關文章推薦正常運作。

修復內容

• 修正文章 Markdown 類別：「國際局勢」→「國際地緣政治」
• 更新 articles.json 中的類別映射
• 修復 update_articles_json.py 腳本的硬編碼 bug
• 現在會正確顯示同類別的相關文章（如十五五規劃、港口交易等）

技術筆記

相關文章功能依賴 articles.json 中的分類匹配。下次新增分類時需同步更新： - build.py 中的 CATEGORY_SLUGS 映射 - build-site.py 中的 category_slugs 映射 - update_articles_json.py 中的 category_slugs 映射

統一所有頁面的視覺設計，修復手機端導航顯示問題。

改動內容

• 統一所有頁面的 header-top 和 nav-content 設計
• 統一 Dark Mode Toggle 樣式與行為
• 修復手機端導航換行問題，改為單行滾動
• 統一 logo 結構（添加報導 span）

每日深度報導網站正式上線。

功能列表

• 端傳媒 + SCMP 混合風格設計
• 深色 / 淺色雙主題支援
• 響應式設計（桌面、平板、手機）
• 閱讀進度條
• PWA 離線閱讀支援
• 文章分類與存檔頁面