Bilibili-Evolved「隐藏首页轮播图」组件详解：选项体系、DOM 拦截与样式实现-北京尧图网络

Bilibili-Evolved「隐藏首页轮播图」组件详解选项体系、DOM 拦截与样式实现【免费下载链接】Bilibili-Evolved强大的哔哩哔哩增强脚本项目地址: https://gitcode.com/gh_mirrors/bi/Bilibili-EvolvedBilibili-Evolved 的「隐藏首页轮播图」hideHomeCarousel组件用于移除或弱化哔哩哔哩首页顶部的推荐轮播区域面向希望页面更简洁、减少干扰或降低首屏视觉噪音的用户。本文以该组件的说明文档 index.md 为主体结合其 TypeScript 入口与 SCSS 样式源码逐项讲解每个选项的含义、默认值与取值边界并深入解析轮播禁用、图片模糊等功能背后的监听器与 DOM 事件实现原理。一、功能定位与适用页面该组件属于「样式」分类下的隐藏类功能tags: [componentsTags.style]只作用于哔哩哔哩 PC 端首页其生效页面的 URL 匹配规则在 index.ts 中定义/^https:\/\/www\.bilibili\.com\/$/ /^https:\/\/www\.bilibili\.com\/index\.html$/即仅在https://www.bilibili.com/与https://www.bilibili.com/index.html两个地址加载该组件其他页面如视频页、直播页不受影响。它提供从「完全隐藏」到「局部自定义」的多个粒度用户可以根据偏好选择保留还是彻底移除首页轮播。二、选项说明完整配置项一览文档将选项划分为三组单选模式完全隐藏 / 透明化 / 自定义其中「自定义」模式下还包含四个可独立开关的子选项。以下表格基于 index.md 并结合 index.ts 中的options定义补齐默认值与取值范围选项类型默认值说明完全隐藏full单选true完全隐藏整个轮播区域透明化transparent单选false将整个轮播区域透明化同时禁止点击打开链接自定义custom单选false进入自定义模式展开以下子选项禁用轮播disableCarousel子选项false禁用图片自动轮播仍可手动切换图片模糊blur子选项滑块0模糊轮播图片范围为0到100步进1为0时不模糊隐藏轮播图片picture子选项false隐藏轮播图片同时禁止点击图片打开链接隐藏图片标题footerText子选项false隐藏图片下方的标题文字同时禁止点击标题打开链接显示小组件showWidget独立选项false在页面上显示一个可弹出操作面板的小组件刷新后生效其中blur的滑块边界在 index.ts 中定义为slider: { min: 0, max: 100, step: 1 }模糊量以像素px为单位传递。选项分组与单选逻辑full、transparent、custom三个选项使用单选Radio语义互斥由OptionRadioGroup面板渲染。在 index.ts 中custom通过optionsIncluded: [disableCarousel, blur, picture, footerText]声明其下拉面板中应展示的子选项full与transparent则不包含任何子选项。custom选项本身仅用于记录选项组状态无实际页面效果这一点在源码注释中明确标注index.ts。三、样式层实现四条 CSS 规则完成隐藏与透明所有可见效果均由 hide-home-carousel.scss 承载。该样式以hideHomeCarousel-switch-为前缀通过document.body上的类名切换来生效hideHomeCarousel-switch-full对首页轮播容器.recommended-swipe应用display: none !important直接移除整个区域。hideHomeCarousel-switch-transparent对.recommended-swipe应用opacity: 0与pointer-events: none——前者让区域完全透明后者屏蔽鼠标事件从而「同时禁止点击打开链接」。hideHomeCarousel-switch-picture对轮播图片节点.vui_carousel__slide应用display: none !important隐藏图片本体由于图片不可见且不可交互点击打开链接的行为随之失效。hideHomeCarousel-switch-footerText对标题节点.carousel-footer-text应用display: none !important隐藏图片标题同样切断其点击行为。此外模糊效果不依赖类名切换而是通过 CSS 变量实现.vui_carousel__slide { filter: blur(var(--blur-amount, 0px)); }--blur-amount默认0px由运行时按用户设置动态覆写。这样同一套样式规则即可覆盖全部模糊取值无需为每个像素值生成独立类。四、入口实现监听器驱动的 DOM 操作组件的运行时逻辑集中在 index.ts 的entry函数中。它通过addComponentListener订阅各选项的变化在选项值变更时即时执行对应操作true参数表示注册后立即以当前值触发一次监听保证刷新后选项状态能立刻落地。1. 禁用轮播mouseenter / mouseleave 事件劫持disableCarousel的实现在 index.ts。轮播组件vui_carousel通常通过「鼠标悬停暂停、移出恢复」的交互逻辑控制播放开启时向轮播容器节点添加mouseleave事件的捕获阶段拦截器onCarouselMouseLeaveHandler调用event.stopPropagation()随后手动派发一个mouseenter事件让轮播进入「悬停中」状态从而停止自动播放。关闭时移除该拦截器并派发mouseleave事件恢复轮播的自动播放。利用轮播组件自身既有的交互协议而非强行清除定时器是这套实现保持优雅的原因只需「欺骗」组件使其认为自己一直处于悬停状态即可稳定禁用自动轮播同时保留手动切换能力。元素通过select(.vui_carousel)获取select来自 spin-query.ts会自动轮询等待元素出现在 DOM 中若未找到节点会通过useScopedConsole输出错误日志「找不到轮播容器节点」而非直接抛错。2. 图片模糊批量写入 CSS 变量blur的实现在 index.ts。监听器收到数值后通过selectAll(.vui_carousel__slide)获取全部轮播图片节点逐一执行node.style.setProperty(--blur-amount, ${value}px)随后 SCSS 中的filter: blur(var(--blur-amount, 0px))立即生效。由于轮播图片通常在用户配置时已渲染完毕此方案无需重建样式表只做内联变量写入开销极小。3. 样式类切换四选一的状态映射full、transparent、picture、footerText四个布尔选项共用一段循环逻辑index.tsconst switchClasses [full, transparent, picture, footerText] switchClasses.forEach(c { addComponentListener(${metadata.name}.${c}, (value: boolean) { document.body.classList.toggle(hideHomeCarousel-switch-${c}, value) }, true) })每个选项开启时向document.body追加对应的hideHomeCarousel-switch-*类关闭时移除与第三节的 SCSS 规则一一对应。五、支撑机制设置监听与单选面板设置监听路径的映射addComponentListener定义于 src/core/settings/index.ts它会将「组件名.选项名」转换为设置存储中的完整路径内置组件映射为components.名称.options.选项用户组件映射为userComponents.名称.settings.options.选项见 componentPath。因此本组件监听${metadata.name}.disableCarousel实际写入的路径即components.hideHomeCarousel.options.disableCarousel。单选选项组的面板渲染「完全隐藏 / 透明化 / 自定义」的单选界面由通用组件 OptionRadioGroup.vue 提供。其核心数据结构RadioItem定义在 src/ui/radioItem.tsisOption: true表示该单选按钮对应一个真实设置项显示名称取自组件options的displayName选中状态自动绑定到设置值optionsIncluded决定该单选按钮展开时显示哪些子选项支持名称数组或正则表达式本组件使用数组[disableCarousel, blur, picture, footerText]onChange可在选项切换时执行回调。OptionRadioGroup还会通过addComponentListener同步监听外部对选项值的修改保证多个入口设置面板、小组件弹窗之间状态一致。组件还支持将同一面板以isPopup形式挂载为页面上可点击弹出的小组件index.ts由showWidget选项控制是否显示。六、使用建议与注意事项三个主模式互斥启用「自定义」后可精细组合四个子选项例如仅模糊图片blur设为 20 左右而保留标题或仅隐藏标题而保留图片。「完全隐藏」为默认开启defaultValue: true安装组件后首页轮播默认即被移除如需恢复需在设置面板中切换到其他模式或关闭组件。「透明化」与「完全隐藏」视觉效果相似但前者保留区域占位适合不希望页面高度跳动、仅需视觉静默的场景。组件仅匹配首页 URL在其他页面不生效若刷新后小组件未出现请确认showWidget已开启并重新加载页面。所有实现细节与配置默认值均可在 index.ts 与 hide-home-carousel.scss 中核对选项说明的权威来源为组件目录下的 index.md。【免费下载链接】Bilibili-Evolved强大的哔哩哔哩增强脚本项目地址: https://gitcode.com/gh_mirrors/bi/Bilibili-Evolved创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考

Bilibili-Evolved「隐藏首页轮播图」组件详解：选项体系、DOM 拦截与样式实现

相关推荐

微信小程序阅读系统开发全攻略：从登录到答辩

VLSI CAD布局设计：从算法原理到工程实践

Bilibili-Evolved 稍后再看重定向组件解析：将稍后再看链接一键重定向为普通播放网址

更多资讯

OpenDesign 中的 IBM Carbon 设计系统实现：从 `--cds-*` 令牌到组件级的完整落地指南

uni-app x waterflow 瀑布流组件完整指南：从属性配置到 C++ 回收复用原理

PaddleOCR JS 浏览器端 OCR SDK 开发指南：monorepo 构建流程、TypeScript 工程化与 npm 分发兼容实践

Slang 泛型与存在类型特化：基于 `coverage/specialize` 测试束的 IR 特化行为剖析

uni-app 的 uni_modules 插件规范：从目录结构、package.json 配置到插件开发与发布全指南

修复 IQ1_S_R4 / IQ1_M_R4 量化失败：ik_llama.cpp 中 GGML_ASSERT 崩溃的根因分析与边界处理方案

今日更新

校园网认证计费模式详解：AAA与代拨架构、原理及排障

Spring Boot+Vue垃圾分类毕设：分层、权限与排错实战

把 Cline 的 Base URL 改到 TaoToken 之后，DeepSeek 仍能修调试配置

本周精选

AI驱动的自动化专利分析平台技术解析

LeetCode-Go 题解：1252. Cells with Odd Values in a Matrix（奇数值单元格计数）双解法剖析

在线答疑系统Java毕设实战：Spring Boot前后端分离与状态流转

本月热门

基于YOLO的焊缝缺陷检测：从数据标注到工业部署全流程实践

分布式服务的决策记录

创业产品的首版范围

读完文章，想聊聊您的网站？