微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

利用用户脚本优化 Yandere/Konachan 站点浏览体验

中文标签缩略图放大、双击翻页与瀑布流浏览模式,更舒服的 Booru 站点浏览体验

前言

Y 站与 K 站都是寻找壁纸的好网站,日常必备,只可惜浏览体验不是很好,网站界面与标签都是英文,图片列表页缩略图也比较小。这个时候自然要无敌的油猴脚本出马了,我便立马打开了 Greasy Fork 进行搜索。排除掉一些比较久远并且失效的脚本,我发现了 yande-re-chinese-patch,说实话这个脚本对页面的一些修改比如 sidebar 显隐、键盘翻页啥的我不是很感冒,但是这个流体布局浏览模式让我眼前一亮,用起来不错,而且翻译了一些常用的标签,终于不用整天划词了 w。于是便在这个脚本基础上进行了修改并对代码进行了重构,使用 vitevite-plugin-tm-userscript 进行构建,然后支持了一些其他图站,利用 @himeka/booru 库来获取各 booru 站点数据。访问 GitHub 查看源码。

安装

PC 端

Android

  • 使用 Yandex、Kiwi 或 Firefox 等浏览器安装 Tampermonkey插件,然后再安装本脚本。
  • 或者直接使用第三方原生应用 Flexbooru / Mbooru

特性

缩略图放大

列表页缩略图进行放大 [Y 站 / K 站]

图 3

图 4

双击翻页

双击页面左侧任意区域进入上一页,双击页面右侧任意区域进入下一页 [Y 站 / K 站]

访问标记

会在点击过详情页面图片下方标注一条横线,利用的是 a 标签 :visited 特性,清除缓存后失效 [Y 站 / K 站]

图 2

标签中文翻译

添加 Y 站 与 K 站 标签中文翻译,翻译文件来自 yande-re-chinese-patch ,翻译了出现频率较高的 100 多个标签

欢迎 PR 补充或校正翻译。

图 1

瀑布流模式

点击右上角按钮进入瀑布流模式

图 5

输出下载地址

瀑布流模式下可使用 输出下载地址 功能保存图片地址 TXT 后使用迅雷、IDM、wget 等批量下载,见 FoXZilla/Pxer#8

图 6

顶部操作

详情查看

点击缩略图可查看详情,可进行以下操作

图 8

提示

Moebooru 站点(Y 站、K 站)可通过设置查询参数 locale 或者设置 cookie 里的 locale 项来指定界面语言

如: konachan点net/post?locale=zh_CN

本脚本在访问 Y 站或 K 站时已认指定语言为 zh_CN

站点支持

主要支持站点为 Y 站 和 K 站,其他站点为基本支持

本脚本主要是为了方便图片浏览,其他功能如下载为简单支持,不保证完全可用。

另,存在源站页面图片列表与 API 返回列表不一致的情况,请悉知。

缩略图放大与双击翻页支持站点为 Y 站 和 K 站,瀑布流模式支持的 Booru 站点sites.json (其中有 CSP 限制的站点暂未支持)。

预览

瀑布流模式的简单预览效果可以前往 https://www.nanoka.top/illust/konachan.html 查看

本地开发

  1. git clone https://github.com/asadahimeka/yandere-masonry.git
  2. cd yandere-masonry
  3. yarn install
  4. yarn dev

Vue 3 + TypeScript + Vite

本项目使用 TypeScript + Vue 3 <script setup> 语法编写,并使用 Vite 构建,具体查阅文档: script setup docs

P.S. Vue 2.7 以上版本已支持 <script setup> 与 Composition-api,本项目使用的 Vue 版本为 2.6.14,如何在 2.7 以下版本使用 <script setup> 语法 与 Composition-api 可参照 Vite + Vue2 + Vuetify2 + script setup + TypeScript 搭配开发项目

推荐 IDE 与插件

TypeScript 中 .vue 文件的类型支持

由于 TypeScript 无法处理 .vue 导入的类型信息,因此认情况下被填充为通用 Vue 组件类型。如果希望在 .vue 导入中获取实际的参数类型(如,在使用 h(...)获取参数验证),可以按照以下步骤启用 Volar 的 Take Over 模式:

  1. 从 VS Code 的命令面板运行 Extensions: Show Built-in Extensions,查找 TypeScript and JavaScript Language Features,然后右键单击并选择 disable (Workspace)认情况下,如果认 TypeScript 扩展被禁用,Take Over 模式将自行启用。
  2. 通过从命令面板运行Developer: Reload Window 重新加载 VS Code 窗口。

可以在 此处 了解有关 Take Over 模式的更多信息。

yande-re-chinese-patch

@himeka/booru

vite-plugin-tm-userscript

有问题或建议请到 GitHub 反馈


fin.

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 [email protected] 举报,一经查实,本站将立刻删除。

相关推荐