分享个 V2EX 楼中楼脚本,完全基于本地实现 - V2EX
V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
请不要在回答技术问题时复制粘贴 AI 生成的内容
Xianmua
V2EX    程序员

分享个 V2EX 楼中楼脚本,完全基于本地实现

  •  2
     
  •   Xianmua 2023-05-22 21:22:29 +08:00 4462 次点击
    这是一个创建于 951 天前的主题,其中的信息可能已经有所发展或是发生改变。

    会在可以生成楼中楼的回复右下角,生成一个小蜘蛛网按钮

    点一下即可悬浮窗显示当前页的楼中楼。随便点击窗口之外其他的位置,即可关闭悬浮窗口

    优点:完全基于本地实现,没有任何网络请求,速度尚可。缺点:楼中楼功能仅限于当前页,隔页的回复无法实现..
    还有 需要手动点一下

    楼中楼里会有哪些评论:

    假如一条评论 a@b ,在点击按钮后,会把本条评论之前的 b 的全部发言收集起来;本条评论之后(包括本条评论)的 a@b ,或者是 b@a 这样的评论收集起来

    脚本的悬浮窗,直接用的第三方的油猴的库实现的,逻辑会写,界面目前写不好,欢迎改写哈哈。注释很多,欢迎审查~

    脚本下载链接: https://greasyfork.org/en/scripts/466852 image

    第 1 条附言    2023-05-23 11:15:55 +08:00
    0.1.2 新增功能①悬浮按钮自动打开楼中楼页面。此选项默认关闭,有需要可以在脚本设置项手动开启②打开楼中楼页面后,可以按 Esc 键关闭楼中楼页面。
    0.1.4 进一步完善脚本功能,在一个 id 同时 @多个 id 的情况下,会把 @的多个人都识别到。
    比如 a 同时 @b 、 @c 、 @d , 会将 a 和 b ,c ,d 的楼中楼内容全部叠加在一起,实现同时展示。
    0.1.6 新增适配黑暗模式~
    第 2 条附言    2023-05-25 08:47:26 +08:00
    0.2.0 版本发布,抛弃第三方库,重写 ui ,新增多种交互。
    (1)鼠标悬浮于按钮,自动打开楼中楼 ,已是默认功能,不再需要点击。点击楼中楼界面的楼层按钮,可以快速跳转到对应楼层。黑暗模式下适配滚动条颜色。
    (2)关闭楼中楼有三种实现逻辑: ①鼠标移入楼中楼 然后移出,楼中楼自动关闭 ②鼠标移出主评论区域 楼中楼自动关闭 ③按 Esc 键 任意时刻快速关闭楼中楼
    (3)新增右侧楼中楼选项,默认关闭,可手动开启。会在评论区右侧空白处,完美填充楼中楼(楼中楼页面弹出后 无需再关闭,可同时显示更多信息)。完美适配各种缩放(如临时缩放需要刷新页面生效)。
    34 条回复    2023-05-25 20:27:08 +08:00
    Tlvncks
        1
    Tlvncks  
       2023-05-22 22:05:58 +08:00   1
    直接鼠标指向被 @账号后自动弹出悬浮窗显示对话,这样更方便
    Hliushi
        2
    Hliushi  
       2023-05-22 22:08:55 +08:00   1
    谢谢 op 开发的插件,
    说一下现在的体验:
    1 、这个弹窗的动画有点僵硬
    2 、弹窗是否可以支持用 ESC 快捷键关闭呢
    3 、还有就是进行「网页百分比缩放」、「调试打开」那个 图标没有固定到最右边
    4 、刚刚使用中遇到有一个 bug ,有个元素大概率没有抓取到
    源码错误位置 70: let atMember=replyList[i].querySelector(".reply_content a").textContent
    properties of null (reading 'textContent')
    at unsafeWindow.genReplyBox (userscript.html?name=v2ex%25E6%25A5%25BC%25E4%25B8%25AD%25E6%25A5%25BC.user.js&id=d5705021-719d-420c-961c-efae58b59743:380:76)
    at HTMLButtonElement.onclick (VM1297 941894:1:1)
    unsafeWindow.genReplyBox @ user
    Exgirlfriends
        3
    Exgirlfriends  
       2023-05-22 22:09:04 +08:00   1
    谢谢。这个好。
    Xianmua
        4
    Xianmua  
    OP
       2023-05-22 22:14:23+08:00
    @Hliushi 我刚更新了下,你看下还有问题吗刚发出去就发现严重问题了,赶紧修了修
    Xianmua
        5
    Xianmua  
    OP
       2023-05-22 22:18:20 +08:00
    要是发现问题了,麻烦贴一下生成楼中楼出现问题的 评论的链接,多谢各位~
    Xianmua
        6
    Xianmua  
    OP
       2023-05-22 22:20:38 +08:00   1
    那个百分比缩放后的问题刚看了,确实有点离谱,在研究...
    Hliushi
        7
    Hliushi  
       2023-05-22 22:37:18 +08:00
    @Xianmua 刚刚说的第四个问题 bug 解决了
    但是我有发现一个样式问题,当点击帖子 op 自己,左下角出现了蓝色的长方形样式
    具体帖子: t/942019 #15 楼
    ![image-20230522223113504]( https://hliushi-img.oss-cn-shanghai.aliyuncs.com/img/image-20230522223113504.png)
    Hliushi
        8
    Hliushi  
       2023-05-22 22:41:41 +08:00
    @Xianmua 可能是用了上一个版本 0.1 复现的,目前在使用 0.1.1 突然没有啦
    Xianmua
        9
    Xianmua  
    OP
       2023-05-22 22:46:20 +08:00
    @Hliushi 哈哈那个问题就是我刚修的,css 那里改动了..百分比缩放那个跟 css 有关系,css 不太熟...一会准备用个简单粗暴的方式解决掉...
    Xianmua
        10
    Xianmua  
    OP
       2023-05-22 23:59:04 +08:00
    @Tlvncks
    @Hliushi 0.1.2 已修复网页缩放 bug 。新增功能①悬浮按钮自动打开楼中楼页面。此选项默认关闭,有需要可以在脚本设置项手动开启。在触发楼中楼后,建议略微挪动下鼠标,不然关闭楼中楼后 容易再次触发②打开楼中楼页面后,可以按 Esc 键关闭楼中楼页面。
    Xianmua
        11
    Xianmua  
    OP
       2023-05-23 03:10:15 +08:00
    补充一下,上面说的“在触发楼中楼后,建议略微挪动下鼠标,不然关闭楼中楼后 容易再次触发”,意思是“在悬停触发楼中楼后,如果使用 Esc 关闭楼中楼,建议略微挪动下鼠标,不然容易再次触发”
    还有 发现这当例子的动图,内容不大和谐哈哈,不过改不了了 就这样吧

    0.1.4 版本已发,进一步完善脚本功能,在一个 id 同时 @多个 id 的情况下,会把 @的多个人都识别到。
    比如 a 同时 @b 、 @c 、 @d , 会将 a 和 b ,c ,d 的楼中楼内容全部叠加在一起,实现同时展示。现在应该比较完美了。
    Xianmua
        12
    Xianmua  
    OP
       2023-05-23 04:55:39 +08:00
    补个视频
    sanshao124
        13
    sanshao124  
       2023-05-23 07:29:17 +08:00
    楼主能做一个支持手机的版本吗?
    wuvvu
        14
    wuvvu  
       2023-05-23 08:43:15 +08:00
    提一个建议,增加深色主题检测。
    用深色主题,鼠标一悬浮就显示一片白色,有点刺眼
    lisxour
        15
    lisxour  
       2023-05-23 09:16:58 +08:00
    想要完美解决楼中楼问题,还得 v 站自己去解决,包括提到的跨页回复,v 站不出手,谈何完美。
    Xianmua
        16
    Xianmua  
    OP
       2023-05-23 10:24:53 +08:00
    楼主要卒...,赶紧补充一下,昨天说的“比较完美”的意思是,没有明显 bug...
    回复一下, ①支持手机,这个难度很大 可能需要浏览器支持安装油猴插件,那个悬浮窗用的第三方的库,没适配的可能性很大,而且我也没有能装插件的浏览器,没法调试...②适配深色模式,这个确实很有必要,我试着改一下 css
    Xianmua
        17
    Xianmua  
    OP
       2023-05-23 11:00:50 +08:00
    @wuvvu 0.1.6 版本已发布,已适配黑暗模式~
    wuvvu
        18
    wuvvu  
       2023-05-23 11:08:02+08:00   1
    @Xianmua #17
    真不错,看起来舒服多了
    fighter2011
        19
    fighter2011  
       2023-05-23 11:37:33 +08:00   1
    不错,点赞
    catsoul
        20
    catsoul  
       2023-05-23 19:18:32 +08:00   1
    win11 设置显示为 150%,会错位
    Xianmua
        21
    Xianmua  
    OP
       2023-05-23 20:58:07 +08:00
    @catsoul 刚发布了 0.1.7 ,临时应付了下页面缩放的问题..
    HongyuGao
        22
    HongyuGao  
       2023-05-23 21:05:43 +08:00   1
    挺好,notion 那来的
    emonc
        23
    emonc  
       2023-05-23 21:28:56 +08:00
    用别人的咳嗽
    Xianmua
        24
    Xianmua  
    OP
       2023-05-23 21:43:56 +08:00   1
    @emonc 这个看起来更像楼中楼,我这个像个半成品
    xiyuesaves
        25
    xiyuesaves  
       2023-05-24 00:21:26 +08:00


    分享下我写的,鼠标移动到用户名上就能浮出这个用户的上一条留言,动画用 css 来做会丝滑很多
    Xianmua
        26
    Xianmua  
    OP
       2023-05-24 00:38:17 +08:00
    @xiyuesaves 所以分享的链接在哪..
    Xianmua
        28
    Xianmua  
    OP
       2023-05-24 00:54:00 +08:00
    @xiyuesaves #25 不错不错,我找到了,效果不错,大家喜欢的也可以装,xiyuesaves 的脚本链接是这个: https://greasyfork.org/en/scripts/435985
    Xianmua
        29
    Xianmua  
    OP
       2023-05-24 00:57:07 +08:00
    @xiyuesaves 绝了,你那脚本跟我这好像有冲突哈哈俩脚本同时开启的话,我那个会显示重复内容
    xiyuesaves
        30
    xiyuesaves  
       2023-05-24 01:34:42 +08:00
    @Xianmua #29 应该是我的修改了 dom 结构的原因
    traffic
        31
    traffic  
       2023-05-24 02:27:53 +08:00
    大佬有没有可能给 flarum 论坛写一个,这个论坛程序使用率越来越高。
    但是目前无论是服务端还是客户端的楼中楼插件我都没有发现。
    Xianmua
        32
    Xianmua  
    OP
       2023-05-24 03:04:54 +08:00
    @traffic 不是大佬哈哈,我刚搜了下 flarum ,好像自带引用评论的功能,比如这个页面: https://discuss.flarum.org.cn/d/2922/4 ,鼠标放在悬浮的箭头那里,就会显示内容,点击也会快速滚动到 回复的评论那个位置
    ttentau1
        33
    ttentau1  
       2023-05-24 10:45:25 +08:00

    可以试试这个,支持跨页
    https://greasyfork.org/zh-CN/scripts/458024
    Greatshu
        34
    Greatshu  
       2023-05-25 20:27:08 +08:00   1
    非本人开发,这个是 V2EX 最好用的回复缩进油猴脚本,没有之一,配合 V2EX plus 的楼主高亮功能效果更佳。如果一个帖子超过 100 个回复,存在分页,它还能把所有回复合成一页。
    https://greasyfork.org/zh-CN/scripts/14182-v2excellent-js
    关于     帮助文档     自助推广系统     博客     API     FAQ     Solana     2815 人在线   最高记录 6679       Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 31ms UTC 14:06 PVG 22:06 LAX 06:06 JFK 09:06
    Do have faith in what you're doing.
    ubao msn snddm index pchome yahoo rakuten mypaper meadowduck bidyahoo youbao zxmzxm asda bnvcg cvbfg dfscv mmhjk xxddc yybgb zznbn ccubao uaitu acv GXCV ET GDG YH FG BCVB FJFH CBRE CBC GDG ET54 WRWR RWER WREW WRWER RWER SDG EW SF DSFSF fbbs ubao fhd dfg ewr dg df ewwr ewwr et ruyut utut dfg fgd gdfgt etg dfgt dfgd ert4 gd fgg wr 235 wer3 we vsdf sdf gdf ert xcv sdf rwer hfd dfg cvb rwf afb dfh jgh bmn lgh rty gfds cxv xcv xcs vdas fdf fgd cv sdf tert sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf shasha9178 shasha9178 shasha9178 shasha9178 shasha9178 liflif2 liflif2 liflif2 liflif2 liflif2 liblib3 liblib3 liblib3 liblib3 liblib3 zhazha444 zhazha444 zhazha444 zhazha444 zhazha444 dende5 dende denden denden2 denden21 fenfen9 fenf619 fen619 fenfe9 fe619 sdf sdf sdf sdf sdf zhazh90 zhazh0 zhaa50 zha90 zh590 zho zhoz zhozh zhozho zhozho2 lislis lls95 lili95 lils5 liss9 sdf0ty987 sdft876 sdft9876 sdf09876 sd0t9876 sdf0ty98 sdf0976 sdf0ty986 sdf0ty96 sdf0t76 sdf0876 df0ty98 sf0t876 sd0ty76 sdy76 sdf76 sdf0t76 sdf0ty9 sdf0ty98 sdf0ty987 sdf0ty98 sdf6676 sdf876 sd876 sd876 sdf6 sdf6 sdf9876 sdf0t sdf06 sdf0ty9776 sdf0ty9776 sdf0ty76 sdf8876 sdf0t sd6 sdf06 s688876 sd688 sdf86