Skip to content

M42-OPTIMIZATION-BACKLOG.md

Latest commit

 

History

History
292 lines (214 loc) · 15.4 KB

M42-OPTIMIZATION-BACKLOG.md

File metadata and controls

292 lines (214 loc) · 15.4 KB
Raw

M42 優化工作項目清單

基於 Substack、Ghost、Paul Graham Essays、Stratechery 等成功平台的分析

一、閱讀體驗優化

1.1 排版與字體 (Typography)

ID 項目 說明 影響力 難度 狀態
T-01 文章內文行高優化 目前中文閱讀行高可能過密，建議 1.8-2.0 高 低 ✅
T-02 段落間距調整 增加段落間的呼吸空間，提升可讀性 高 低 ✅
T-03 文章最大寬度限制 限制在 680-720px，符合最佳閱讀寬度 高 低 ✅
T-04 中文標點優化 使用 font-feature-settings 優化標點符號 中 中 ✅
T-05 字體載入優化 預載 Noto Sans TC，避免 FOUT/FOIT 中 中 ✅

1.2 文章導航 (Article Navigation)

ID 項目 說明 影響力 難度 狀態
N-01 閱讀進度指示器 頂部顯示閱讀進度條（參考 Medium） 高 中 ✅
N-02 浮動目錄 長文章時顯示可點擊的浮動目錄 高 中 ✅
N-03 返回頂部按鈕 滾動後顯示返回頂部的浮動按鈕 中 低 ✅
N-04 預估閱讀位置 記住使用者閱讀位置，下次訪問時恢復 低 高

1.3 深色/淺色模式

ID 項目 說明 影響力 難度 狀態
D-01 手動切換開關 在導航列加入明顯的深淺色切換按鈕 高 低 ✅
D-02 記住使用者偏好 使用 localStorage 記住選擇 中 低 ✅

D-01, D-02: VitePress 內建功能

二、內容發現機制

2.1 標籤系統 (Tags)

ID 項目 說明 影響力 難度 狀態
TAG-01 標籤頁面 建立 /tags/ 頁面，列出所有標籤 高 中 ✅
TAG-02 標籤篩選功能 點擊標籤可篩選相關文章 高 中 ✅
TAG-03 熱門標籤展示 在側邊欄或首頁顯示熱門標籤雲 中 中 ✅

2.2 搜尋增強 (Search)

ID 項目 說明 影響力 難度 狀態
S-01 搜尋快捷鍵 支援 Cmd/Ctrl + K 快速開啟搜尋 高 低 ✅
S-02 搜尋結果預覽 顯示匹配內容的上下文片段 中 中 ✅
S-03 搜尋歷史記錄 記住最近的搜尋關鍵字 低 中

S-01: VitePress local search 內建支援

2.3 推薦機制 (Recommendations)

ID 項目 說明 影響力 難度 狀態
R-01 相關文章推薦 在文章底部顯示相關文章（基於標籤） 高 中 ✅
R-02 系列文章功能 支援文章系列，顯示系列導航 高 高 ✅
R-03 熱門文章排行 基於瀏覽量或手動精選的熱門文章 中 中 ✅

2.4 內容組織 (Content Organization)

ID 項目 說明 影響力 難度 狀態
C-01 年份歸檔頁面 按年份組織的文章歸檔 中 中 ✅
C-02 精選文章功能 首頁突出顯示精選/置頂文章 高 低 ✅
C-03 文章狀態標記 顯示「新」、「更新」、「系列」等標記 中 低 ✅

三、訂閱與互動

3.1 Newsletter 訂閱

ID 項目 說明 影響力 難度 狀態
NL-01 Email 訂閱表單 整合 Buttondown/ConvertKit 等服務 高 中
NL-02 文章內嵌訂閱 CTA 在文章中間或結尾加入訂閱呼籲 高 低
NL-03 彈出式訂閱框 閱讀到特定位置時顯示訂閱提示 中 中
NL-04 訂閱成功頁面 訂閱後的感謝頁面 低 低

3.2 社群分享

ID 項目 說明 影響力 難度 狀態
SH-01 社群分享按鈕 Twitter/LinkedIn/Facebook 分享按鈕 高 低 ✅
SH-02 一鍵複製連結 快速複製文章連結的按鈕 中 低 ✅
SH-03 文字選取分享 選取文字後顯示分享選項（類似 Medium） 中 高 ✅
SH-04 Open Graph 預覽優化 確保分享時有正確的標題、描述、圖片 高 中 ✅

3.3 留言與討論

ID 項目 說明 影響力 難度 狀態
CM-01 Giscus 留言系統 使用 GitHub Discussions 作為留言後端 高 中 ✅
CM-02 留言數量顯示 在文章列表顯示留言數 低 中

四、SEO 與效能

4.1 Meta Tags 優化

ID 項目 說明 影響力 難度 狀態
SEO-01 動態 Meta Description 每篇文章自動生成或手動設定描述 高 低 ✅
SEO-02 Open Graph 完整支援 og:title, og:description, og:image 等 高 中 ✅
SEO-03 Twitter Card 支援 支援 Twitter 大圖卡片格式 中 低 ✅
SEO-04 Canonical URL 確保每頁有正確的 canonical 標籤 中 低 ✅

4.2 結構化資料 (Schema.org)

ID 項目 說明 影響力 難度 狀態
SD-01 Article Schema 文章頁面加入 Article 結構化資料 高 中 ✅
SD-02 Person Schema 作者資訊的結構化資料 中 低 ✅
SD-03 BreadcrumbList 麵包屑導航的結構化資料 中 中 ✅
SD-04 WebSite Schema 網站層級的結構化資料（含搜尋框） 中 中 ✅

4.3 效能優化

ID 項目 說明 影響力 難度 狀態
P-01 圖片懶載入 圖片使用 lazy loading 高 低 ✅
P-02 圖片格式優化 支援 WebP/AVIF 格式 中 中
P-03 預連接關鍵資源 使用 preconnect 優化字體載入 中 低 ✅
P-05 字型自託管 @fontsource 取代 Google Fonts CDN 高 中 ✅
P-06 Twitter widget 按需載入 widgets.js 從全域 head 移至 XEmbed.vue 中 低 ✅
P-07 GA4 閱讀深度追蹤 scroll_depth 事件（25/50/75/100%） 中 低 ✅
P-04 Service Worker 支援離線閱讀已瀏覽的文章 低 高

五、品牌識別與特色功能

5.1 視覺一致性

ID 項目 說明 影響力 難度 狀態
B-01 Favicon 完整組 包含各尺寸 favicon、apple-touch-icon 中 低 ✅
B-02 404 頁面設計 自訂品牌化的 404 頁面 中 低 ✅
B-03 載入動畫 頁面切換時的品牌化載入效果 低 中 ✅

5.2 特色功能

ID 項目 說明 影響力 難度 狀態
F-01 RSS Feed 提供完整內容的 RSS 訂閱 高 低 ✅
F-02 文章列印樣式 優化列印時的排版 低 低 ✅
F-03 程式碼複製按鈕 程式碼區塊加入一鍵複製功能 中 低 ✅
F-04 文章字數統計 在文章資訊中顯示總字數 低 低 ✅
F-05 深色程式碼主題 統一的程式碼語法高亮主題 中 低 ✅

F-03: VitePress 1.x 內建功能

5.3 進階功能

ID 項目 說明 影響力 難度 狀態
A-01 文章音訊版本 使用 TTS 或手動錄製的音訊版本 中 高
A-02 閱讀清單功能 讓使用者收藏文章稍後閱讀 中 高
A-03 深色/護眼/Sepia 模式 多種閱讀模式選擇 低 中

六、AI 可讀性（2026-03-20 新增）

ID 項目 說明 影響力 難度 狀態
AI-01 llms.txt + llms-full.txt buildEnd hook 自動生成 AI 可讀索引（llmstxt.org 標準） 高 中 ✅
AI-02 Article-level .md 曝露 每篇文章 URL 加 .md 即取得原始 Markdown 高 低 ✅
AI-03 Markdown alternate link <link rel="alternate" type="text/markdown"> + Schema encoding 中 低 ✅
AI-04 內部交叉連結 5 篇文章新增 8 條延伸閱讀連結 中 中 ✅
AI-05 文章系列導覽 4 系列 9 篇文章啟用 SeriesNav 中 低 ✅
AI-06 OG Image 自動生成 統一畫風的 OG image 批次產出（研究完成，尚未實作） 高 高

完成進度

已完成：56 項 / 總計 59 項 (95%)

✅ Phase 1 - 高影響力 + 低難度（已完成）

  • T-01, T-02, T-03 - 排版基礎優化
  • D-01, D-02 - 深淺色模式（VitePress 內建）
  • SH-01, SH-02 - 社群分享按鈕 + 複製連結
  • SEO-01 - Meta Description
  • F-01 - RSS Feed
  • C-02 - 精選文章功能

✅ Phase 2 - 高影響力 + 中難度（已完成）

  • N-01 - 閱讀進度指示器
  • N-03 - 返回頂部按鈕
  • TAG-01, TAG-02 - 標籤系統
  • R-01 - 相關文章推薦
  • CM-01 - Giscus 留言系統
  • SD-01 - Article Schema
  • SH-04, SEO-02, SEO-03 - Open Graph / Twitter Card

✅ Phase 3 - 中影響力項目（已完成）

  • P-01 - 圖片懶載入
  • N-02 - 浮動目錄
  • C-03 - 文章狀態標記
  • B-01 - Favicon 完整組
  • B-02 - 404 頁面設計
  • F-03 - 程式碼複製按鈕（VitePress 內建）
  • S-01 - 搜尋快捷鍵（VitePress 內建）

✅ Phase 4 - 基礎建設（已完成）

  • IF-01, IF-02, IF-03 - 自訂網域 multivac42.com（Cloudflare + Vercel）
  • AN-01 - Google Analytics 4 整合
  • AN-02 - Google Search Console 驗證
  • AN-03 - Sitemap 生成

📋 待處理 - Newsletter Epic

  • NL-01, NL-02, NL-03, NL-04 - Newsletter 訂閱功能

📋 待處理 - 其他項目

  • S-03 - 搜尋歷史記錄
  • CM-02 - 留言數量顯示
  • N-04 - 記住閱讀位置
  • P-02, P-04 - 圖片格式優化、Service Worker
  • A-01, A-02, A-03 - 進階功能（音訊、閱讀清單、多模式）

七、基礎建設 (Infrastructure)

7.1 網域與部署

ID 項目 說明 影響力 難度 狀態
IF-01 自訂網域 設定 multivac42.com（Cloudflare） 高 低 ✅
IF-02 DNS 設定 Vercel 自動偵測 Cloudflare 並配置 高 低 ✅
IF-03 SSL 憑證 Vercel 自動配置 HTTPS 高 低 ✅

7.2 分析與 SEO 工具

ID 項目 說明 影響力 難度 狀態
AN-01 Google Analytics 4 整合 GA4 追蹤碼 (G-XX4BDZCE2H) 高 低 ✅
AN-02 Google Search Console DNS 驗證完成，已提交 sitemap 高 低 ✅
AN-03 Sitemap 生成 VitePress 內建 sitemap 功能已啟用 高 低 ✅

參考資源

最後更新：2026-02-03

更新紀錄

日期 更新內容
2026-02-03 重構：文章類別集中管理 (config/categories.ts)
2026-02-03 完成 SH-03 文字選取分享功能
2026-02-03 完成 B-03 頁面載入動畫
2026-02-03 完成 S-02 搜尋增強與中文化介面
2026-02-03 程式碼品質修復：9 項（dead code、效能、type safety）
2026-02-03 新增 README.md 開發文檔
2026-01-14 完成 F-02 文章列印樣式
2026-01-14 完成 T-04 中文標點優化, T-05 字體載入優化
2026-01-14 完成 F-04 文章字數統計
2026-01-14 完成 R-02 系列文章功能 (SeriesNav 元件)
2026-01-14 完成 TAG-03 熱門標籤、C-01 年份歸檔、R-03 精選文章
2026-01-14 完成 SD-03 BreadcrumbList, SD-04 WebSite Schema
2026-01-14 完成 SEO-04, SD-02, P-03, F-05 低難度優化項目
2026-01-13 新增 Phase 4 基礎建設：網域、GA4、Search Console
2026-01-13 完成 Phase 3：圖片懶載入、浮動目錄、404 頁面等
2026-01-12 完成 Phase 2：進度條、標籤、留言系統、SEO 等
2026-01-11 完成 Phase 1：排版優化、分享按鈕、RSS 等