前言

年初的时候入手了 mini6 用于影音娱乐，在找阅读器的时候， AppStore 里的软件让我眼前一黑

“为什么云功能全是基于 iCloud 的啊？”

然后就有了这个项目

经历了一周的构思和两周的开发，我在 Github 提交了最初的版本，第一个版本的快照如下：

看起来还行

中间踩了非常多的坑，具体可以看这两篇文章：

介绍

经过将近一个月的迭代，版本号也来到了 v1.4.0，这是它现在的样子：

好像没多大变化

线上地址：yue.norah1to.com

仓库地址：NoraH1to/yue

导入

支持本地导入和从 webDAV 导入，webDAV 需要配置自己的服务：

配置自己的服务

格式

暂时只支持 epub、pdf

哪天我有看漫画的需求了，会支持 zip 格式

反向代理

Web 应用最大的问题就是使用第三方服务时的跨域问题，不巧的是，webDAV 服务的标准实现是存在跨域限制的

假设你要使用坚果云的 webDAV 服务，它的地址为 https://dav.jianguoyun.com/dav，你使用该地址进行配置，是行不通的：

oops

为了解决该问题，我通过 vercel 的路由功能实现了反向代理：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
// vercel.json
{
  "rewrites": [
    { "source": "/proxy/:match/:url*", "destination": "https://:match/:url*" },
    {
      "source": "/proxy/:match/:url*/",
      "destination": "https://:match/:url*/"
    },
    {
      "source": "/((?!proxy/.*).*)",
      "destination": "/index.html"
    }
  ],
  "trailingSlash": false
}

也就是说，如果你要反代 https://{服务地址}，只需要将地址改为 https://{项目地址}/proxy/{服务地址} 即可

我们项目的地址为 yue.norah1to.com，如果服务地址为坚果云 dav.jianguoyun.com/dav，此时我们填入 https://yue.norah1to.com/proxy/dav.jianguoyun.com/dav 即可：

完美

注意！

项目中使用了 webdav-client 这个库来构建 webDAV 客户端，如果我们使用反向代理修改了服务请求地址，会导致客户端解析 webDAV 服务文件夹路径出错，详情可以看我提出的 issue

我在 issue 中建议增加让用户自定义 basePath（根路径）的选项，并提交了一个 pr，该 pr 已经并入且在 v5.1.0 中发布

所以如果你使用了反向代理，记得配置其根路径

例如上面坚果云的反代地址 https://yue.norah1to.com/proxy/dav.jianguoyun.com/dav

它的真实服务地址为 dav.jianguoyun.com/dav，所以它的根路径为 /dav：

文件管理

有两种方式来给图书分类

标签

第一种是标签的形式，你可以在侧边栏中添加标签，例如我这样的：

可以通过长按图书的方式呼出菜单，通过菜单中的选项编辑标签：

也可以多选批量编辑标签：

webDAV 目录

第二种就是 webDAV 中的目录结构了，需要设置自己的 webDAV 服务才能使用：

阅读器

阅读器算是最核心的功能了，在这里先给 epubjs 和 pdf.js 磕个头，没有这两个健壮的项目就没有 yuè

阅读器大致长这样：

很简单，但是够用

上面是章节信息和时间，下面则是页码

说到页码，因为实现原因，epub 展示的是当前章节页码，pdf 则是总页码

翻页

点击屏幕两侧翻页

又或者左右滑动翻页（非常遗憾没有动画，你就说能不能用吧）

同时也支持键盘和鼠标滚轮翻页，上下左右 pageUp,pageDown 等等

工具栏

点击屏幕中心可以呼出工具栏（键盘敲空格也行）：

上面显示标题，并提供了返回的操作按钮

下面第一行是导航栏，可以翻页、跳转到指定进度

第二行从左到右，依次是

  • 目录：

  • 切换深色模式

  • 切换全屏

  • 设置：

最后

没错，这里就是最后了！

你看它是不是很简洁（陋）

但这本身就是为了满足我个人需求的小项目，所以我用的爽就完事~

当然，如果你有想法，欢迎提交 issue 和 pr 🚀

未完待续