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-levelv3 样式中对应 Shadow DOM 里的bili-comment-user-info内的#user-level。替代查看途径隐藏后将鼠标停留在评论者头像上在弹出的资料卡小窗中仍可查看等级信息不会完全丢失该数据。2. 装扮 时间decorateAndTime默认开启隐藏评论者的装扮挂件图片并把发送时间移动到原本装扮所在的位置。实现细节v2 样式中隐藏.reply-decorate同时将.reply-time、.sub-reply-time改为绝对定位position: absolutetop: 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字号设为14pxv3 样式中对应调整bili-comment-box #pub button14px、bili-comment-textarea #input13px以及复选框bili-checkbox #label15px的字号。目的避免长提示文本在输入框内居中显示造成遮挡感让占位文字与光标起始位置一致。5. 粉丝勋章fansMedal默认关闭隐藏评论者昵称旁的粉丝勋章含勋章等级。实现细节v2 样式中隐藏.fan-badgev3 样式中隐藏bili-comment-user-info内的bili-comment-user-medal。注意该开关默认关闭defaultValue: false即默认保留粉丝勋章需要用户主动勾选才会隐藏。6. 小喇叭横幅eventBanner默认开启隐藏评论区顶部的小喇叭官方活动公告横幅。实现细节v2 样式中隐藏.reply-noticev3 样式中隐藏bili-comments-header-renderer内的bili-comments-notice。配置项速查表配置项开关 key显示名默认值隐藏/优化的目标userLevel用户等级开等级标识头像悬停资料卡仍可查看decorateAndTime装扮 时间开装扮图片时间上移到装扮位置subReplyNewLine回复换行开楼中楼回复另起一行标记与点赞栏同行replyEditor编辑框开提示文本居上发布按钮字号调小fansMedal粉丝勋章关粉丝勋章eventBanner小喇叭横幅开评论区顶部小喇叭横幅三、配置方式在 Bilibili-Evolved 的设置面板 → 样式分类中找到简化评论区组件其标签为componentsTags.style即可看到上述开关组。每个开关独立生效、互不影响勾选后即时应用无需刷新页面。由于组件通过addComponentListener监听配置变化用户在任何时刻切换开关样式都会实时增删详见下文实现原理。四、实现原理一份组件三种样式两条渲染路径简化评论区最值得称道的是其对评论区多版本、多浏览器的兼容设计。从 index.ts 的入口逻辑可以看出它实际加载了三份样式、运行在两条路径上。4.1 三份样式分别服务谁样式文件作用对象comments.scssv1 旧版评论区.bb-comment主要做图标统一、操作栏排序、时间定位等基础优化不含各开关逻辑comments-v2.scssv2 新版评论区.bili-comment通过body.simplifyComments-switch-key类选择器响应各开关comments-v3.scssv3 新版评论区Shadow DOM 内通过container style(...)容器样式查询响应各开关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 回退样式核心规则用户等级user-level.scss隐藏#user-level装扮 时间decorate-and-time.scss隐藏bili-comment-user-sailing-card回复换行sub-reply-new-line.scss用户信息块改为display: block编辑框reply-editor.scss发布按钮 14px、输入框 13px、提示文本line-height: normal粉丝勋章fans-medal.scss隐藏bili-comment-user-medal小喇叭横幅event-banner.scss隐藏bili-comments-notice代码注释中说明等 Firefox 支持 Container Style Queries 后可移除这一整条回退分支统一走 v3 样式。4.4 旧版评论区的基础优化即便对于已不受开关控制的旧版评论区v1comments.scss 也做了不少细节优化包括将楼中楼信息栏重新排序楼层 → 回复 → 标签 → 操作栏操作栏右对齐点赞/点踩/举报图标统一替换为 Material Design Iconsmixin mdi并支持暗色模式反色隐藏回复通知栏.reply-notice、投票容器.vote-container等冗余元素对 lite 版发评论框做吸底sticky适配。这些优化不依赖任何开关是组件的基础净化能力。五、从源码看设计要点默认值体现产品取舍6 个开关中只有粉丝勋章默认关闭其余全部默认开启反映出作者认为等级、装扮、横幅属于高干扰元素而粉丝勋章属于用户可接受甚至愿意展示的身份标识故默认保留、由用户自行决定。开关与样式的解耦v2 样式通过body.simplifyComments-switch-key类选择器响应开关v3 样式通过container style(...)响应两者都不需要 JS 逐条操作 DOM仅靠配置监听器切换 body 类或注入/移除样式性能开销极小。渐进增强的兼容策略优先使用现代 CSS 特性容器样式查询对不支持的老浏览器提供等价的逐开关样式回退保证功能在所有目标浏览器上一致。结语简化评论区是 Bilibili-Evolved 样式类组件中小功能、精实现的典型代表文档虽短但背后的源码同时覆盖了旧版评论区、新版评论区Shadow DOM和 Firefox 兼容三条战线。理解这 6 个开关的默认值与行为你就能在设置面板中一键获得更清爽的评论阅读体验读懂 index.ts 与两份 v3 样式也能为你在其他组件中处理 Shadow DOM 样式注入与浏览器兼容问题提供直接参考。【免费下载链接】Bilibili-Evolved强大的哔哩哔哩增强脚本项目地址: https://gitcode.com/gh_mirrors/bi/Bilibili-Evolved创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考