Bilibili-Old终极指南：如何一键恢复B站经典界面与翻页评论区功能

Bilibili-Old终极指南：如何一键恢复B站经典界面与翻页评论区功能

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

概述：重拾B站经典体验的完整解决方案

Bilibili-Old是一个开源项目，专门为那些怀念B站旧版界面的用户提供了一套完整的解决方案。这个项目通过浏览器扩展和用户脚本两种方式，让用户能够重新体验B站经典的界面设计、播放器布局和评论交互方式。在当前B站不断进行前端界面更新的背景下，这个项目成为了许多老用户保持习惯操作体验的重要工具。

📊 问题背景：B站前端更新的兼容性挑战

界面迭代带来的用户体验断层

近年来，Bilibili持续对其前端界面进行迭代更新，虽然这些更新带来了现代化的设计和新功能，但也导致了许多老用户习惯的界面元素和交互方式发生变化。其中最显著的变化包括：

• 评论系统重构：从传统的翻页评论系统改为瀑布流加载
• 播放器界面变更：小电视播放器被新播放器替代
• 页面布局调整：主页、视频页、个人中心等页面布局全面更新
• API接口升级：后端接口协议变更影响第三方工具兼容性

翻页评论区功能失效的技术分析

参考文章中提到的翻页评论区功能失效问题，其根本原因在于B站对评论系统进行了灰度测试更新。这种渐进式的前端架构调整导致了：

1. DOM结构变更：新版评论区采用了不同的HTML结构和CSS类名
2. 事件监听失效：原有的JavaScript事件绑定机制不再适用
3. API接口调整：评论数据获取接口的参数格式和返回结构发生变化
4. 样式冲突：新旧样式表之间的优先级和覆盖关系改变

🔧 技术架构：Bilibili-Old的核心实现原理

模块化设计架构

Bilibili-Old项目采用了高度模块化的设计，主要包含以下核心模块：

src/ ├── core/ # 核心功能模块 │ ├── comment.ts # 翻页评论区实现 │ ├── player.ts # 播放器恢复 │ ├── ui.ts # 用户界面控制 │ └── download.ts # 下载功能 ├── io/ # API接口封装 ├── page/ # 页面适配逻辑 └── utils/ # 工具函数库

关键技术实现

1. 评论系统恢复机制

项目通过拦截和重写B站的评论组件加载逻辑来实现翻页评论区的恢复：

// 捕获并替换原生的bbComment组件 Reflect.defineProperty(window, "bbComment", { configurable: true, set: v => { // 自定义评论组件逻辑 Feedback = v; this.bbCommentModify(); } });

2. 播放器兼容性处理

通过DOM操作和样式注入，项目恢复了经典的小电视播放器界面：

3. API请求拦截与重写

项目使用JSONP Hook技术拦截B站的API请求，并根据需要进行数据格式转换：

jsonpHook("api.bilibili.com/x/v2/reply?", undefined, (res, url) => { // 修复评论翻页数据 if (res.data?.page) { res.data.page.count = this.count; } return res; });

🛠️ 安装与配置指南

两种安装方式选择

Bilibili-Old提供了两种安装方式，用户可以根据自己的需求选择：

方式一：Tampermonkey用户脚本（推荐）

1. 安装脚本管理器：首先安装Tampermonkey浏览器扩展
2. 获取用户脚本：访问项目的GitCode仓库（https://gitcode.com/gh_mirrors/bi/Bilibili-Old）获取最新脚本
3. 启用脚本：在Tampermonkey管理面板中启用Bilibili-Old脚本

方式二：浏览器扩展安装

1. 下载扩展包：从项目仓库下载最新的Chrome扩展包
2. 加载解压扩展：在Chrome扩展管理页面开启"开发者模式"
3. 选择扩展目录：点击"加载已解压的扩展程序"选择解压后的目录

功能配置选项

安装完成后，用户可以通过页面右下角的齿轮图标进行功能配置：

• 界面恢复选项：选择需要恢复的旧版页面元素
• 评论系统设置：启用/禁用翻页评论区功能
• 播放器偏好：选择播放器版本和功能选项
• 下载设置：配置视频、弹幕下载参数

🔄 翻页评论区功能修复详解

问题定位与解决方案

针对参考文章中提到的翻页评论区失效问题，Bilibili-Old项目提供了以下修复方案：

1. DOM选择器适配更新

项目团队分析了B站新版评论区的HTML结构，更新了对应的CSS选择器：

// 新版评论容器选择器 const newCommentContainer = document.querySelector('.comment-container'); // 旧版评论分页元素选择器 const paginationElements = document.querySelectorAll('.comment-page-item');

2. 事件监听机制重构

重新绑定了评论加载和翻页相关的事件监听器：

// 重新绑定翻页按钮事件 paginationButtons.forEach(button => { button.addEventListener('click', this.handlePageChange); });

3. API接口兼容性处理

适配B站最新的评论API接口规范，确保数据格式兼容：

// 兼容新版API响应格式 const normalizeCommentData = (response) => { if (response.data?.replies) { return { comments: response.data.replies, pageInfo: response.data.page }; } return response; };

功能恢复效果展示

恢复后的翻页评论区具有以下特点：

• 传统分页导航：恢复经典的页码导航界面
• 评论楼层显示：完整显示评论楼层结构
• 快速跳转功能：支持按楼层快速跳转
• 排序选项保留：支持按热度、时间等排序方式

📱 支持的页面类型与功能

全面覆盖的页面恢复

Bilibili-Old支持恢复以下页面的旧版界面：

页面类型	恢复状态	主要功能
视频页面 (av/BV)	✅ 完整支持	旧版播放器、翻页评论、下载功能
番剧页面	✅ 完整支持	旧版番剧布局、分集列表
主页	✅ 完整支持	经典首页布局、个性化推荐
全站排行榜	✅ 完整支持	传统排行榜界面
稍后再看	✅ 完整支持	旧版稍后再看列表
搜索页面	✅ 完整支持	传统搜索结果布局
专栏文章	✅ 完整支持	旧版阅读体验

增强功能特性

除了界面恢复，项目还提供了多项增强功能：

1. 弹幕系统增强

   • Protobuf弹幕格式支持
   • 弹幕发送者反查功能
   • 互动弹幕兼容处理
   • 本地弹幕文件加载

2. 播放器功能扩展

   • 多编码格式切换（AVC/HEVC/AV1）
   • CC字幕支持
   • 分段进度条显示
   • 区域限制解除

3. 下载功能集成

   • 视频文件下载
   • 封面图片保存
   • 弹幕文件导出
   • 字幕文件提取

⚠️ 已知问题与注意事项

技术限制与兼容性问题

1. 页面闪烁现象：在恢复旧版页面前，新版页面可能短暂显示
2. 样式残留冲突：新版页面残留的脚本和样式可能影响恢复效果
3. 弹幕获取限制：原生旧版播放器无法获取90分钟后的弹幕
4. 支付功能失效：充电、B币支付等功能可能无法正常工作

使用建议

• 定期更新：建议定期检查项目更新，获取最新的兼容性修复
• 功能选择性启用：根据实际需求选择性启用功能模块
• 备份重要数据：重要操作前建议备份个人数据
• 关注项目动态：关注项目更新日志，了解最新兼容性状态

🚀 未来发展方向

技术优化计划

1. 性能优化：减少脚本对页面加载速度的影响
2. 模块化改进：进一步提高代码的可维护性和扩展性
3. 兼容性增强：持续跟进B站前端更新，保持功能兼容

功能扩展路线

• 更多页面支持：扩展支持更多B站页面类型
• 自定义主题：提供界面主题自定义功能
• 数据导出：增强个人数据导出能力
• 社区功能：考虑添加用户配置分享功能

📋 总结与使用建议

Bilibili-Old项目为那些怀念B站经典界面的用户提供了一个可靠的技术解决方案。通过精心的代码实现和持续的维护更新，项目成功应对了B站前端架构变更带来的兼容性挑战。

对于普通用户，建议：

1. 选择Tampermonkey脚本方式安装，便于更新维护
2. 根据个人使用习惯选择性启用功能模块
3. 定期检查项目更新，获取最新的兼容性修复
4. 遇到问题时查看项目文档或提交Issue反馈

对于开发者，项目提供了：

1. 完整的前端逆向工程示例
2. 实用的浏览器扩展开发参考
3. API接口分析和处理的最佳实践
4. 模块化JavaScript/TypeScript架构设计

通过这个项目，用户不仅能够恢复熟悉的操作界面，还能体验到经过优化的增强功能。无论是怀旧的老用户，还是对B站前端技术感兴趣的开发者，都能从这个项目中获得价值。

记住：技术的进步不应以牺牲用户体验为代价。Bilibili-Old项目正是这一理念的实践——在尊重平台发展的同时，为用户保留选择的自由。

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