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 拦截与样式实现
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），仅供参考