其他分享
首页 > 其他分享> > 利用用户脚本优化 Yandere/Konachan 站点浏览体验

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

作者:互联网

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

前言

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

安装

PC 端

Android

特性

缩略图放大

对列表页的缩略图进行放大 [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.

标签:脚本,Konachan,TypeScript,缩略图,Yandere,站点,标签,页面
来源: https://www.cnblogs.com/himeka/p/16519248.html