草庐IT

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

Himekana's 2023-03-28 原文

中文标签、缩略图放大、双击翻页与瀑布流浏览模式,更舒服的 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 站]

双击翻页

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

访问标记

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

标签中文翻译

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

欢迎 PR 补充或校正翻译。

瀑布流模式

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

输出下载地址

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

顶部操作

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

详情查看

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

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

提示

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.

有关利用用户脚本优化 Yandere/Konachan 站点浏览体验的更多相关文章

  1. ruby - 如何将脚本文件的末尾读取为数据文件(Perl 或任何其他语言) - 2

    我正在寻找执行以下操作的正确语法(在Perl、Shell或Ruby中):#variabletoaccessthedatalinesappendedasafileEND_OF_SCRIPT_MARKERrawdatastartshereanditcontinues. 最佳答案 Perl用__DATA__做这个:#!/usr/bin/perlusestrict;usewarnings;while(){print;}__DATA__Texttoprintgoeshere 关于ruby-如何将脚

  2. ruby-on-rails - 独立 ruby​​ 脚本的配置文件 - 2

    我有一个在Linux服务器上运行的ruby​​脚本。它不使用rails或任何东西。它基本上是一个命令行ruby​​脚本,可以像这样传递参数:./ruby_script.rbarg1arg2如何将参数抽象到配置文件(例如yaml文件或其他文件)中?您能否举例说明如何做到这一点?提前谢谢你。 最佳答案 首先,您可以运行一个写入YAML配置文件的独立脚本:require"yaml"File.write("path_to_yaml_file",[arg1,arg2].to_yaml)然后,在您的应用中阅读它:require"yaml"arg

  3. ruby-on-rails - 使用 rails 4 设计而不更新用户 - 2

    我将应用程序升级到Rails4,一切正常。我可以登录并转到我的编辑页面。也更新了观点。使用标准View时,用户会更新。但是当我添加例如字段:name时,它​​不会在表单中更新。使用devise3.1.1和gem'protected_attributes'我需要在设备或数据库上运行某种更新命令吗?我也搜索过这个地方,找到了许多不同的解决方案,但没有一个会更新我的用户字段。我没有添加任何自定义字段。 最佳答案 如果您想允许额外的参数,您可以在ApplicationController中使用beforefilter,因为Rails4将参数

  4. ruby - 在 Ruby 中用键盘诅咒数组浏览 - 2

    我正在尝试在Ruby中制作一个cli应用程序,它接受一个给定的数组,然后将其显示为一个列表,我可以使用箭头键浏览它。我觉得我已经在Ruby中看到一个库已经这样做了,但我记不起它的名字了。我正在尝试对soundcloud2000中的代码进行逆向工程做类似的事情,但他的代码与SoundcloudAPI的使用紧密耦合。我知道cursesgem,我正在考虑更抽象的东西。广告有没有人见过可以做到这一点的库或一些概念证明的Ruby代码可以做到这一点? 最佳答案 我不知道这是否是您正在寻找的,但也许您可以使用我的想法。由于我没有关于您要完成的工作

  5. ruby-on-rails - 浏览 Ruby 源代码 - 2

    我的主要目标是能够完全理解我正在使用的库/gem。我尝试在Github上从头到尾阅读源代码,但这真的很难。我认为更有趣、更温和的踏脚石就是在使用时阅读每个库/gem方法的源代码。例如,我想知道RubyonRails中的redirect_to方法是如何工作的:如何查找redirect_to方法的源代码?我知道在pry中我可以执行类似show-methodmethod的操作,但我如何才能对Rails框架中的方法执行此操作?您对我如何更好地理解Gem及其API有什么建议吗?仅仅阅读源代码似乎真的很难,尤其是对于框架。谢谢! 最佳答案 Ru

  6. ruby-on-rails - 简单的 Ruby on Rails 问题——如何将评论附加到用户和文章? - 2

    我意识到这可能是一个非常基本的问题,但我现在已经花了几天时间回过头来解决这个问题,但出于某种原因,Google就是没有帮助我。(我认为部分问题在于我是一个初学者,我不知道该问什么......)我也看过O'Reilly的RubyCookbook和RailsAPI,但我仍然停留在这个问题上.我找到了一些关于多态关系的信息,但它似乎不是我需要的(尽管如果我错了请告诉我)。我正在尝试调整MichaelHartl'stutorial创建一个包含用户、文章和评论的博客应用程序(不使用脚手架)。我希望评论既属于用户又属于文章。我的主要问题是:我不知道如何将当前文章的ID放入评论Controller。

  7. ruby - RVM "ERROR: Unable to checkout branch ."单用户 - 2

    我在新的Debian6VirtualBoxVM上安装RVM时遇到问题。我已经安装了所有需要的包并使用下载了安装脚本(curl-shttps://rvm.beginrescueend.com/install/rvm)>rvm,但以单个用户身份运行时bashrvm我收到以下错误消息:ERROR:Unabletocheckoutbranch.安装在这里停止,并且(据我所知)没有安装RVM的任何文件。如果我以root身份运行脚本(对于多用户安装),我会收到另一条消息:Successfullycheckedoutbranch''安装程序继续并指示成功,但未添加.rvm目录,甚至在修改我的.bas

  8. postman——集合——执行集合——测试脚本——pm对象简单示例02 - 2

    //1.验证返回状态码是否是200pm.test("Statuscodeis200",function(){pm.response.to.have.status(200);});//2.验证返回body内是否含有某个值pm.test("Bodymatchesstring",function(){pm.expect(pm.response.text()).to.include("string_you_want_to_search");});//3.验证某个返回值是否是100pm.test("Yourtestname",function(){varjsonData=pm.response.json

  9. ruby - 确定 ruby​​ 脚本是否已经在运行 - 2

    有没有一种简单的方法可以判断ruby​​脚本是否已经在运行,然后适本地处理它?例如:我有一个名为really_long_script.rb的脚本。我让它每5分钟运行一次。当它运行时,我想看看之前运行的是否还在运行,然后停止第二个脚本的执行。有什么想法吗? 最佳答案 ps是一种非常糟糕的方法,并且可能会出现竞争条件。传统的Unix/Linux方法是将PID写入文件(通常在/var/run中)并在启动时检查该文件是否存在。例如pid文件位于/var/run/myscript.pid然后你会在运行程序之前检查它是否存在。有一些技巧可以避免

  10. ruby - ruby 脚本可以预编译成二进制文件吗? - 2

    我正在开发一个Ruby脚本,需要在没有Ruby解释器的情况下部署到系统上。它将需要在使用ELF格式的FreeBSD系统上运行。我知道有一个ruby​​2exe项目可以编译在Windows上运行的ruby​​脚本,但是在其他操作系统上这样做容易吗?甚至可能吗? 最佳答案 您是否检查过Rubinius或JRuby是否允许您预编译您的代码? 关于ruby-ruby脚本可以预编译成二进制文件吗?,我们在StackOverflow上找到一个类似的问题: https://

随机推荐