hacknews 重度用户看过来 ,HN 评论阅读增强脚本：卡片化 + 折叠/跳 L0 + 主题/渐变 + 像素头像（求大佬们的审美建议)
Tiberisino
·
2026-01-06
·
via V2EX
打磨了一周的卡片式 ui 大佬们还有更多的 功能/样式 建议吗 准备发布啦
https://www.bilibili.com/video/BV16tqwBaE4n/
它主要解决什么问题？
- 长楼“找上下文”困难：不知道自己在回复谁
- 讨论树太深，页面太长：滚动疲劳、定位困难
- 想快速扫顶层（ 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 ）
