Bilibili-Old项目：如何快速修复评论区翻页功能失效问题

发布时间：2026/7/31 20:45:02

Bilibili-Old项目：如何快速修复评论区翻页功能失效问题

【免费下载链接】Bilibili-Old恢复旧版Bilibili页面，为了那些念旧的人。项目地址: https://gitcode.com/gh_mirrors/bi/Bilibili-Old

Bilibili-Old是一个致力于恢复B站旧版页面体验的开源项目，通过Tampermonkey用户脚本和Chrome扩展两种方式，为怀念经典界面的用户提供完整的旧版B站功能。近期B站对评论区系统进行灰度更新，导致该项目中的翻页评论区功能出现兼容性问题，本文将深入分析问题根源并提供完整的修复方案。

📋 问题现象：评论区功能为何突然失效？

当Bilibili-Old用户尝试使用翻页评论区功能时，可能会遇到以下现象：

评论区样式回退- 页面被强制切换回B站原生瀑布流样式
翻页按钮消失- 原本位于右上角的翻页导航完全不可见
脚本功能中断- 用户脚本虽然仍在运行，但无法正确识别新版DOM结构

图：项目中的加载动画，当评论区功能失效时用户可能会看到类似的加载异常状态

问题的核心在于B站采用了渐进式灰度更新策略，逐步替换前端组件，这使得基于固定DOM选择器的脚本无法适应动态变化的页面结构。

🔍 技术分析：B站前端架构变更的影响

前端DOM结构变化

B站新版评论区采用了完全不同的HTML架构：

选择器失效- 旧版脚本依赖的.comment-list、.page-navigator等CSS类名已被替换
事件监听中断- 原有的翻页点击事件绑定机制无法作用于新元素
API接口调整- 评论数据获取的接口参数和返回格式发生变化

灰度更新的挑战

B站的灰度发布策略意味着：

不同用户看到不同界面- 部分用户仍在使用旧版，部分已切换到新版
动态加载机制- 评论区组件可能异步加载，时机难以把握
AB测试影响- 同一用户在不同时间可能看到不同版本的界面

🛠️ 修复方案：三管齐下的兼容性策略

1. 动态DOM检测与适配

修复后的脚本采用了更智能的选择器策略：

// 旧版选择器（已失效） const commentList = document.querySelector('.comment-list'); // 新版选择器（动态适配） const detectCommentContainer = () => { // 尝试多种可能的容器选择器 const selectors = [ '.comment-container', '.reply-list', '[class*="comment"]', '[class*="reply"]' ]; for (const selector of selectors) { const element = document.querySelector(selector); if (element) return element; } return null; };

2. 增强型事件监听机制

为避免事件绑定失效，项目实现了多重事件监听策略：

MutationObserver监控- 实时监测DOM变化，及时重新绑定事件
事件委托机制- 将事件监听提升到更稳定的父级容器
防抖处理- 避免频繁的DOM操作导致性能问题

3. API兼容层设计

针对B站API接口的变化，项目增加了API适配层：

class CommentAPIAdapter { async fetchComments(oid, type, page = 1) { try { // 尝试新版API格式 return await this.fetchNewAPI(oid, type, page); } catch (error) { // 降级到旧版API return await this.fetchLegacyAPI(oid, type, page); } } }

📁 项目架构：深入了解修复实现

核心功能模块结构

修复工作主要涉及以下核心模块：

评论功能模块-src/core/comment.ts处理评论数据获取和渲染逻辑
用户界面组件-src/core/ui/目录下的各种UI组件实现
网络请求层-src/io/目录中的API调用封装

配置与扩展管理

项目提供了灵活的配置系统：

Tampermonkey脚本- 独立评论修复脚本位于tampermonkey/comment/main.user.js
Chrome扩展版本- 完整的浏览器扩展实现
用户设置界面- 通过右下角齿轮图标访问所有功能开关

图：Bilibili-Old项目的扩展图标，代表对经典B站体验的坚持

🚀 用户操作指南：快速恢复功能

方案一：更新脚本（推荐）

访问脚本页面- 获取最新版本的Bilibili-Old脚本
重新安装- 覆盖安装或删除后重新添加
刷新B站页面- 确保新脚本生效

方案二：手动配置调整

如果自动更新后仍有问题，可以尝试：

清理浏览器缓存- 清除B站相关的本地存储
禁用其他冲突脚本- 检查是否有其他B站相关脚本干扰
调整脚本执行顺序- 确保Bilibili-Old脚本优先执行

方案三：开发者调试模式

对于技术用户，可以通过以下方式排查问题：

// 在浏览器控制台检查 console.log('当前评论容器:', document.querySelector('.comment-container')); console.log('翻页按钮状态:', document.querySelectorAll('.page-btn').length);