Home
Circle 阅读模式 – 为网页适配更舒适的阅读模式，支持深色模式[Chrome]

Circle 阅读模式 – 为网页适配更舒适的阅读模式，支持深色模式[Chrome]

Chrome 2021/03/04 37

Circle 阅读模式 是一款可以将网页中内容提取出来重新整理，渲染成更方便阅读的排版界面的 Chrome 扩展，只用了三个月，写了 9kb 的解析引擎来完成这件事。支持多种配色，就能让原本没有适配深色模式的网站也能用深色模式呈现出来了。@Appinn

Circle 阅读模式 - 为网页适配更舒适的阅读模式，支持深色模式[Chrome]

来自发现频道：让网页赏心悦目、让阅读回归初心 – Circle 阅读模式。

怎么讲呢，现在还能在桌面级浏览器上认真阅读的同学已经非常少了，而移动优先导致目前的中文网页设计惨不忍睹，比小众软件丑的不多，但也绝对不少。用 Circle 一类的工具至少可以缓解这个尴尬的事实。

Circle 阅读模式｜reader mode

Circle 是一款十分新鲜的 Chrome 扩展，两日前上架，开发者 @ranhexyz 提到的几个点：

  • 广告太多分散注意力
  • 配色太丑不忍直视
  • 字体太小看不清
  • 排版太乱找不到正文
Circle 阅读模式 - 为网页适配更舒适的阅读模式，支持深色模式[Chrome] 1
Circle 使用前后对比

这个和简悦比有什么优势呢？

以及在发现频道中，@longest 同学提出了灵魂拷问：这个和简悦比有什么优势呢？我觉得的开发者 @ranhexyz 回复可以直接放在这里：

#简悦 是基于模版匹配，小众网站识别不了（除非做模版提交）。内部使用的智能解析不够智能，解析速度慢，页面不够简洁

你可以试试 从视网膜到视皮层——视觉系统知多少—-中国科学院上海分院 对比解析效果和解析速度。目前阅读模式做的最好的是 Safari ，但是对于上面网址的正常内容依然无法正常解析，但 Circle 能够做到。原因在于我们自己研发的解析引擎，而且我推崇软件简洁轻量，个人感觉简悦比较重。

除了上面说明之外，Circle 还有更多功能。如下：

文章标题的解析。简悦和很多同类产品都是直接把网页 title 拿来作为标题，造成文章标题含有网站信息。如当前文章叫：“让网页赏心悦目、让阅读回归初心 – Circle 阅读模式”。其他同类产品会是识别成 “让网页赏心悦目、让阅读回归初心 – Circle 阅读模式 – 发现频道 – 小众软件官方论坛”

智能解析其他页面，打开 第1章 监控拍到丧尸（1）_无罪谋杀-笔趣阁 ，打开 Circle 解析的页面后滚动查看，会自动追加其他页面到当前页面。无限加载看小说美滋滋。目前业界能做到还未发现。

关于最后一个小说阅读能自动载入新页面的功能，还是非常赞的。

深色模式

再来说一下深色模式，Circle 支持好几种配色，并且可以调整字体、大小、页面宽度、字间距、行高、对齐方式等内容：

Circle 阅读模式 - 为网页适配更舒适的阅读模式，支持深色模式[Chrome] 2

Circle 可以一键让小众软件有深色模式，感觉效果还不错：

Circle 阅读模式 - 为网页适配更舒适的阅读模式，支持深色模式[Chrome] 3

另外，开发者也守在发现频道等着提意见呢，青小蛙就觉得需要快捷键和白名单功能。

Circle 下载安装

对于有兴趣的同学可以参考如下地址：

祝各位都有一个愉快的阅读体验。

更新，简悦开发者 @Kenshin 的回复：

嗨，我是 Kenshin 仅更正一个地方 

简悦是基于模版匹配，小众网站识别不了（除非做模版提交）。内部使用的智能解析不够智能

  1. 简悦早就不是以模板匹配方案了，模板匹配只是解析方案之一而已。
  2. 解析速度慢 → 是因为简悦会分析页复杂页面的情况，所以它支持更多页面结构，除此以外也支持 Latex 类的解析。
  3. 文章提到的 从视网膜到视皮层——视觉系统知多少—-中国科学院上海分院 在 新版中已经非完美解决 了，基于新版的方案，甚至还能做的更多。
  4. （基于第二点）所以 @青蛙 提到的页面简悦目前就能开启。（更不用说新版了。

另外，标题的问题完全可以通过 简悦自己的插件来解决，之所以没有完全解决的原因是，用户希望保留最初的标题。 

最后，简悦从最开始就不是一仅只是 阅读模式，这点我在 1.x 发布时就提过了，生成阅读模式只是简悦的基础功能。

翻页的功能很赞 👍 不过看小说的话，有个很牛掰的 油猴脚本 可以实现，并且能做的更多。

因为 我不想重复造轮子，所以一般情况下我都会推荐使用这个 油猴脚本。（翻翻我的 Github Issues 就知道了。

有新品是好事，更何况也是开源产品。 

分享

相关

, ,

37 条留言

  1. 王每每 2021/03/04 回复

    我在手机kiwi浏览器上用，字体太小，能针对移动端优化一下吗？

  2. 染河 2021/03/04 回复

    我是作者，哈哈哈哈。竟然被推到了首页，感动到哭了。但我要说两句，请不要嫌弃我啰嗦

    circle 阅读模式是我 997 之余开发出来的，目前只是一个简单的测试版本。很多功能还待开发

    还有一个功能小编没有发现，除了内置五款主题之外，最后一个点击之后可以自定义你需要的主题（背景、字体和链接颜色）

    然后也看到简悦的作者的回复了，说实话简悦也做的很不错，各种各样的功能，而且发展好多年了。没有哪个好那个坏，只有那个更合适自己

    所以我是染河，circle 阅读模式的开发者。遇到 bug 和功能建议提到这里：https://github.com/hewenguang/circle

    谢谢各位厚爱！！！比心

  3. SeptimusX 2021/03/04 回复

    虽然用来举例的中科院上海分院网站那篇文章在Firefox的阅读模式中完美支持，但还是期待有个Firefox版。

  4. JoeBlack 2021/03/04 回复

    为什么我打开后一片空白? 测试页面就是文章中的链接.
    80内核的星愿浏览器. 仅本插件有此问题. 兼容性问题?

  5. JOEBLACK 2021/03/04 回复

    做了以进一步测试, 与 uBlock Origin 冲突. 打开 uBlock 就会是空白. 不知道怎么解决.
    uBlock 用户量非常大, 希望作者改进或者说明一下解决方法.

  6. 染河 2021/03/04 回复

    目前仅考虑 chrome，等产品稳定会对其他平台进行适配，感谢支持。如果可以的话，麻烦提到对应的仓库 issue 里面，后期规划会处理

  7. 染河 2021/03/04 回复

    目前仅考虑 chrome，等产品稳定会对其他平台进行适配，感谢支持

  8. 王小明 2021/03/04 回复

    希望能够上架edge商城~

  9. Vulcan09 2021/03/05 回复

    献上一个小小的Star，很棒的一个插件哈哈 (▭-▭)✧

  10. 测试 2021/03/05 回复

    为什么打开 插件后 同一张图片 会 获取好几次？为什么要读取图片..

  11. 测试 2021/03/05 回复

    说不明白，可以看下图片：
    安装插件前 只有一个 图片请求，
    安装后 同一个图片 多次请求
    https://imgtu.com/i/6e0Yxs
    https://imgtu.com/i/6e0GGQ

  12. Kai Zhong Chu 2021/03/07 回复

    好像没有哪一个阅读扩展，甚至电子书阅读器App，考虑在100% 电脑屏幕是16：10 或者16：9的横屏模式下，将文字内容排版成双页显示的设计，都无非是根据Web的内容，把文字页面按照竖屏一页的方式显示，这在所有电脑用户都是采用横屏操作的情况下，非常不爽！

  13. 小恐龙 2021/03/08 回复

    试用了一下, 尽管我买了简悦, 但我要说比简悦更简洁方便. 功能更少但上手更快.

  14. 染河 2021/03/09 回复

    感谢支持

  15. 染河 2021/03/09 回复

    已经有人反馈相关需求，已经加入规划中

  16. 染河 2021/03/09 回复

    我是开发者。原因是：Circle 为了解析页面会拷贝一个出来，对页面格式整理一次。又为了不影响当前页面，所以会做一个拷贝。这样图片会额外多一次加载。除此之外还有一个原因是 Circle 支持无限加载其他页面，这个功能要求必须有一个额外的拷贝存在

    但是存在网页是 markdown 或者 pjax 加载的网页，这样初始化就要进行测试。测试 6次失败就认为解析失败

    加载多次因为有浏览器缓存的处理，可以忽略

  17. 染河 2021/03/09 回复

    已经发布最新版本，刚刚安装 uBlock Origin 试了下，没发现问题，你更新试试

  18. YakshaChien 2021/03/10 回复

    @小恐龙 大佬你的公文插件实在是太好用了！大概是我电脑上使用频率最高的插件之一了。

  19. 染河 2021/03/12 回复

    已经上线：https://microsoftedge.microsoft.com/addons/detail/circle-%E9%98%85%E8%AF%BB%E6%A8%A1%E5%BC%8F%EF%BD%9Creader-mode/hjkjecmcifblnghjpcjaofpakjpgfjio

  21. skystar 2021/03/16 回复

    好奇怪，进入全屏以后为什么没有退出全屏的按钮？

  22. skystar 2021/03/16 回复

    试了一会，提几个问题，也是之前放弃简悦的原因，一个是视频依旧无法在“阅读模式”下显示，现在都是H5了，阅读模式只是一个模式，技术上嵌入视频应该不是不可行的吧，毕竟正文段的视频都是阅读理解必须的。第二点希望在检测到评论部分的时候能增加一个单独的显示按钮，或者继续下拉自动加载评论，不少网站的文章评论区是必看的，比如小众就是，可以不加载写评论的交互部分。另外楼上那个提宽屏双页显示的+1+2+3支持一下，这个才是真的阅读模式了

  23. skystar 2021/03/16 回复

    再提2个问题，一个是对剪藏类的扩展提示不太友好，剪藏进度和提示都看不到，强制置顶覆盖了页面的内容。另一个是每次加载页面都会先加载原始内容闪一下然后才显示阅读模式。这2个问题加载一起我想是否能够后台加载内容先不显示，加载解析完成以后直接显示阅读模式，也不必去覆盖原先的网页内容，那么其他扩展的置顶提示也能够被看到，反正页面的内容是被复制了一份的，所以关闭阅读模式再去调原来的数据刷新加载也能实现。当然这是针对开启了自动阅读模式的人，手动开启可以有另外的一套实现逻辑

  24. skystar 2021/03/16 回复

    继续用了一段时间发现匹配过度的不少，很多图片与视频为主的网页都被取了标题变成阅读模式，我觉得很好判断吧，整页都没有超过20个字整段正文内容的就不需要变成阅读模式了。另外提供个链接供测试，页面的动图不会加载，http://r.remove.bg/nl2/x1ght/5rplo.html?m=AUoAACGd014AAchzv7wAALGI0rkAAYCq8CEAmdykAA4__QBgIZLVXAghpag7RoWPFQMnJoJmZwAOHNY&b=f7a6ae41&e=733a2a2b&x=Xw_9V3XwBQDsYeKDNMw8zg

  25. 染河 2021/03/18 回复

    不好意思刚刚看到，工作太忙了

    针对你以上说的问题，我这边也接到反馈了，目前 Circle 的算法只是很粗糙的，像你说的视频之类的都还没有去适配算法

    Q：进入全屏以后为什么没有退出全屏的按钮？
    A：第一版本没有考虑。下个版本会加上退出按钮

    Q：一个是视频依旧无法在“阅读模式”下显示
    A：视频可以提供一个网址，用来调试。为了只展示正文，会存在误伤。有测试网址更方便调试

    后面的所有问题我都会认真评估的。感谢反馈

  26. 染河 2021/03/18 回复

    基于一个网友提供的 ublock 配置信息查到了原因，具体见：https://github.com/hewenguang/circle/issues/22

  27. 染河 2021/03/18 回复

    收到反馈，目前用户反馈过度识别比较多，已经开始重写算法了，下个版本不会再多次加载资源了，敬请期待

  28. skystar 2021/03/19 回复

    辛苦您了，百忙中还来看消息解答，没想到还会有插件互相兼容的问题。
    后来我又有了些想法，其实可以做一个增强阅读的扩展，保留原来的阅读模式，也可以进入非阅读模式，直接改页面的格式，比如强制修改字体，比如不太适合屏幕阅读的衬线字体，又比如可以增加优化的黑夜模式，在比如把所有页面上的文字网址变成链接，部分网页支持自动加载下一页，增加内置的TOC显示器，增加网页鼠标限制破解，增加滚动到最上和最底的按钮等。
    比较容易有兼容问题的可以后做或不做，另一些提到的单项功能希望能整合到一起给大众一个更舒适的网络

  29. 染河 2021/03/22 回复

    收到，关于你的反馈我全部都看了下，想法真的不错，不过有部分的建议我没太看懂。比如 “增加内置的TOC显示器 ” 等这些。是否可以加我微信 hewenguang_fe 详细聊一聊你的想法

  30. 秦寿 2021/03/25 回复

    感觉很不错，设置比较简洁，没这么多乱七八糟。启动的快捷键我直接就猜到了。哈哈哈，有些网站是分页的，要是能全文展开就好了，比如guancha.cn

  31. aic 2021/04/01 回复

    好！简悦的字体大小调节范围太小，100还是觉得字太小了，一直因为这点很少用，这个插件看来能解决痛点了。

  32. 染河 2021/04/02 回复

    最新版本已经修复多次加载资源的情况，全新的解析引擎（9kb -> 5kb），范围更强的识别能力，欢迎使用。Chrome 已经审核，其他平台陆续上架中

  33. 染河 2021/04/02 回复

    全文现在还不可以，正在开发自研的排版引擎，这个工作量有点大，静候佳音吧

  34. 染河 2021/04/02 回复

    Circle v1.0.3 版本变动记录

    全新的解析引擎，从 9kb 缩小到 5kb 的极致轻量，解析能力做到更强大更智能，覆盖更多文章页面

    页面右侧工具栏

    1 “调整页面” 按钮和 “退出” 按钮替换顺序，为了方便退出 Circle

    快捷键相关

    1 自定义快捷键
    2 解决输入或者复制等操作的冲突
    3 双击触发修改为单击触发，支持单键（如：C）、组合键（如：Ctrl + C）和多组合键（如： Ctrl + Shift + C）

    bug 修复

    1 Edge 平台验证码冲突
    2 图片等资源的重复加载

    新特性

    1 返回顶部
    2 文章目录
    3 一键隐藏文章图片
    4 设置图片对齐方式

    右键

    1 右键进入设置页面
    2 右键加入白名单
    3 右键进入聚焦模式

  35. 染河 2022/04/21 回复

    自从去年 3月第一个版本发布到现在已经过去了一年，在这一年中，我不断的完善和更新 Circle 阅读助手。目前 Circle 阅读助手已经发布到了 v2.4.1 ，同时根据 Chrome 扩展市场要求，采用全新的 api 重构 Circle 阅读助手，使得 Circle 阅读助手更节省性能、使用更安全！

    目前支持平台

    1. Chrome
    2. Edge
    3. 火狐
    4. 360
    5. Opera

    目前支持版本

    1. 油猴版本（仅仅支持识别和排版，不支持自定义阅读体验和定制主题）
    2. 基础版本（自定义主题和定制阅读体验）
    3. 专业版本（分栏布局、大声朗读、导出 word、导出为markdown、截图等等高级功能）

    其他说明

    1. Circle 阅读助手官方已上线。地址 👉🏻 http://circlereader.com/
    2. 下载安装体验地址 👉🏻 http://circlereader.com/download

    上周 v2.4.1 版本已发布，这次适配了移动端，同时带来更多新特性。

    – 更新日志介绍文字版[http://circlereader.com/node/73]
    – 更新日志视频版本[https://www.bilibili.com/video/BV1VS4y1e7QQ/]

    ![截屏2022-04-21 07.03.54|690×414](upload://puT0XPbcxCDX5a88VteDTrZKkw1.jpeg)

    欢迎下载体验！！！

写留言