hacknews 重度用户看过来 ,HN 评论阅读增强脚本:卡片化 + 折叠/跳 L0 + 主题/渐变 + 像素头像(求大佬们的审美建议)

3 条回复
56 次浏览

打磨了一周的卡片式 ui 大佬们还有更多的 功能/样式 建议吗 准备发布啦

它主要解决什么问题?

  • 长楼“找上下文”困难:不知道自己在回复谁
  • 讨论树太深,页面太长:滚动疲劳、定位困难
  • 想快速扫顶层(L0)主线程:上下跳楼不够顺手
  • 深色模式/阅读舒适度:原生样式太简陋,眼睛累

核心功能一览(当前脚本已实现)

1) 评论区卡片化重排(核心)

  • 把 HN 原生的表格树评论,重建为 卡片式树结构(视觉层级更清晰)
  • 每条评论是一个卡片:用户名/时间/操作按钮在顶部,正文在下面,子回复作为卡片嵌套
  • 支持 最大宽度、圆角、间距、缩进等布局调节

适用场景:长讨论阅读体验会明显提升,尤其是多层回复。


2) 主题与外观:浅色/深色/跟随系统 + 渐变层级背景

  • 主题模式:跟随系统 / 强制浅色 / 强制深色
  • 页面背景可自定义(浅色/深色各一套)
  • 评论卡片支持“按层级渐变”:L0/L1/L2… 背景颜色可调
  • 也提供一些预设配色(比如蓝灰、暖米色、灰阶极简、深海蓝黑等)

目标:让“长时间刷楼”变得更舒服。


3) 折叠/展开(偏扫楼用)

为了快速扫楼,它提供多种折叠策略(可开关/可配置):

  • 每条评论可折叠:右上角有“折叠/展开”按钮
  • 折叠触发方式(可选):
    • 仅按钮
    • 按钮 + 单击正文
    • 按钮 + 双击正文
  • 双击正文折叠/展开整个子树(可选):
    双击某条评论正文,直接折叠/展开它下面整棵回复树
  • 默认折叠策略(两套):
    • 按数量:顶层评论如果“后代回复总数”超过阈值,默认折叠(便于扫主楼)
    • 按深度:从指定深度开始默认折叠(避免页面无限延长)
  • 全局快捷按钮(右下角):
    • 全部折叠(收起所有有子回复的评论)
    • 全部展开(展开所有评论)

4) “展开提示” + 数量颜色提醒(更好扫大楼)

当某条评论被折叠时,会出现类似:

  • [+展开 8 条回复](单击默认展开 双击展开全部子级)

并且这个数字会根据数量变色(可调阈值/颜色):

  • 少量:更偏主题强调色
  • 中量:偏粉/亮色
  • 大量:偏红(提醒这楼很长)

另外支持把这个提示按钮放在:

  • 评论底部(默认)
  • 或者放在右上角按钮行里(更省垂直空间)

5) L0 主线程导航(扫楼神器)

每条评论右上角会有:

  • 上 L0 / 下 L0:快速跳到上一个/下一个顶层主线程
  • L0 折叠:一键折叠当前评论所在的顶层主线程(快速收起一整楼)
  • 还有一个 “层展”:只展开下一层,下一层的子回复继续保持折叠(用于逐层读)

(这块我自己用得最多,长讨论基本靠它快速扫楼。)


6) Hover 父级高亮:找上下文更快

鼠标悬停某条评论时:

  • 自动高亮它的直接父评论
    用来快速确认“我现在在回复谁/这层上下文是什么”。

7) OP(楼主)高亮

楼主(story author)的评论会有额外高亮描边,方便追踪 OP 在楼里说了什么。


8) Dead 评论处理(单选模式)

对被标记为 dead 的评论可以选择:

  • 不处理
  • 弱化(降低透明度/饱和度)
  • 隐藏(同时自动启用弱化)

9) 像素头像(基于用户名生成)

每个用户名旁边会生成一个 对称像素头像(纯前端生成,无请求外部资源):

  • 默认开启
  • 支持调整大小、是否加边框、边框颜色、边框样式
  • 有做性能优化:懒加载 + 缓存,避免长楼卡顿

用途:快速识别同一个人在楼里出现的回复。


10) 复制评论直达链接(可选)

每条评论右上角可以显示 copy

  • 一键复制 item?id=xxx#commentId 的直达链接
    方便分享某条具体回复。

11) 顶部导航吸附 + 回到顶部

  • 顶部 HN 导航栏可吸附(sticky)
  • 右下角 回到顶部按钮(滚动到一定距离才出现)

12) 快捷键(可选)

Alt + Shift:

  • C 全部折叠
  • E 全部展开
  • T 循环切换主题(auto/light/dark)
种子用户
Admin

ui 很不错!

有个点可能我不用 hn,所以看到上 l0 和下 l0 不知道什么意思会感到困惑。

总体很不错,出了会有不少人用good

种子用户
OP

是的嚯 💓 词条命名还需要改改 上 l0 是快捷跳到上一个 l0 级评论的
hn 里面很容易出现一个线程挂过多子线程的情况

发表一个评论

R保持