Skip to content

SamLaio/SamComicLib

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

2 Commits
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

SamComicLib 線上看書系統

SamComicLib 是一個純前端(Client-side)的線上漫畫與電子書閱讀器。完全在瀏覽器端運行,無須後端伺服器介入即可解析並閱讀本地的漫畫與電子書檔案,確保隱私與閱讀流暢度。

支援格式

  • 漫畫格式.cbz, .zip (內含圖片檔案)
  • 電子書格式.epub (支援 EPUB2 .ncx 及 EPUB3 nav.xhtml 目錄解析)
  • 文件格式.pdf (透過 PDF.js 渲染)

主要功能特色

  • 純前端解析:使用 HTML5 File API 讀取檔案,運用 JSZip 在瀏覽器記憶體中直接解壓縮並讀取圖片或文本,無需上傳檔案到伺服器。
  • 全自適應介面 (RWD):專為桌面與手機等行動裝置最佳化。行動裝置上會隱藏多餘邊距以最大化閱讀區域,並鎖定螢幕避免因原生手勢造成畫面搖晃。
  • 深色 / 淺色模式切換:內建主題切換,提供舒適的夜間閱讀體驗。
  • 智慧目錄跳轉 (TOC):自動解析 PDF 書籤及 EPUB 的內建目錄,提供彈出式選單供快速跳轉章節。
  • 自訂閱讀排版
    • EPUB 縮排設定:可選擇段落開頭縮排或無縮排。
    • 圖片縮放設定 (CBZ/PDF):提供「等比例縮小以符合畫面」與「維持原尺寸(出現捲軸)」兩種模式,並支援手動百分比自由縮放。
  • 觸控與鍵盤友善:支援隱藏式的觸控分區(點擊畫面左右側翻頁),也支援鍵盤事件操作。

依賴套件 (Dependencies)

本專案使用 CDN 動態載入以下開源套件,無須事先 npm install

  • JSZip (v3.10.1): 用於解析 .zip, .cbz.epub 檔案結構與解壓縮。
  • PDF.js (v4.4.168): 用於解析與渲染 PDF 文件。

使用方式

  1. 確保所有核心檔案 (index.html, styles.css, app.js) 都位於同一個目錄中。
  2. 為了避免瀏覽器本地檔案的 CORS 跨域限制(尤其在使用 PDF.js 或 JSZip 時),建議使用簡單的本地伺服器來開啟專案:
    # 使用 Python 內建伺服器
    python -m http.server 8080
    # 或使用 Node.js 的 http-server 等工具
  3. 在瀏覽器中進入 http://localhost:8080
  4. 點擊畫面上的「上傳檔案」選擇本機端的電子書或漫畫檔案,系統即會自動解析並呈現閱讀畫面。

目錄結構

SamComicLib/
├── index.html      # 主程式入口與 UI 介面
├── styles.css      # 介面樣式、RWD 控制與主題變數
├── app.js          # 核心邏輯、檔案解析、格式處理與 DOM 操作
└── README.md       # 專案說明文件

About

使用gemini產生,用於閱讀epub、cbz、pdf、zip的本地靜態網頁

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

 
 
 

Contributors