Bilibili-Evolved「隐藏记笔记」组件解析:一行 CSS 如何屏蔽视频页笔记按钮【免费下载链接】Bilibili-Evolved强大的哔哩哔哩增强脚本项目地址: https://gitcode.com/gh_mirrors/bi/Bilibili-Evolved导读Bilibili-Evolved 注册表中提供了一组用于精简 B 站视频播放页面的样式组件,其中notes(隐藏记笔记)组件通过一条核心 CSS 规则,将视频工具栏中的记笔记按钮彻底从页面上移除。本文以 registry/lib/components/style/hide/video/notes/index.md 为线索,完整梳理该组件的元数据定义、样式实现与注入机制,并对比同目录下其他隐藏类组件,帮助你理解这类纯样式组件在 Bilibili-Evolved 中的组织方式与工作原理。一、组件功能:隐藏视频页面中的记笔记按钮该组件的官方说明位于 index.md,全文只有一句话:隐藏视频页面中的 记笔记 按钮.它属于 Bilibili-Evolved 的隐藏组件家族,目标是清理 B 站视频播放页工具栏中用户不需要的入口。开启后,视频页面工具栏里原本位于收藏、分享等操作之间的记笔记按钮将被隐藏,视频控制栏会因此更简洁,同时避免误触。需要说明的是,该组件只负责隐藏按钮,不会禁用笔记功能本身——通过其他入口(如已创建的笔记页面)仍然可以查看和管理笔记内容。这是隐藏类组件与功能增强类组件的本质区别。二、组件源码结构:三文件的标准样式组件范式notes组件在仓库中由三个文件组成,恰好体现了 Bilibili-Evolved 注册表组件的标准三件套结构:文件作用index.ts组件元数据定义(名称、显示名、标签、样式入口)hide-video-notes.scss实际生效的样式规则index.md组件的说明文档,用于设置面板中的功能描述其中index.ts是整个组件的身份证,它通过defineComponentMetadata声明元数据:import { defineComponentMetadata } from /components/define const name hideVideoNotes export const component defineComponentMetadata({ name, displayName: 隐藏记笔记, tags: [componentsTags.video, componentsTags.style], entry: none, instantStyles: [ { name, style: () import(./hide-video-notes.scss), }, ], })这里的几个字段含义如下:name:内部标识符hideVideoNotes,用于设置项存储与样式 ID 生成;displayName:设置面板中展示的名称隐藏记笔记;tags:组件标签,同时标记为video(视频)与style(样式)两类,方便在设置面板的视频/样式分类中检索;entry: none:声明该组件没有 JavaScript 入口逻辑,是纯样式组件;instantStyles:声明首屏样式,即通过懒加载方式动态引入 scss 文件。defineComponentMetadata定义于 src/components/define.ts,它的作用是给组件元数据对象提供完整的类型推导,保证各字段符合ComponentMetadata接口约定(接口定义见 src/components/types.ts)。而entry: none中的none是核心工具库提供的一个空函数,定义于 src/core/utils/index.ts,表示无需执行任何逻辑。三、核心样式:一条 CSS 规则的前因后果真正的隐藏动作发生在 hide-video-notes.scss 中,整份样式文件仅有一条规则:.video-toolbar-container .video-note .video-note-inner { display: none !important; }逐层拆解这条选择器:.video-toolbar-container:B 站视频播放器下方视频工具栏的容器类名,收藏、投币、分享、记笔记等操作按钮都挂载在这个容器内;.video-note:工具栏中的记笔记按钮条目;.video-note-inner:该按钮内部的实际可点击内容层。将三层类名串联后,display: none会同时隐藏按钮的外层条目与内层内容。之所以要作用到最内层的.video-note-inner而不是外层.video-note,是为了对抗 B 站自身样式——外层元素可能仍被布局系统保留占位,直接隐藏内层内容能确保按钮既不可见也不可点击。!important则保证这条规则在样式优先级上压过 B 站页面自带样式以及可能的样式干扰。从实现路径来看,这恰好印证了选择器尽可能精确、作用层级尽可能深的样式组件编写惯例——同类组件如 report(隐藏稿件投诉)、share(隐藏分享) 等,均采用了instantStyles 独立 scss的相同范式。四、运行原理:instantStyles 首屏样式如何注入页面notes组件没有entry逻辑,它的全部行为都由instantStyles驱动。在 Bilibili-Evolved 中,这一机制由 src/core/style.ts 的loadInstantStyle函数实现:遍历组件的instantStyles数组;对每一项,若style是字符串则直接使用,否则调用style()动态加载对应的 scss 模块,取回编译后的 CSS 文本;根据定义是否带有shadowDom标记,决定注入到 Shadow DOM 还是普通文档;对于普通注入,创建一个style元素,其id由getDefaultStyleID根据组件名生成(camelCase转kebab-case,hideVideoNotes会变成hide-video-notes),随后追加到head中。整个加载流程在 src/core/style.ts 中与组件开关状态联动:组件启用时调用loadInstantStyle注入样式,关闭时通过removeInstantStyle(见 src/core/style.ts)按样式 ID 移除,从而实现设置面板中的即时开关效果。由于 scss 使用动态import()懒加载,未启用该组件的用户不会额外加载任何样式代码。五、组件定位:它在隐藏家族中的位置notes组件位于 registry/lib/components/style/hide/video/ 目录下,与它并列的还有report(隐藏稿件投诉)、share(隐藏分享)、related-videos(隐藏相关视频)、recommended-live(隐藏推荐直播)、top-mask(隐藏顶部遮罩)等组件,它们共同构成视频页隐藏组件群。这些组件共享同一套元数据模式:均使用defineComponentMetadata声明;均携带[componentsTags.video, componentsTags.style]双标签;均以entry: noneinstantStyles的方式实现纯样式隐藏。标签常量componentsTags定义于 src/components/types.ts,其中video标签显示名为视频、颜色#2196F3、图标mdi-play-circle-outline,style标签显示名为样式、颜色#8BC34A、图标mdi-palette-outline。设置面板正是依据这些标签对组件进行分组与搜索。六、使用方式与适用前提notes组件默认随脚本分发,无需额外安装。在 Bilibili-Evolved 的设置面板中,可以通过以下任一方式定位:按名称搜索隐藏记笔记或记笔记;在视频或样式标签分类下浏览隐藏相关组件列表。找到后打开开关即可立即生效(得益于instantStyles的动态注入机制,无需刷新页面);再次关闭开关,样式会被移除,按钮恢复显示。若你希望自行查看该组件的完整注册信息,可查阅 registry/webpack/all.ts 与 registry/webpack/components.ts 中对该组件的引入与打包配置。适用前提:该组件针对 B 站网页版视频播放页(video 页面)的工具栏结构编写,选择器依赖 B 站当前的 DOM 类名(如.video-toolbar-container、.video-note、.video-note-inner)。若 B 站后续改版调整工具栏 DOM 结构,该组件可能失效,届时需要依据新版页面结构更新 hide-video-notes.scss 中的选择器。这也是所有隐藏类样式组件的共同维护要点。小结「隐藏记笔记」组件是理解 Bilibili-Evolved 纯样式组件机制的绝佳样本:它用一条精准的 CSS 规则完成功能,通过instantStyles实现按需加载与即时开关,并借助defineComponentMetadata与标签体系无缝接入设置面板。掌握了它的结构,你就能举一反三地理解 registry/lib/components/style/hide/video/ 下乃至整个注册表中所有隐藏/样式类组件的组织与运行逻辑。【免费下载链接】Bilibili-Evolved强大的哔哩哔哩增强脚本项目地址: https://gitcode.com/gh_mirrors/bi/Bilibili-Evolved创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考