应用台导航页
  • 主页
  • 博客
  • 知识库
  • 工作台
  • 集萃
  • 友链
  • 关于
一个小而美的书摘播放器
haveabreak

一个小而美的书摘播放器

手机可以用来刷视频,为什么不能用来刷自己喜欢的书?本文介绍作者花野猫所开发的书摘查看器——只为了在每一次滑动中,与那个曾经被文字击中的自己,再次相遇。

技术
更新于 2026-06-10
— 1807 字
返回

人人都知道有视频播放器、音乐播放器,但你听说过书摘播放器吗?为什么不能像刷短视频一样刷书呢?如果可以,又以什么样的形式去刷?在我看来,从书中摘录下来的那些句子,天然就应该是用来“刷”的。

我们之所以不读书,常常是因为忍不住去刷手机。但如果刷的内容变成了“书”本身,那些曾经打动过我们的句子,就会像一扇扇小窗,帮我们重新发现读过的书、遗忘的感受。阅读后的哲思,往往是转瞬即逝的,但不断地刷书摘,却可以让它们在我们心里停留得更久、生根得更深。

我所做的,不是一个电子书阅读器,而是一个沉浸式的书摘阅读器。用书摘的方式,让用户可以像刷小红书一样刷自己读过的书。

项目地址:https://break.white-noise.online/zh/card

  • 什么叫做沉浸式书摘阅读器,会引来歧义。不好意思说是阅读器算了改名叫做书摘查看器吧。不如大大方方承认书摘就是用来刷的吧。进一步,笔记也可以用来刷,看过的视频也可以用来刷。可以刷,但是要刷点好的。

书摘查看器功能说明

主页支持刷所有书摘。

  • 主页扁平化随机所有 quotes ,要能自动播放。

支持对书籍和摘录进行管理:所有的书摘,由用户手动录入管理,录入书摘前,要先添加图书。添加图书时,手动录入书名、作者等信息,至于书籍封面,可以在输入 isbn 后,点击解析后,技术上,我们采用 这篇文章 中描述的方法,直接获取得到图片链接。

书摘播放器开发细节

  • 摘录文字使用霞鹜文楷字体,方法见我构建新pwa的通用提示词 | 花野猫的数字花园
  • 导出文件要根据合集名称和时间来命名。导入要支持文件
  • 主页预览的时候,文字就不要允许滚动了,也不要用斜体。
  • quotes/[id] 现在返回主页时,当前的 quote 老是都是,每次都回到第一个 quote 去了
  • quote 详情页没有显示章节和页号。还要有 padding 的。
  • 移动端导航移到右上角吧,然后不用pt了
  • 标题改成书摘阅读器
  • 导入要支持 url
  • 要支持分享功能。
  • 图书详情页的书摘条目,也要能点进书摘详情页
  • quote 详情页要全屏,也要能刷(详情页刷的是同一 book 下的 quotes),还要注意卡片高度
  • 设置中要有一个管理订阅的功能,允许用户填入一个链接,该链接将指向 json 配置文件,每次异步检测订阅,比较图书和摘录的变更情况,提示用户是否更新。当然用户也可以手动点击按钮更新。
  • 支持管理多个订阅,并切换订阅
  • 现在对订阅的请求好像会被缓存
  • isbn的输入框太小了
  • 设置里面导入导出的国际化文案也要补充
  • 主页全屏之后就进不去 quote 详情了
  • 随机按钮看不出来状态生效没生效 全局样式覆盖的问题
  • quote 详情页 bookinfo header 要踢出去。暂不吧
  • quote detail 页书摘没有居中
  • swipe 要支持键盘导航
  • birthdaycake 要添加友链
  • 现在底导航发现始终高亮,修复 active 判断
  • 不光是 js 等资源,页面也要缓存掉。
  • 要添加版本号信息,就在顶导航吧
  • 设置 modal 移动端内容显示不下了。用 tabs 分一下类吧。另外设置的 里面要设置一定的高度,并允许滚动,否则移动端很容易显示不下。
  • 导入导出功能 ,通过文件 和 复制粘贴文本两种方式都要支持
  • 书摘默认按添加时间排序,但要支持能按页码排序,未设置的排到后面,按添加时间排序。
  • 全屏了就不要有上下的按钮了
  • 详情页quote 卡片现在展示不完大段的文字,预览的时候可以阶段,但详情页要有滚动条。card 中的句子前面要有大引号。
  • 要支持增量批量导入。
  • 用 tauri 打包,github action 构建,支持打包安卓、ios、windows、mac ,先暂时只启用安卓和 windows。每个应用独立打包。在 tauri 应用里,顶部导航栏就不需要了。还有 persist 的方式等,你也要考虑下现有的方式能不能行。
  • quotelite 书摘详情要可复制。

文案 优美句子要改成摘抄。 要支持复制

相关内容

  • 求助:为什么谷歌无法访问我的 robots.txt

    求助:为什么谷歌无法访问我的 robots.txt

    更新于2026-06-24

  • 关于如何提取小红书内容

    关于如何提取小红书内容

    更新于2026-06-24

  • 备战高考计划 day6

    备战高考计划 day6

    更新于2026-06-23

  • 信息化工作经验

    信息化工作经验

    更新于2026-06-23

  • pve 虚拟化

    pve 虚拟化

    更新于2026-06-23

文章大纲

  • 书摘查看器功能说明
  • 书摘播放器开发细节

选项
文章 ID: 516

相关内容

  • 求助:为什么谷歌无法访问我的 robots.txt

    求助:为什么谷歌无法访问我的 robots.txt

    更新于2026-06-24

  • 关于如何提取小红书内容

    关于如何提取小红书内容

    更新于2026-06-24

  • 备战高考计划 day6

    备战高考计划 day6

    更新于2026-06-23

  • 信息化工作经验

    信息化工作经验

    更新于2026-06-23

  • pve 虚拟化

    pve 虚拟化

    更新于2026-06-23

dors logoDors

Dors 是花野猫开发为知识工作者打造的数字花园应用,包含的博客、个人记事本、及其他实用功能。

花园

  • 花坛——博客
  • 果园——知识库

工坊——作者开发的实用工具

  • 小记
  • 秒切——一键按秒分割视频
  • 中国重点高校地理位置可视化网站
  • 中国行政区划数据查询平台
  • excel 重命名工具

misc

  • 生活章程
  • 画廊
  • just have fun!

© 2022 - present. All Rights Reserved.滇ICP备2025063395号-1

花野猫打造