SamComicLib 是一個純前端(Client-side)的線上漫畫與電子書閱讀器。完全在瀏覽器端運行,無須後端伺服器介入即可解析並閱讀本地的漫畫與電子書檔案,確保隱私與閱讀流暢度。
- 漫畫格式:
.cbz,.zip(內含圖片檔案) - 電子書格式:
.epub(支援 EPUB2.ncx及 EPUB3nav.xhtml目錄解析) - 文件格式:
.pdf(透過 PDF.js 渲染)
- 純前端解析:使用 HTML5 File API 讀取檔案,運用
JSZip在瀏覽器記憶體中直接解壓縮並讀取圖片或文本,無需上傳檔案到伺服器。 - 全自適應介面 (RWD):專為桌面與手機等行動裝置最佳化。行動裝置上會隱藏多餘邊距以最大化閱讀區域,並鎖定螢幕避免因原生手勢造成畫面搖晃。
- 深色 / 淺色模式切換:內建主題切換,提供舒適的夜間閱讀體驗。
- 智慧目錄跳轉 (TOC):自動解析 PDF 書籤及 EPUB 的內建目錄,提供彈出式選單供快速跳轉章節。
- 自訂閱讀排版:
- EPUB 縮排設定:可選擇段落開頭縮排或無縮排。
- 圖片縮放設定 (CBZ/PDF):提供「等比例縮小以符合畫面」與「維持原尺寸(出現捲軸)」兩種模式,並支援手動百分比自由縮放。
- 觸控與鍵盤友善:支援隱藏式的觸控分區(點擊畫面左右側翻頁),也支援鍵盤事件操作。
本專案使用 CDN 動態載入以下開源套件,無須事先 npm install:
- 確保所有核心檔案 (
index.html,styles.css,app.js) 都位於同一個目錄中。 - 為了避免瀏覽器本地檔案的 CORS 跨域限制(尤其在使用 PDF.js 或 JSZip 時),建議使用簡單的本地伺服器來開啟專案:
# 使用 Python 內建伺服器 python -m http.server 8080 # 或使用 Node.js 的 http-server 等工具
- 在瀏覽器中進入
http://localhost:8080。 - 點擊畫面上的「上傳檔案」選擇本機端的電子書或漫畫檔案,系統即會自動解析並呈現閱讀畫面。
SamComicLib/
├── index.html # 主程式入口與 UI 介面
├── styles.css # 介面樣式、RWD 控制與主題變數
├── app.js # 核心邏輯、檔案解析、格式處理與 DOM 操作
└── README.md # 專案說明文件