Epub 在线阅读器

背景

用户希望导入的 epub 电子书能在网站上直接阅读，而非仅仅作为下载文件。

实现方式

架构

VitePress 页面 (iframe)  →  独立 HTML 阅读器  →  epub.js 渲染 epub 文件

• VitePress 页面提供导航框架（顶栏、侧栏）
• public/books/ 下放置独立 HTML 阅读器，通过 <iframe> 嵌入
• 阅读器使用 epub.js 加载和渲染 epub

为什么用 iframe 而非直接嵌入

VitePress 在 SSR 构建时无法解析 CDN 的 ESM 模块，会导致构建失败。独立 HTML 文件不被 VitePress 处理，使用普通 <script> 标签加载 epub.js UMD 构建。

功能特性

• 按钮翻页（上一页/下一页）
• 键盘翻页（← → 方向键）
• 移动端触摸滑动翻页
• 章节目录跳转

关联文件

文件	作用
public/books/money-dog.epub	小狗钱钱电子书
public/books/rich-dad-series.epub	富爸爸系列电子书
public/books/reader-money-dog.html	小狗钱钱独立阅读器
public/books/reader-rich-dad.html	富爸爸独立阅读器
01-personal-finance/books/小狗钱钱.md	VitePress 页面（iframe 嵌入）
01-personal-finance/books/富爸爸穷爸爸.md	VitePress 页面（iframe 嵌入）

注意事项

• epub 文件名必须使用英文/拼音，避免中文 URI 编码问题
• epub.js 从 jsdelivr CDN 加载，需网络连接