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

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

前言

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

安装

PC 端

  • 如何安装用户脚本管理器插件不再赘述,可以参照 Greasy Fork 首页提示安装浏览器插件。
  • 脚本已发布在 Greasy Fork 上,可以点进页面直接安装。
  • 如果没登 Greasy Fork 账号的话,可以访问 Sleazy Fork 进行安装。
  • 建议安装 大人的Greasyfork 脚本在访问匿名不可用脚本时跳转至Sleazyfork。
  • 也可以直接从 GitHub 仓库文件 安装。

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

顶部操作

  • 站点切换,打开侧栏操作,支持站点见下方所述
  • 打开个人页面或收藏夹(Y 站/K 站),侧栏里操作
  • 瀑布流显示列数切换,列数选择非自动且列数小于 6 时图片会以 sample_url (即点击详情的大小) 展示。
  • 批量选择
  • 查看下载列表
  • 深色模式切换

详情查看

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

  • 收藏(Y 站/ K 站)
  • 打开源站详情页面
  • 打开来源地址
  • 查看原图
  • 下载/加入下载列表
  • 打开源站标签页面
  • 点击图片控制按钮与标签显示

图 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://booru.vercel.app 查看

本地开发

  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 反馈


Also posted at https://www.nanoka.top/posts/854aec20/
fin.

posted @ 2022-07-25 23:16  Yumine  阅读(336)  评论(0编辑  收藏  举报