EdAKTK / 哔咔:新页面打开+列表大图平铺Bika Global showComic Override & Conditional Thumbnail View

Published:

Version: 2.5+080da70

Summary: 为方便电脑横屏使用:1. 覆盖原本的点击漫画打开逻辑,现在点击漫画会从新的标签页面打开并且列表页面不会刷新;2. 在漫画列表将图片放大并进行平铺,现在点击漫画图片不会显示放大的图片而是直接打开漫画。Overrides showComic globally to open books in a new tab. Also conditionally applies a full-width thumbnail view with 50px top/bottom margins, and makes both image and text clicks open the book.

License: MIT

哔咔:新页面打开+列表大图平铺

用途: 为方便电脑横屏使用,该脚本实现以下功能:

  1. 全局覆盖 showComic 函数:
    • 原本点击漫画时会在当前页面打开漫画,或执行“放大图片”等行为。
    • 脚本覆盖了全局的 showComic 函数,使其点击漫画时始终在新的标签页中打开漫画页面,URL 结构为 https://manhuabika.com/pcomicview/?cid=漫画ID

#若您并未使用manhuabika.com,请定位到代码第24行左右更改成您使用的哔咔网页!!!

  • 这样一来,无论是点击文字还是图片,都会以新页面方式打开漫画,且不会刷新当前列表页面。
  1. 条件应用列表大图平铺:

    • 在漫画列表界面时(不包括:排行榜、个人中心未点击更多时),即:当页面中检测到符合条件的元素(例如包含类名 "fab-button animate top-center dropdown" 的浮动按钮以及位于 .blog-post 内、类名为 "listview image-listview media mt-5 mb-2 catListview" 的漫画列表)时,脚本会对页面进行布局样式的覆盖。
    • 脚本将漫画列表容器调整为全宽显示,并在页面顶部和底部各添加 50px 的边距,避免固定的顶部或底部栏遮挡内容。
    • 同时,将列表中的每个漫画卡片调整为固定宽度(例如 250px)并采用平铺(thumbnail)的方式排列,使得图片得以放大并充满整个卡片区域。
  2. 统一点击行为:

    • 脚本将每个漫画卡片中图片和文字区域的点击事件统一处理:
      • 点击图片时,会自动触发与文字区域相同的点击行为,即调用覆盖后的 showComic 函数,从而在新标签页中打开漫画。
      • 这样用户无论点击图片还是文字,均能实现直接跳转到漫画阅读页面,并且打开方式为新页面,保证当前列表页面不被刷新。
  3. 动态重应用与兼容性:

    • 该脚本通过 MutationObserver 监听页面的 DOM 变化,以便在无限滚动加载新内容时,自动重新应用自定义的样式与事件绑定。
    • 同时,脚本会自动删除图片上的固定宽度类(如 w64w50),保证 CSS 样式能够正确生效,使图片能够充满整个卡片区域。

使用说明

  1. 安装脚本:

    • 使用 Tampermonkey 插件。
    • 返回次本界面刷新,点击安装按钮。
    • 在跳出的界面点击安装。
    • 返回哔咔漫画刷新即可食用。
  2. 脚本功能:

    • 当页面加载并检测到符合条件的漫画列表和顶部按钮时,脚本自动执行。
    • 脚本会覆盖全局的 showComic 函数,使得所有调用此函数(无论是通过内联 onclick 还是程序调用)都会在新标签页中打开漫画阅读页面。
    • 同时,列表页面将采用全宽平铺布局,每个漫画卡片中的图片将被放大显示,且点击图片会直接打开漫画。
  3. 注意事项:

    • 本脚本不修改原有 HTML 结构,仅通过注入 CSS 和重绑定事件实现效果,确保原网站其他功能尽量不受影响。
    • 如果网站更新或元素类名发生变化,可能需要相应调整脚本中的选择器。

通过该脚本,您可以在浏览哔咔漫画时获得更适合电脑横屏浏览的体验:点击漫画无论是图片还是文字均在新标签页中打开,同时列表中展示的大图也方便您预览漫画内容。

如有任何问题或需要进一步修改,欢迎反馈或进行相应调整。

Rating: 0