V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
Xianmua
V2EX  ›  程序员

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

  •  2
     
  •   Xianmua · 196 天前 · 2913 次点击
    这是一个创建于 196 天前的主题,其中的信息可能已经有所发展或是发生改变。

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

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

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

    楼中楼里会有哪些评论:

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

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

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

    第 1 条附言  ·  195 天前
    0.1.2 新增功能①悬浮☸按钮自动打开楼中楼页面。此选项默认关闭,有需要可以在脚本设置项手动开启②打开楼中楼页面后,可以按 Esc 键关闭楼中楼页面。
    0.1.4 进一步完善脚本功能,在一个 id 同时 @多个 id 的情况下,会把 @的多个人都识别到。
    比如 a 同时 @b 、 @c 、 @d , 会将 a 和 b ,c ,d 的楼中楼内容全部叠加在一起,实现同时展示。
    0.1.6 新增适配黑暗模式~
    第 2 条附言  ·  194 天前
    0.2.0 版本发布,抛弃第三方库,重写 ui ,新增多种交互。
    (1)鼠标悬浮于☸按钮,自动打开楼中楼 ,已是默认功能,不再需要点击。点击楼中楼界面的楼层按钮,可以快速跳转到对应楼层。黑暗模式下适配滚动条颜色。
    (2)关闭楼中楼有三种实现逻辑: ①鼠标移入楼中楼 然后移出,楼中楼自动关闭 ②鼠标移出主评论区域 楼中楼自动关闭 ③按 Esc 键 任意时刻快速关闭楼中楼
    (3)新增右侧楼中楼选项,默认关闭,可手动开启。会在评论区右侧空白处,完美填充楼中楼(楼中楼页面弹出后 无需再关闭,可同时显示更多信息)。完美适配各种缩放(如临时缩放需要刷新页面生效)。
    34 条回复    2023-05-25 20:27:08 +08:00
    Tlvncks
        1
    Tlvncks  
       196 天前   ❤️ 1
    直接鼠标指向被 @账号后自动弹出悬浮窗显示对话,这样更方便
    Hliushi
        2
    Hliushi  
       196 天前   ❤️ 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  
       196 天前   ❤️ 1
    谢谢。这个好。
    Xianmua
        4
    Xianmua  
    OP
       196 天前
    @Hliushi 我刚更新了下,你看下还有问题吗🤣刚发出去就发现严重问题了,赶紧修了修
    Xianmua
        5
    Xianmua  
    OP
       196 天前
    要是发现问题了,麻烦贴一下生成楼中楼出现问题的 评论的链接,多谢各位~
    Xianmua
        6
    Xianmua  
    OP
       196 天前   ❤️ 1
    那个百分比缩放后的问题刚看了,确实有点离谱,在研究...
    Hliushi
        7
    Hliushi  
       196 天前
    @Xianmua 刚刚说的第四个问题 bug 解决了
    但是我有发现一个样式问题,当点击帖子 op 自己,左下角出现了蓝色的长方形样式
    具体帖子: https://www.v2ex.com/t/942019 #15 楼
    ![image-20230522223113504]( https://hliushi-img.oss-cn-shanghai.aliyuncs.com/img/image-20230522223113504.png)
    Hliushi
        8
    Hliushi  
       196 天前
    @Xianmua 可能是用了上一个版本 0.1 复现的,目前在使用 0.1.1 突然没有啦
    Xianmua
        9
    Xianmua  
    OP
       196 天前
    @Hliushi 哈哈那个问题就是我刚修的,css 那里改动了..百分比缩放那个跟 css 有关系,css 不太熟...一会准备用个简单粗暴的方式解决掉...
    Xianmua
        10
    Xianmua  
    OP
       196 天前
    @Tlvncks
    @Hliushi 0.1.2 已修复网页缩放 bug 。新增功能①悬浮☸按钮自动打开楼中楼页面。此选项默认关闭,有需要可以在脚本设置项手动开启。在触发楼中楼后,建议略微挪动下鼠标,不然关闭楼中楼后 容易再次触发②打开楼中楼页面后,可以按 Esc 键关闭楼中楼页面。
    Xianmua
        11
    Xianmua  
    OP
       196 天前
    补充一下,上面说的“在触发楼中楼后,建议略微挪动下鼠标,不然关闭楼中楼后 容易再次触发”,意思是“在悬停触发楼中楼后,如果使用 Esc 关闭楼中楼,建议略微挪动下鼠标,不然容易再次触发”
    还有 发现这当例子的动图,内容不大和谐哈哈,不过改不了了 就这样吧

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


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

    可以试试这个,支持跨页
    https://greasyfork.org/zh-CN/scripts/458024
    Greatshu
        34
    Greatshu  
       193 天前
    非本人开发,这个是 V2EX 最好用的回复缩进油猴脚本,没有之一,配合 V2EX plus 的楼主高亮功能效果更佳。如果一个帖子超过 100 个回复,存在分页,它还能把所有回复合成一页。
    https://greasyfork.org/zh-CN/scripts/14182-v2excellent-js
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   我们的愿景   ·   实用小工具   ·   5503 人在线   最高记录 6543   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 33ms · UTC 01:48 · PVG 09:48 · LAX 17:48 · JFK 20:48
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.