news 2026/6/12 12:56:10

三分钟实现B站经典界面回归:Bilibili-Old项目深度解析

作者头像

张小明

前端开发工程师

1.2k 24
文章封面图
三分钟实现B站经典界面回归:Bilibili-Old项目深度解析

三分钟实现B站经典界面回归:Bilibili-Old项目深度解析

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

Bilibili-Old是一个开源项目,旨在帮助用户恢复B站旧版界面,解决新版界面带来的操作不适和性能问题。该项目提供了浏览器扩展和用户脚本两种实现方式,通过智能的页面重构技术,让用户能够重新体验经典B站的操作界面和功能布局。

两种安装途径的选择与配置

你可以根据自己的技术背景和使用习惯选择最适合的安装方式。对于大多数用户来说,浏览器扩展版本提供了最直接的安装体验,而用户脚本版本则提供了更高的自定义灵活性。

浏览器扩展的简易部署流程

浏览器扩展方案适合希望快速上手的用户,整个过程不需要编写任何代码。首先通过命令git clone https://gitcode.com/gh_mirrors/bi/Bilibili-Old将项目文件下载到本地,然后在Chrome浏览器的扩展管理页面开启开发者模式,选择"加载已解压的扩展程序",定位到项目中的chrome文件夹即可完成安装。

这种方式的优势在于安装后无需额外配置,扩展会自动检测B站页面并应用旧版界面。你可以在扩展图标处找到设置选项,调整如播放器样式、弹幕显示等个性化参数。

用户脚本的灵活控制方案

如果你已经安装了Tampermonkey或类似的用户脚本管理器,那么脚本版本可能更适合你。这种方式允许更精细的控制,比如可以设置脚本只在特定域名下运行,或者根据时间表自动启用。

脚本的核心文件位于tampermonkey/main.user.js,导入后你可以通过脚本管理器的控制面板调整各种参数。这种方式特别适合那些需要对不同网站采用不同策略的高级用户。

核心功能模块的工作原理

Bilibili-Old的核心逻辑主要分布在src/core目录下,通过多个模块协同工作来实现旧版界面的恢复。这些模块采用现代前端技术,在保持兼容性的同时提供稳定的用户体验。

播放器系统的重构机制

播放器恢复模块位于src/core/player.ts,它通过DOM操作和样式注入的方式,将新版播放器转换为经典的小电视样式。这个转换过程不仅改变了视觉外观,还恢复了旧版播放器的交互逻辑,包括经典的进度条设计、音量控制方式和倍速调节界面。

这张图片展示了项目恢复的经典小电视加载动画,这个90x90像素的GIF动画采用了复古的电视图标设计,内部包含一个拟人化的卡通脸表情变化。在视频加载过程中,这个动画会作为视觉反馈提示用户内容正在加载,其简洁的线条和趣味性的设计体现了B站早期的视觉语言风格。

弹幕系统的兼容性处理

弹幕处理模块src/core/danmaku.ts负责处理新旧弹幕系统的兼容问题。由于B站已经将弹幕格式从XML迁移到protobuf,该模块实现了两种格式的解析和显示支持。此外,它还提供了弹幕密度控制、历史弹幕加载以及互动弹幕的兼容处理。

在实际使用中,你可能会注意到某些高级弹幕或代码弹幕的显示效果有所差异,这是由于新旧系统之间的技术差异造成的。项目团队通过多种技术手段尽可能还原原始体验,但在极端情况下可能仍存在细微差别。

页面布局的智能适配

页面恢复系统覆盖了B站的主要页面类型,包括主页、视频页面、排行榜、稍后再看列表等。每个页面的恢复逻辑都针对该页面的特定结构进行了优化,确保在不同屏幕尺寸和设备上都能保持良好的显示效果。

  • 主页恢复:将新版的信息流布局转换回传统的分类导航结构
  • 视频页面:恢复av/BV号的传统页面布局和交互方式
  • 排行榜系统:重新启用按热度排序的全站视频榜单
  • 内容发现:优化搜索页面和分类页面的显示逻辑

实际使用中的配置技巧

虽然Bilibili-Old在安装后即可使用,但通过一些简单的配置调整,你可以获得更加个性化的体验。这些配置主要涉及播放器行为、界面元素和功能开关等方面。

播放器参数的自定义设置

在扩展设置中,你可以调整多个播放器相关参数。例如,可以设置默认播放质量、自动宽屏模式、记忆播放速率等功能。这些设置会通过localStorage在浏览器中持久化,确保每次访问时都能保持你的偏好。

如果你使用用户脚本版本,可以在脚本开头找到配置区域,直接修改对应的变量值。这种方式虽然需要一些技术知识,但提供了更细粒度的控制能力。

界面元素的显示控制

并非所有用户都需要完全恢复旧版界面的每一个细节。Bilibili-Old允许你选择性地启用或禁用某些界面元素的恢复。比如,你可以只恢复播放器而保持新版顶栏,或者只恢复特定的页面类型。

这种模块化的设计让你可以根据自己的需求定制恢复范围,在保持核心功能的同时,适当保留一些新版界面的有用特性。

常见场景下的问题解决

在实际使用过程中,你可能会遇到一些特定情况下的兼容性问题。了解这些问题的成因和解决方法,可以帮助你更好地使用这个工具。

页面加载时的短暂闪烁

由于技术限制,在恢复旧版页面前,新版页面可能会短暂显示。这种现象通常持续不到一秒,对使用体验影响有限。如果闪烁时间过长,可以尝试清除浏览器缓存或使用强制刷新(Ctrl+Shift+R)来重新加载页面。

功能限制的应对策略

某些B站功能,如充电支付、B币消费等,在旧版界面中可能无法完全正常工作。这是因为这些功能依赖新版的前端架构和API接口。建议在使用这些功能时临时切换到新版页面,完成操作后再返回旧版界面。

扩展与其他工具的兼容性

如果你安装了其他B站相关的浏览器扩展或用户脚本,可能会与Bilibili-Old产生冲突。这种情况下,建议暂时禁用其他扩展进行测试,或者调整扩展的加载顺序。大多数冲突都可以通过简单的排查找到解决方案。

技术实现的核心原理

Bilibili-Old的技术实现基于现代Web扩展技术和用户脚本机制,通过拦截和修改页面请求、注入自定义样式和脚本等方式实现界面恢复。这种方法的优势在于不需要修改B站服务器端代码,完全在客户端完成所有转换工作。

项目的架构设计考虑了可维护性和扩展性,主要功能模块都进行了良好的封装。如果你对技术细节感兴趣,可以查看src目录下的源代码,了解各个模块的具体实现方式。

长期维护与版本适配

B站的前端界面会定期更新,这可能影响Bilibili-Old的兼容性。项目维护者会密切关注B站的变更,并及时发布更新来保持兼容性。你可以通过定期检查项目更新或关注相关社区讨论来获取最新的兼容性信息。

对于大多数用户来说,建议启用浏览器的自动更新功能,或者定期手动检查扩展更新。用户脚本版本通常可以通过脚本管理器的更新检查功能获取最新版本。

通过Bilibili-Old项目,你可以在享受B站丰富内容的同时,保留熟悉的操作界面和交互方式。无论是出于怀旧情感还是实用考虑,这个工具都为用户提供了一个平衡新旧体验的解决方案。

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

创作声明:本文部分内容由AI辅助生成(AIGC),仅供参考

版权声明: 本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若内容造成侵权/违法违规/事实不符,请联系邮箱:809451989@qq.com进行投诉反馈,一经查实,立即删除!
网站建设 2026/6/12 12:53:58

Windows右键菜单管理终极指南:ContextMenuManager深度解析与实战应用

Windows右键菜单管理终极指南:ContextMenuManager深度解析与实战应用 【免费下载链接】ContextMenuManager 🖱️ 纯粹的Windows右键菜单管理程序 项目地址: https://gitcode.com/gh_mirrors/co/ContextMenuManager Windows操作系统作为全球使用最…

作者头像 李华
网站建设 2026/6/12 12:53:27

手写文本分类流水线:Bag of Words与TF-IDF实战指南

1. 项目概述:从零手写一个可复现的文本分类流水线我带过不少刚转行做数据科学的新手,也帮同事调试过几十个NLP小项目。每次看到有人卡在“为什么模型准确率只有50%”或者“TF-IDF向量维度爆炸到20万维却效果更差”这种问题上,我就知道——不是…

作者头像 李华
网站建设 2026/6/12 12:52:54

SpringMVC 入门到实战 文件上传 75-77

SpringMVC 入门到实战 文件上传 75-77 一、参考资料 【SpringMVC教程,一套快速上手spring mvc,springmvc入门到实战】 https://www.bilibili.com/video/BV1Ry4y1574R/?p76&share_sourcecopy_web&vd_source855891859b2dc554eace9de3f28b4528 二、…

作者头像 李华
网站建设 2026/6/12 12:52:32

2026实测避坑:这3款热门降AI工具哪些好用?内含3个免费指令直接抄

为了给文章降AI,从自己手动修改,到各种免费降AI率工具,相信大家都用过很多。其实很多时候是咱们自己写的内容用词太规范被检测出AI率高,这时候选对工具就显得尤为重要。更坑的是,市面上很多号称能降低AI的工具&#xf…

作者头像 李华
网站建设 2026/6/12 12:44:03

嵌入式低功耗设计:VLLS0模式原理、实现与避坑指南

1. 项目概述:为什么VLLS0是电池供电设备的“王牌”在嵌入式开发,尤其是电池供电的物联网(IoT)或可穿戴设备领域,功耗管理从来都不是一个“锦上添花”的选项,而是决定产品成败的生死线。我们常常会看到这样的…

作者头像 李华