Bilibili-Evolved 简化评论区（simplifyComments）功能解析：从配置项到源码实现

Bilibili-Evolved 简化评论区（simplifyComments）功能解析：从配置项到源码实现

【免费下载链接】Bilibili-Evolved强大的哔哩哔哩增强脚本项目地址: https://gitcode.com/gh_mirrors/bi/Bilibili-Evolved

导读

"简化评论区"是 Bilibili-Evolved 增强脚本中一个专注净化评论区视觉体验的样式类组件，它通过一系列可开关的配置项，隐藏或优化新版评论区中的用户等级、装扮、头像框、粉丝勋章、小喇叭横幅等冗余元素，并微调回复排版与编辑框细节。本文以该组件的官方说明文档 registry/lib/components/style/simplify/comments/index.md 为主体，结合其入口实现与样式源码，完整讲解 6 个配置项的作用、默认值与底层实现原理。读完本文，你将掌握该组件每个开关的精确行为，理解其如何兼容新版评论区（含 Shadow DOM）与 Firefox 浏览器，并能据此在 Bilibili-Evolved 设置面板中按需定制评论区外观。

一、组件概览：它到底简化了什么

"简化评论区"（英文标识simplifyComments，显示名"简化评论区"）属于 Bilibili-Evolved 的样式类组件，其核心目标可以用一句话概括：去除或优化评论区内的元素，让评论区更干净、更聚焦于内容本身。

从组件入口 index.ts 可以看到，它通过wrapSwitchOptions封装为"开关组"形态，在设置面板中以多个独立开关的形式呈现，每个开关对应一个布尔配置项，组件标识为simplifyOptions。同时，组件还注册了instantStyles（即插即用样式）：

• comments.scss：作用于 v1 旧版评论区；
• comments-v2.scss：作用于 v2 新版评论区（非 Shadow DOM 部分）。

重要前提：官方文档明确指出，所有配置项仅对新版评论区有效。旧版评论区只会套用基础样式（图标统一、布局微调等），不响应下方各开关。

组件开关启用后，还会在document.body上切换simplify-comment类，作为整体生效标记：

addComponentListener( metadata.name, (value: boolean) => { document.body.classList.toggle('simplify-comment', value) }, true, )

二、六个配置项逐一详解

以下配置项均可在 Bilibili-Evolved 设置面板中勾选。以下描述均为勾选时的效果，各开关的默认值与行为依据 index.ts 与 comments-v2.scss、comments-v3.scss。

1. 用户等级（userLevel，默认开启）

隐藏评论者昵称旁的用户等级标识（如 LV5 等级图标）。

• 隐藏方式：通过 CSS 将等级元素display: none。v2 样式中对应.user-level, .sub-user-level，v3 样式中对应 Shadow DOM 里的bili-comment-user-info内的#user-level。
• 替代查看途径：隐藏后，将鼠标停留在评论者头像上，在弹出的资料卡小窗中仍可查看等级信息，不会完全丢失该数据。

2. 装扮 & 时间（decorateAndTime，默认开启）

隐藏评论者的装扮（挂件）图片，并把发送时间移动到原本装扮所在的位置。

• 实现细节：v2 样式中隐藏.reply-decorate，同时将.reply-time、.sub-reply-time改为绝对定位（position: absolute，top: 0、right: 0），使时间文本占据右上角装扮原本的显示区域；v3 样式中对应隐藏bili-comment-user-sailing-card（航行装扮卡片）。
• 视觉效果：装扮被移除后，时间信息被"上提"到第一行右侧，行内空间得到更充分的利用。

3. 回复换行（subReplyNewLine，默认开启）

将楼中楼回复也另起一行显示，与一级回复的排版保持一致。

• 实现细节：v2 样式中对.root-reply采用 flex 布局（display: flex; align-items: center; flex-wrap: wrap），并将.reply-content-container设置为flex-basis: 100%，强制内容独占一行；reply-tag-list（标签列表）则与点赞栏排在同一行，并右移18px缩进。
• 附带效果：文档特别说明，勾选后"热评"、"UP 主点赞"等标记（对应.reply-tag-item）与点赞栏（操作栏）放在同一行，减少纵向高度占用。

4. 编辑框（replyEditor，默认开启）

优化评论区发布框的排版细节：将提示文本（placeholder）居上显示，使其更贴近用户实际输入文字的位置；同时将发布按钮的字号略微调小。

• 实现细节：v2 样式中将.reply-box-textarea的line-height设为normal，并将.reply-box-send .send-text字号设为14px；v3 样式中对应调整bili-comment-box #pub button（14px）、bili-comment-textarea #input（13px）以及复选框bili-checkbox #label（15px）的字号。
• 目的：避免长提示文本在输入框内居中显示造成遮挡感，让占位文字与光标起始位置一致。

5. 粉丝勋章（fansMedal，默认关闭）

隐藏评论者昵称旁的粉丝勋章（含勋章等级）。

• 实现细节：v2 样式中隐藏.fan-badge；v3 样式中隐藏bili-comment-user-info内的bili-comment-user-medal。
• 注意：该开关默认关闭（defaultValue: false），即默认保留粉丝勋章，需要用户主动勾选才会隐藏。

6. 小喇叭横幅（eventBanner，默认开启）

隐藏评论区顶部的小喇叭（官方活动公告）横幅。

• 实现细节：v2 样式中隐藏.reply-notice；v3 样式中隐藏bili-comments-header-renderer内的bili-comments-notice。

配置项速查表

三、配置方式

在 Bilibili-Evolved 的设置面板 → 样式分类中找到"简化评论区"组件（其标签为componentsTags.style），即可看到上述开关组。每个开关独立生效、互不影响，勾选后即时应用，无需刷新页面。由于组件通过addComponentListener监听配置变化，用户在任何时刻切换开关，样式都会实时增删（详见下文实现原理）。

四、实现原理：一份组件，三种样式，两条渲染路径

"简化评论区"最值得称道的是其对评论区多版本、多浏览器的兼容设计。从 index.ts 的入口逻辑可以看出，它实际加载了三份样式、运行在两条路径上。

4.1 三份样式分别服务谁

4.2 路径一：支持容器样式查询的浏览器（主流浏览器）

v3 评论区将大量 DOM 封装在 Shadow DOM 中（元素如bili-comment-renderer、bili-comment-user-info等），外部全局 CSS 无法直接穿透。为此组件利用现代 CSSContainer Style Queries（容器样式查询），把每个开关状态以自定义属性形式暴露，例如：

@container style(--simplifyComments-switch-userLevel: true) { :host(bili-comment-user-info) { #user-level { display: none; } } }

即：当容器自定义属性--simplifyComments-switch-userLevel为true时，隐藏 Shadow DOM 内的等级元素。这份样式通过shadowRootStyles.toggleWithComponent注入到评论区组件的 Shadow Root 中。

4.3 路径二：Firefox 回退方案（逐开关动态注入）

由于 Firefox 当时尚未支持 Container Style Queries，入口代码先通过 src/core/container-query.ts 的isContainerStyleQuerySupported()做特性检测——其原理是向文档注入一个@container style(...)规则并读取计算后的自定义属性值来判断支持与否：

export const isContainerStyleQuerySupported = lodash.once(() => { return ( window.getComputedStyle(document.body).getPropertyValue('--container-query-supported') === 'true' ) })

在不支持的浏览器（Firefox）中，组件改用require.context('./comments-v3-firefox', false, /\.scss$/)动态收集 comments-v3-firefox 目录下的 6 个样式文件，文件名与开关 key 通过lodash.kebabCase相互转换（如userLevel→user-level.scss）。随后为每个开关注册监听器：勾选时通过addStyle将对应样式注入主文档与 Shadow Root，取消时按样式 ID 移除。该目录下的样式与 v3 样式一一对应：

代码注释中说明：等 Firefox 支持 Container Style Queries 后，可移除这一整条回退分支，统一走 v3 样式。

4.4 旧版评论区的基础优化

即便对于已不受开关控制的旧版评论区（v1），comments.scss 也做了不少细节优化，包括：

• 将楼中楼信息栏重新排序（楼层 → 回复 → 标签 → 操作栏，操作栏右对齐）；
• 点赞/点踩/举报图标统一替换为 Material Design Icons（@mixin mdi），并支持暗色模式反色；
• 隐藏回复通知栏（.reply-notice）、投票容器（.vote-container）等冗余元素；
• 对 lite 版发评论框做吸底（sticky）适配。

这些优化不依赖任何开关，是组件的基础净化能力。

五、从源码看设计要点

1. 默认值体现产品取舍：6 个开关中只有"粉丝勋章"默认关闭，其余全部默认开启，反映出作者认为等级、装扮、横幅属于高干扰元素，而粉丝勋章属于用户可接受甚至愿意展示的身份标识，故默认保留、由用户自行决定。
2. 开关与样式的解耦：v2 样式通过body.simplifyComments-switch-<key>类选择器响应开关，v3 样式通过@container style(...)响应，两者都不需要 JS 逐条操作 DOM，仅靠配置监听器切换 body 类或注入/移除样式，性能开销极小。
3. 渐进增强的兼容策略：优先使用现代 CSS 特性（容器样式查询），对不支持的老浏览器提供等价的逐开关样式回退，保证功能在所有目标浏览器上一致。

结语

"简化评论区"是 Bilibili-Evolved 样式类组件中"小功能、精实现"的典型代表：文档虽短，但背后的源码同时覆盖了旧版评论区、新版评论区（Shadow DOM）和 Firefox 兼容三条战线。理解这 6 个开关的默认值与行为，你就能在设置面板中一键获得更清爽的评论阅读体验；读懂 index.ts 与两份 v3 样式，也能为你在其他组件中处理 Shadow DOM 样式注入与浏览器兼容问题提供直接参考。

【免费下载链接】Bilibili-Evolved强大的哔哩哔哩增强脚本项目地址: https://gitcode.com/gh_mirrors/bi/Bilibili-Evolved