Bilibili-Evolved 全屏直播礼物简化组件深度解析移除全屏直播底部礼物栏的实现原理与使用指南【免费下载链接】Bilibili-Evolved强大的哔哩哔哩增强脚本项目地址: https://gitcode.com/gh_mirrors/bi/Bilibili-Evolved导读本文围绕 Bilibili-Evolved哔哩哔哩增强脚本中的「全屏直播礼物简化」组件展开该组件的功能定义位于 registry/lib/components/live/hide-gift-fullscreen/index.md其核心作用是在进入直播全屏观看模式时移除底部礼物栏让观众在全屏沉浸式观看时不再被礼物入口遮挡画面。本文将结合该目录下的组件源码与样式文件完整还原其实现机制、CSS 覆盖策略、生效范围与启用方式帮助读者理解 Bilibili-Evolved 中纯样式型组件纯 CSS 组件的编写范式并掌握如何按需开启或关闭该功能。一、功能概述全屏模式下的一行 CSS 简化该组件在设置面板中的显示名称为「全屏直播礼物简化」组件内部标识为hide-fullscreen-gift-bar。它的目标非常明确B 站直播在进入全屏模式后底部会常驻一个包含礼物栏、互动按钮等内容的悬浮交互层占据一定的纵向空间并持续吸引视觉注意力。该组件通过注入样式将这一层隐藏同时将全屏弹幕区域下移微调补偿被移除区域的空白保持弹幕视觉位置的连贯性。值得说明的是该组件是一个典型的纯样式组件它没有独立的入口逻辑entry指向空函数全部行为都由一行核心 CSS 与一行补偿 CSS 完成样式注入与回收完全交由 Bilibili-Evolved 的「首屏样式instantStyles」机制管理。这种实现方式是理解该项目样式型组件的最佳范例。二、组件元数据解析index.ts 中的声明与路由组件入口文件为 registry/lib/components/live/hide-gift-fullscreen/index.ts它使用defineComponentMetadata声明组件元数据该 API 定义于 src/components/define.tsexport const component defineComponentMetadata({ name: hide-fullscreen-gift-bar, displayName: 全屏直播礼物简化, author: { name: TimmyOVO, link: https://github.com/TimmyOVO, }, instantStyles: [ { name: hide-fullscreen-gift, style: () import(./hide-full-screen-gift.css), }, ], entry: none, tags: [componentsTags.live, componentsTags.style], urlInclude: liveUrls, })各字段含义如下字段类型定义见 src/components/types.ts 中的ComponentMetadata/InstantStyleDefinition字段值说明namehide-fullscreen-gift-bar组件唯一标识用于设置存储、监听与样式命名displayName全屏直播礼物简化设置面板中展示的名称authorTimmyOVO组件作者信息instantStyleshide-fullscreen-gift首屏样式定义样式内容从同目录 CSS 文件懒加载() import(...)entrynone入口函数为空none定义于 src/core/utils/index.ts即该组件无运行时 JS 逻辑tagslivestyle组件在设置面板中的分类标签直播、样式定义见 src/components/types.tsurlIncludeliveUrls仅当页面 URL 匹配时才注入样式其中urlInclude: liveUrls中的liveUrls定义于 src/core/utils/urls.tsexport const liveUrls [/^https:\/\/live\.bilibili\.com\/(blanc\/)?[\d]/]该正则匹配https://live.bilibili.com/房间号以及https://live.bilibili.com/blanc/房间号两种形式的直播间 URL。这意味着组件样式只会在直播间页面注入普通视频页、动态页等均不受影响。从源码结构看urlInclude不匹配时组件不会运行因此该样式不会对非直播页面造成任何副作用。此外ComponentMetadata中的enabledByDefault字段在省略时默认为true见 src/components/types.ts 的注释该组件未显式声明该字段因此默认开启安装脚本后无需额外配置即可生效。三、样式实现剖析两行 CSS 如何完成「移除 补偿」核心样式文件为 registry/lib/components/live/hide-gift-fullscreen/hide-full-screen-gift.css完整内容如下#full-screen-interactive-wrap { display: none !important } #fullscreen-danmaku-vm .fullscreen-danmaku { bottom: 5px !important }3.1 隐藏底部礼物交互层第一条规则针对#full-screen-interactive-wrap选择器将其display设为none并附加!important。这是 B 站直播全屏模式下承载底部礼物栏、互动按钮等内容的交互容器。由于 B 站自身样式也大量使用!important组件必须同样使用!important才能在级联优先级上胜出项目 src/core/style.ts 中也明确注释B 站会使用!important因此项目提供了专门的「重要样式」追加逻辑。3.2 弹幕位置上移补偿第二条规则将全屏弹幕容器#fullscreen-danmaku-vm内的.fullscreen-danmaku元素从默认的底部位置bottom原值由 B 站样式决定调整为bottom: 5px。这一设计的作用是礼物栏被隐藏后原底部会留出空白将弹幕层下移至贴近底边可以让弹幕继续以接近原位置的视觉高度滚动避免「弹幕悬在半空」的割裂观感。这里的5px是一个经过取舍的视觉补偿值既贴近底部又保留了微小边距防止弹幕贴边影响阅读。从整体实现看该组件没有使用任何脚本逻辑entry: none两条 CSS 规则分别承担「移除遮挡元素」与「重排弹幕位置」两个职责形成一个自洽的视觉简化方案。四、样式注入机制instantStyles 如何被加载与回收该组件之所以无需entry逻辑即可生效依赖的是 Bilibili-Evolved 的「首屏样式instant styles」机制。组件的instantStyles声明src/components/types.ts 中InstantStyleDefinition/DomInstantStyleDefinition接口支持两种样式来源直接提供样式字符串提供一个返回{ default: string }的异步导入函数本组件采用此方式将 CSS 文件作为独立资源按需加载。样式加载的核心实现在 src/core/style.ts 的loadInstantStyle函数中遍历组件的instantStyles若style为字符串则直接使用否则await it.style()动态导入样式模块并取出default根据定义是否为 Shadow DOM 样式决定注入方式普通 DOM 样式会创建style元素其id由getDefaultStyleID依据样式名生成camelCase 转 kebab-case 规则见 src/core/style.ts随后插入到文档head末尾。由于样式名为hide-fullscreen-gift生成的样式标签 ID 即为hide-fullscreen-gift。同时src/core/style.ts 中的preloadStyles会为每个带instantStyles的组件注册启用/禁用监听器组件启用时调用loadInstantStyle(component)注入样式组件关闭时通过removeInstantStyle按样式名移除对应style元素src/core/style.ts。这意味着该功能是完全可逆的——在设置面板中关闭组件后注入的样式会被移除B 站原生的全屏礼物栏立即恢复无需刷新页面。这种「声明式样式 生命周期监听」的设计让纯 CSS 组件也能拥有与脚本组件一致的启停体验。五、在设置面板中启用与关闭该功能该组件默认开启enabledByDefault省略时默认为 true但用户可以在 Bilibili-Evolved 的设置面板中随时调整点击脚本侧边栏的「设置」入口打开设置面板在组件列表中定位到「全屏直播礼物简化」归类于「直播」与「样式」标签下可通过面板顶部的标签筛选快速定位标签颜色与排序定义见 src/components/types.ts通过开关切换启用状态关闭后样式立即回收全屏礼物栏恢复显示。需要特别说明的是由于该组件受urlInclude: liveUrls约束样式只在直播间页面注入若在非直播页面切换开关实际样式变化会在进入直播间后体现。六、同目录组件的横向参考hide-gift-fullscreen位于直播类组件的样式型子目录中与它相邻的组件如 registry/lib/components/live/remove-mask-panel、registry/lib/components/live/gift-box、registry/lib/components/live/hide-player-blur 等共同构成了针对直播观看体验的优化集合。这些组件大多遵循同样的「index.md功能描述 index.ts元数据声明 .scss/.css样式文件」三段式结构其中 index.md 的一行描述会在构建阶段被注入为组件的功能说明文本见 src/components/types.ts 中FeatureBase.description的注释最终展示在设置面板的组件详情中。若读者希望编写自定义样式型组件完全可以参照本组件的最小化实现——只需声明instantStyles与urlIncludeentry留空即可。七、总结「全屏直播礼物简化」是 Bilibili-Evolved 中一个极具代表性的纯样式轻量组件它以两行 CSS 实现了「隐藏全屏底部礼物栏 弹幕位置补偿」的完整视觉简化通过instantStyles机制实现按需注入与即时回收通过urlInclude将影响范围严格限定在直播间页面默认开启且无需任何配置。理解这一组件既能帮助使用者按需调整直播全屏观看体验也能为开发者阅读或编写同类样式型组件提供一份清晰的参考范式。【免费下载链接】Bilibili-Evolved强大的哔哩哔哩增强脚本项目地址: https://gitcode.com/gh_mirrors/bi/Bilibili-Evolved创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考