尧图建网站 尧图建网站 YAOTU WEB BUILD 免费咨询
ARTICLE DETAIL

资讯详情

深耕网站建设与建站编程的一线实战洞察。

eHunter终极指南:双模式阅读改造,让漫画浏览体验提升一个量级

eHunter终极指南:双模式阅读改造,让漫画浏览体验提升一个量级 eHunter终极指南双模式阅读改造让漫画浏览体验提升一个量级【免费下载链接】eHunterFor the best reading experience项目地址: https://gitcode.com/gh_mirrors/eh/eHunter你是否也经历过这样的夜晚打开常逛的漫画站准备补完追更已久的一部作品却要面对一屏只有一张图的默认页面、又小又糊的缩略图翻页全靠一次次点击加载还时快时慢——读不了十页耐心先被磨没了。eHunter 正是为这类痛点而生的开源油猴脚本它通过在原页面注入 Vue 组件把漫画与插画浏览改造成卷轴式Scroll与书本式Book两种模式让阅读从翻网页升级为读书。 先认识这台页面改造机很多工具的做法是再造一个应用让你把内容导入进来。eHunter 的思路完全不同它直接在原页面上新创建一个节点把 Vue 注入其中再用基于 fetch 实现的爬虫解析原站 DOM、提取漫画图片地址最后渲染出一套全新的阅读界面。不换站、不搬家只是把看的方式彻底重做。这个设计带来三个实打实的好处不破坏你的使用习惯收藏、评论、进度都留在原站变的只有阅读层天然支持多平台实现上基本隔离了具体环境目前内置 EH/EXH 与 NH 两套平台实现稍作适配就能移植到其他漫画站点移动端也能用官方为 iPhone/iPad 提供了专门的配置指南触屏设备同样能享受这次改造。⚡ 3分钟完成环境搭建今晚就能读eHunter 以用户脚本形式分发所以先要装一个脚本管理器。第 1 步安装管理器。Chrome 或 Firefox 用户安装 Tampermonkey暴力猴亦可装好后工具栏会出现一个小图标。第 2 步获取源码并构建。打开终端执行以下命令git clone https://gitcode.com/gh_mirrors/eh/eHunter cd eHunter npm install npm run build-prodnpm install安装全部项目依赖npm run build-prod直接生成可供油猴使用的用户脚本版本产物在dist/目录下。第 3 步加载脚本。在 Tampermonkey 管理面板新建脚本把dist/inject.js的内容粘贴进去保存。刷新目标站点页面顶部出现绿色阅读工具栏——改造完成。小贴士想参与开发把build-prod换成npm run dev即可进入 Vite 开发模式改动实时生效。 实验一卷轴模式如何治好随手翻的痛面对插画集、同人志封面这类没有连贯剧情的内容你的真实需求是快速扫图。卷轴模式就是为此设计的主区单页大图、页面垂直滚动、左侧缩略图栏常驻。缩放随心工具栏可直接把页面缩放到 55%~100%适配不同屏幕批量加载一次预载多张页面滚动过程不卡顿缩略图定位侧栏缩略图既是预览也是导航读到哪一页一目了然。下面就是 eHunter 卷轴模式批量预览插画的效果——左侧缩略图栏负责快速定位主区单页大图保持专注滚动模式下左侧缩略图栏加单页大图工具栏可实时调节缩放与加载数量。 实验二书籍模式如何让人读进去当内容换成有剧情的漫画你的体验诉求会从快变成沉浸。切换到书籍模式阅读器会模拟真实书籍的呈现方式双页显示一屏左右两页贴近实体书的翻页节奏方向可调支持 RTL/LTR 两种阅读方向日漫从右往左、欧美漫从左往右批量预载可设置同时加载 3~5 页翻页几乎零等待翻页动画平滑的过渡配合底部页码导航阅读进度始终心中有数。书籍模式下双页并列显示工具栏标注了 2P 双页与 RTL 阅读方向底部为页码导航。 藏在细节里的工具箱放大镜、页面菜单与打包下载两种模式之外eHunter 还有一批值得单独拿出来讲的能力页面放大镜桌面端开启后移动鼠标即可在 2x/3x/4x/5x 四档倍率间细看局部适合检查网点、线稿与小字且设置会跨页继承上下文页面菜单滚动模式单击图片、书籍模式点击中间留白区即可呼出内含加载原图奇偶切换等按场景自动显隐的操作画廊打包下载基于 GalleryDownloadService支持把整个画廊批量打包方便建立本地收藏库更多设置与可停靠面板阅读偏好精细可调工具面板支持停靠拖动缩略图还能展开成大图预览。书籍模式下缩略图栏依旧可用帮助你快速定位分镜与章节。 开发者视角一份读得懂的改造代码如果你不只是想用还想动手改eHunter 的架构对开发者相当友好平台层与渲染层分离src/platform/集中存放站点识别、初始化与平台服务工厂EH、NH 各占一目录新增平台时仿照现有模块写解析器与服务即可组件可直接复用core/components/中的 AlbumBookView、AlbumScrollView、PageView 等均为自建组件不依赖第三方 UI 库可平滑接入新功能设计有文档沉淀specs/下每个功能都配有独立的 spec、plan、contract 文档顺着文档就能推进一个完整功能。技术栈为 Vite Vue 3 TypeScript SCSS边界清晰、风格统一作为用户脚本 前端框架注入的学习样板也相当合适。⚠️ 避坑手册三个最常见的坑坑 1脚本不生效。先确认 Tampermonkey 是否启用、脚本是否在该站点激活再看控制台有无报错——多数情况是装了但没开。坑 2构建产物为空或页面异常。检查npm install是否完整、Node 版本是否达标然后重新执行一次npm run build-prod并替换脚本内容。坑 3放大镜不见了。放大镜仅桌面端可用且只在当前页面内生效、鼠标移出即隐藏——在手机上找不到它是正常现象不必担心。✅ 收尾你的收获清单读完这篇指南你已经掌握✅ eHunter 是什么——一款用 Vue 注入原站、提供卷轴式与书本式阅读的开源用户脚本✅ 如何 3 步完成环境搭建——装管理器、构建脚本、加载进 Tampermonkey✅ 两种模式的取舍——扫图用卷轴追更用书籍再配合缩略图与放大镜把体验拉满✅ 开发者入口在哪——src/platform/加平台、core/components/复用组件、specs/读设计文档。现在就 clone 项目、跑一次npm run build-prod今晚就给自己换一套阅读体验。读得舒服才是真的享受。【免费下载链接】eHunterFor the best reading experience项目地址: https://gitcode.com/gh_mirrors/eh/eHunter创作声明:本文部分内容由AI辅助生成(AIGC),仅供参考
返回列表