Bilibili-Evolved「隐藏直播推荐」组件完全解析：功能、选择器原理与配置指南
Bilibili-Evolved「隐藏直播推荐」组件完全解析功能、选择器原理与配置指南【免费下载链接】Bilibili-Evolved强大的哔哩哔哩增强脚本项目地址: https://gitcode.com/gh_mirrors/bi/Bilibili-EvolvedBilibili-Evolved 是面向 B 站网页端的功能增强脚本其中内置了大量隐藏类样式组件用于精简页面中不想要的元素。本文聚焦其中的隐藏直播推荐hideRecommendedLive组件围绕其在 registry/lib/components/style/hide/video/recommended-live/index.md 中的定义展开结合组件注册元数据与样式源码讲清它的作用范围、开启方式、底层实现原理以及它和同系列隐藏组件的区别。读完本文你将不仅知道怎么用还能理解它依赖的 B 站页面 DOM 结构以及组件在脚本内的装载机制。一、组件功能概述隐藏视频页面右侧下方的直播推荐按照官方文档的定义该组件的功能是隐藏视频页面右侧下方的直播推荐。即当你在 B 站观看视频时页面右侧相关推荐区域推荐视频列表的下方通常会附带一排直播推荐卡片推荐正在直播的主播。开启本组件后这一整块直播推荐内容会被彻底隐藏让右侧栏只保留视频推荐从而减少无关信息的干扰。该组件归属于 Bilibili-Evolved 的样式style类组件组件标识为hideRecommendedLive中文显示名称为「隐藏直播推荐」。功能清单中的完整描述可参见 doc/features/features.md。二、适用范围与开启方式2.1 生效页面范围从组件元数据看该组件只作用于视频页面。组件注册信息registry/lib/components/style/hide/video/recommended-live/index.ts中声明了urlInclude: videoUrls,其中videoUrls定义于 src/core/utils/urls.ts其组成为export const videoUrls [//www.bilibili.com/video/, ...festivalUrls, ...mediaListUrls]//www.bilibili.com/video/常规视频播放页...festivalUrlsB 站的活动/节日专题视频页...mediaListUrls视频合集播单页面。也就是说只有在上述视频类页面中该组件的样式才会被注入并生效在番剧Bangumi页、直播页、首页等其他页面中不会触发。2.2 开启方法该组件与 Bilibili-Evolved 内其他功能组件一致无需手动写代码打开安装了 Bilibili-Evolved 脚本的 B 站页面点击页面左侧的功能面板设置面板在面板的搜索框中输入隐藏直播推荐打开该功能的开关即可即时生效。由于它属于instantStyles即时样式组件开启后样式会立刻注入页面无需刷新关闭后样式随即移除。三、实现原理instantStyles SCSS 选择器该组件没有编写任何业务逻辑代码entry: none表明它没有独立的功能入口函数。它的全部实现都集中在一个样式文件中——这是 Bilibili-Evolved 中纯隐藏类组件的典型写法。3.1 样式装载机制组件通过instantStyles字段以按需动态加载的方式引入样式index.tsinstantStyles: [ { name: hideRecommendedLive, style: () import(./recommended-live.scss), }, ],这里的style: () import(...)是动态导入语法意味着样式只在urlInclude匹配的页面中才被加载加载由 Bilibili-Evolved 的核心样式管理机制位于 src/core/style.ts负责注入与移除与组件的开关状态联动。3.2 核心样式源码逐行解析隐藏逻辑的实体位于 recommended-live.scss完整内容如下#live_recommand_report, // b站以前写的recommand, 后来改对了 #live_recommend_report, .video-container-v1 .pop-live-small-mode { display: none !important; }这段样式隐藏了三类目标#live_recommand_reportB 站早期版本的直播推荐容器注意这个历史遗留拼写recommand少了一个 e#live_recommend_reportB 站后来修正为正确拼写的直播推荐容器.video-container-v1 .pop-live-small-mode新版视频页容器.video-container-v1内的小模式直播弹窗。源码注释b站以前写的recommand, 后来改对了直接点明了前两个选择器的来历B 站前端曾经把recommend拼写为recommand后来改成了正确拼写。为了让组件在两个时期、两种页面结构下都能生效脚本作者同时保留了新旧两个 ID 选择器。第三个选择器则覆盖了另一种直播展示形态小窗模式弹层。三者统一应用display: none !important;以最高优先级强制移除目标元素确保不会被页面自身的样式规则覆盖。四、与同系列隐藏组件的区分在 Bilibili-Evolved 中隐藏视频页面元素是一整个组件族统一放在 registry/lib/components/style/hide/video/ 目录下各组件职责互不重叠组件显示名称隐藏目标hideRecommendedLive隐藏直播推荐右侧推荐区的直播卡片本文主题hideRelatedVideos隐藏视频推荐番剧和视频页面右侧的推荐视频列表related-videos/index.tshideVideoNotes隐藏笔记按钮视频页面中的记笔记按钮hideVideoReport隐藏举报按钮视频页面中的举报入口hideVideoShare隐藏分享按钮视频页面中的分享入口hideVideoTopMask隐藏顶部遮罩视频页顶部悬浮遮罩层其中与本文组件最相似的是hideRelatedVideos。需要注意一个使用上的细节出自其官方文档 related-videos/index.md如果想关闭 B 站自动连播自动播放下一个推荐视频功能需要先取消隐藏视频推荐才能在页面上看到自动连播的开关——因为自动连播开关就藏在推荐视频列表区域中。而隐藏直播推荐只移除直播卡片不会影响自动连播开关的可见性两者可以放心同时开启。五、从源码结构看此类组件的设计模式通过本组件可以观察到 Bilibili-Evolved 隐藏类组件的通用设计套路同类目录结构完全一致registry/lib/components/style/hide/video/recommended-live/ ├── index.md # 功能说明文档即本文依据 ├── index.ts # 组件注册元数据 └── recommended-live.scss # 实际隐藏逻辑index.ts通过defineComponentMetadata声明组件元信息包括name、displayName、tags本组件标记为style与video两类、urlInclude生效范围以及instantStyles样式清单recommended-live.scss以display: none !important为核心的纯 CSS 隐藏规则并针对 B 站 DOM 的历史变更保留兼容选择器index.md一行精炼的功能描述与 doc/features/features.md 中的功能清单互为补充。编译后该组件会以独立文件registry/dist/components/style/hide/video/recommended-live.js的形式输出支持作为独立的在线组件加载相关分发配置记录在 doc/features/pack/pack.json 中。六、小结「隐藏直播推荐」是 Bilibili-Evolved 中一个极小但典型的样式组件一条功能描述、一份注册元数据、一段三行选择器的 SCSS即可完成对视频页右侧直播推荐区域的精确隐藏。它的价值不仅在于功能本身更在于展示了脚本生态中以即时样式实现 UI 精简的标准化做法以及对 B 站前端 DOM 演变的兼容处理——新旧两个#live_recommand_report/#live_recommend_report选择器的并存正是这类长期维护型用户脚本贴近真实网页环境的最佳注脚。若你想深入了解整个隐藏组件族的更多成员可直接浏览 registry/lib/components/style/hide/video/ 目录。【免费下载链接】Bilibili-Evolved强大的哔哩哔哩增强脚本项目地址: https://gitcode.com/gh_mirrors/bi/Bilibili-Evolved创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考