5分钟解锁B站经典界面:Bilibili-Old项目全面解析
【免费下载链接】Bilibili-Old恢复旧版Bilibili页面,为了那些念旧的人。项目地址: https://gitcode.com/gh_mirrors/bi/Bilibili-Old
你是否怀念B站那个简洁直观的旧版界面?是否对新版页面的复杂操作感到不适应?Bilibili-Old项目正是为这些怀旧用户和技术爱好者打造的完美解决方案,通过浏览器扩展和用户脚本两种方式,让你重新体验经典B站的操作界面和功能布局。🎯
🤔 为什么我们需要旧版B站界面?
B站近年来进行了多次界面改版,虽然带来了更多功能,但也让许多老用户感到不适。新版界面操作复杂、加载缓慢,而经典的小电视播放器、直观的导航栏、简洁的评论区都已成为回忆。更关键的是,某些实用功能在新版中被移除或隐藏,让日常使用变得不那么便捷。
关键时间节点:从2019年12月开始,B站逐步弃用旧版av号、稍后再看、排行榜等核心功能,到2022年彻底告别旧版界面。这段历史记录在项目的B站更新摘记中,见证了经典界面的消失过程。
新旧界面对比分析
| 功能模块 | 旧版界面优势 | 新版界面变化 |
|---|---|---|
| 播放器设计 | 小电视经典样式,简洁直观 | 现代扁平化设计,功能繁杂 |
| 导航结构 | 分类清晰,快速跳转 | 信息流为主,导航隐藏 |
| 弹幕系统 | XML格式,兼容性好 | Protobuf格式,部分弹幕丢失 |
| 页面加载 | 快速响应,资源占用低 | 动画效果多,加载缓慢 |
| 操作习惯 | 符合老用户肌肉记忆 | 需要重新学习 |
🚀 两种安装方式:哪个更适合你?
方案一:浏览器扩展(推荐新手)
浏览器扩展方案提供了最直接的用户体验,安装后即可自动工作。你只需要几个简单步骤:
- 克隆项目仓库:
git clone https://gitcode.com/gh_mirrors/bi/Bilibili-Old - 打开Chrome扩展管理页面,启用"开发者模式"
- 点击"加载已解压的扩展程序",选择项目中的
chrome文件夹
✨ 扩展版优势:
- 自动检测B站页面并应用旧版界面
- 无需额外配置,开箱即用
- 通过扩展图标可快速调整设置
- 支持Manifest V3,兼容最新Chrome
方案二:用户脚本(适合高级用户)
如果你已经使用Tampermonkey等脚本管理器,用户脚本版本提供了更高的自定义灵活性:
- 安装Tampermonkey脚本管理器
- 导入
tampermonkey/main.user.js脚本文件 - 在脚本管理器中调整运行规则和参数
🎯 脚本版特色:
- 可设置特定域名运行规则
- 支持定时启用/禁用
- 更精细的功能控制
- 便于与其他脚本协同工作
🏗️ 核心技术架构解析
Bilibili-Old项目采用了模块化设计,主要功能分布在src/core目录下,通过智能的页面重构技术实现旧版界面的完美恢复。
核心模块工作流程
用户访问B站页面 → 内容脚本注入 → 检测页面类型 → 加载对应恢复模块 → 重构DOM结构 → 注入自定义样式 → 恢复旧版功能关键文件路径说明
- 播放器恢复:
src/core/player.ts- 负责将新版播放器转换为经典小电视样式 - 弹幕处理:
src/core/danmaku.ts- 兼容新旧弹幕格式,支持protobuf解析 - 页面适配:
src/page/目录 - 针对不同页面类型的专门恢复逻辑 - 网络请求:
src/io/目录 - 处理B站API请求和数据转换
这张经典的90x90像素小电视加载动画,采用黑白极简风格,电视机图标内的表情符号为加载过程增添了趣味性,完美再现了B站早期的视觉语言风格。
🔧 你可能不知道的5个小技巧
1. 智能页面检测机制
项目会根据URL自动识别页面类型,并加载对应的恢复模块。这意味着你无需手动切换,系统会自动为视频页、主页、排行榜等不同页面应用最适合的旧版布局。
2. 弹幕格式双兼容
由于B站已将弹幕格式从XML迁移到protobuf,项目实现了两种格式的智能解析。你可以在设置中选择优先使用哪种格式,或者让系统自动选择最优方案。
3. 播放器编码切换
支持AVC、HEVC和AV1多种视频编码的自动切换,确保在不同网络环境下都能获得最佳播放体验。这在src/core/player.ts中通过智能检测算法实现。
4. 区域限制解除
通过替换UPOS服务器和智能路由,项目可以解除港澳台、APP专属等区域播放限制,让你观看原本无法访问的内容。
5. 自动化操作预设
在播放器设置中,你可以预设一系列自动化操作:自动展开弹幕列表、滚动到播放器位置、开启宽屏模式、关闭弹幕、自动播放等,大大提升使用效率。
⚡ 快速排查指南
遇到问题时,可以按照以下步骤快速排查:
问题:页面加载时出现短暂闪烁
原因:新版页面在恢复前短暂显示解决方案:清除浏览器缓存后强制刷新(Ctrl+Shift+R)
问题:某些功能无法正常使用
原因:B站API接口变更或功能维护解决方案:临时切换到新版页面完成操作,或检查项目更新
问题:扩展与其他脚本冲突
原因:多个B站相关扩展同时运行解决方案:暂时禁用其他扩展测试,或调整扩展加载顺序
问题:弹幕显示异常
原因:弹幕格式解析问题解决方案:在设置中切换弹幕格式,或启用本地弹幕加载功能
🎨 进阶定制化建议
个性化样式调整
项目支持自定义CSS注入,你可以在chrome/player/video.css中修改播放器样式,或在src/css/目录下调整各个页面的视觉表现。
功能模块选择性启用
如果你只需要部分旧版功能,可以通过修改src/core/中的模块导入逻辑,选择性启用播放器恢复、页面布局重构、弹幕系统等特定功能。
API接口自定义
高级用户可以在src/io/目录下修改API请求逻辑,替换为第三方接口或自定义数据处理流程,实现更个性化的功能扩展。
🔮 未来发展与维护
Bilibili-Old项目采用活跃的维护策略,密切关注B站前端更新。当B站进行重大改版时,项目团队会及时发布兼容性更新,确保旧版界面的持续可用性。
维护策略包括:
- 定期检查B站前端变更
- 及时适配新的API接口
- 修复已知的兼容性问题
- 社区驱动的功能改进
💡 实用建议与最佳实践
- 定期更新:建议启用扩展的自动更新,或定期检查项目更新
- 备份配置:导出你的个性化设置,便于重装时快速恢复
- 社区参与:遇到问题或有好想法时,可以参与项目讨论
- 适度怀旧:虽然旧版界面经典,但新版的一些实用功能也值得尝试
通过Bilibili-Old项目,你不仅能够重温经典的操作体验,还能深入了解现代Web扩展技术和页面重构技术。这个项目证明了,在技术快速迭代的时代,经典的用户体验依然具有不可替代的价值。✨
无论你是B站的老用户,还是对前端技术感兴趣的学习者,Bilibili-Old都值得你探索和尝试。现在就开始你的怀旧之旅吧!
【免费下载链接】Bilibili-Old恢复旧版Bilibili页面,为了那些念旧的人。项目地址: https://gitcode.com/gh_mirrors/bi/Bilibili-Old
创作声明:本文部分内容由AI辅助生成(AIGC),仅供参考