BiliRoaming项目动态页"最常访问"模块的精细化净化方案

在BiliRoaming项目的使用过程中，用户反馈了一个关于动态页"最常访问"模块的净化需求。该模块当前作为一个整体进行处理，但实际包含两个独立的内容区块：上方的推荐内容和下方的直播内容。用户希望保留直播内容的同时去除推荐内容，这需要对该模块进行更精细化的净化控制。

技术背景分析

动态页的"最常访问"模块通常由前端组件构成，包含多个子组件。在原生实现中，这些子组件往往被封装在一个父容器内，导致净化工具只能对整个容器进行操作。要实现精细化控制，需要：

1. 识别模块内部不同内容区块的DOM结构
2. 分析各区块的前端渲染逻辑
3. 开发针对性的净化规则

实现方案设计

DOM结构分析

通过开发者工具可以观察到，"最常访问"模块通常具有类似如下的DOM结构：

<div class="frequent-access">
  <div class="recommend-section">...</div>
  <div class="live-section">...</div>
</div>

净化策略

1. CSS选择器定位：通过更精确的CSS选择器定位特定区块
2. 样式覆盖：对不需要的区块应用display:none样式
3. 内容拦截：在数据加载阶段过滤不需要的内容数据

实现示例

// 仅隐藏推荐区块
document.querySelector('.frequent-access .recommend-section').style.display = 'none';

// 或者通过拦截数据
if (data.type === 'recommend') {
  return null; // 过滤推荐数据
}

技术挑战与解决方案

1. 动态加载问题：内容可能异步加载，需要监听DOM变化

   • 解决方案：使用MutationObserver监听DOM变更

2. 样式污染风险：直接修改样式可能影响其他元素

   • 解决方案：添加唯一类名前缀，确保选择器特异性

3. 跨版本兼容性：不同客户端版本DOM结构可能变化

   • 解决方案：建立版本检测机制，适配不同DOM结构

用户体验考量

实现精细化净化后，用户可以：

• 保留真正需要的内容（如直播）
• 去除干扰信息（如推荐）
• 自定义净化粒度，满足个性化需求

总结

通过对BiliRoaming项目动态页"最常访问"模块的深入分析和技术实现，我们展示了如何将原本整体处理的净化功能细化为更精确的区块级控制。这种方案不仅解决了用户的具体需求，也为类似场景下的内容净化提供了可参考的实现模式。关键在于深入理解前端组件结构，设计精确的定位方案，并处理好动态内容和版本兼容性问题。