解锁B站个性化体验：Bilibili-Evolved组件系统全攻略

Bilibili-Evolved作为一款强大的哔哩哔哩增强脚本，通过组件化设计让用户轻松实现界面定制、广告屏蔽、视频下载等实用功能。本文将带你系统掌握组件系统的使用方法，从基础配置到高级定制，全面提升你的B站浏览体验。

为什么选择Bilibili-Evolved组件系统？

B站默认界面和功能往往无法满足所有用户的个性化需求。Bilibili-Evolved的组件化设计允许用户按需启用功能，通过简单配置即可实现界面美化、功能增强和效率提升。无论是普通用户还是开发者，掌握组件系统都能让你的B站体验更上一层楼。

核心价值：三大优势助力个性化体验

• 模块化设计：组件独立运行，按需启用，避免资源浪费
• 灵活配置：每个组件提供丰富选项，满足不同用户需求
• 持续扩展：活跃的开发者社区不断提供新组件和功能更新

组件系统基础概念解析 🧩

组件元数据：定义组件的"身份证"

每个组件通过defineComponentMetadata函数定义，包含名称、显示名称、标签、选项等核心信息。这一机制确保了组件的一致性和可管理性。

核心定义文件：src/components/define.ts

export const component = defineComponentMetadata({
  name: 'customNavbar',
  displayName: '自定义顶栏',
  tags: [componentsTags.style],
  enabledByDefault: true,
  options: {
    fixed: {
      defaultValue: true,
      displayName: '全局固定'
    }
  }
})

组件分类：六大类型满足不同需求

组件通过标签进行分类，主要包括：

• 视频：与视频播放相关的功能，如画质增强、倍速播放
• 样式：界面美化与自定义，如夜间模式、顶栏定制
• 动态：处理B站动态内容，如动态过滤、内容折叠
• 直播：直播相关增强功能，如弹幕管理、画质设置
• 工具：实用小工具集合，如下载助手、快捷操作
• 触摸：移动端触摸优化，如手势控制、触摸操作

完整标签定义：src/components/types.ts

组件设置面板使用指南 ⚙️

Bilibili-Evolved提供直观的图形化设置界面，让用户无需编写代码即可配置组件。通过设置面板，你可以轻松启用/禁用组件、调整参数和查看说明。

快速上手：设置面板核心功能

1. 组件搜索与筛选：使用左上角搜索框快速定位组件
2. 一键开关：组件右侧的开关可快速启用/禁用功能
3. 详细配置：点击组件名称打开详细设置面板
4. 分类浏览：左侧分类标签帮助你按功能类型查找组件

个性化配置实例：自定义顶栏

以"自定义顶栏"组件为例，其配置选项包括：

• 全局固定：保持顶栏在页面顶部
• 透明填充：设置顶栏透明效果
• 背景模糊：添加毛玻璃效果
• 投影：为顶栏添加阴影

这些选项可通过设置面板直观调整，实时预览效果。

组件管理完全指南 📦

组件安装与卸载流程

Bilibili-Evolved提供多种组件管理方式，满足不同场景需求：

三种安装方式：

1. 在线安装：从功能库选择组件，一键安装
2. 本地安装：上传本地开发的组件文件
3. 批量安装：粘贴多个组件链接，批量导入

卸载与更新：

• 已安装组件列表中找到需要操作的组件
• 点击右侧操作按钮进行卸载或更新
• 使用"隐藏内置组件"开关控制列表显示

组件冲突排查方案

当多个组件功能冲突时，可采用以下解决方案：

1. 调整加载顺序：在管理面板中拖拽组件调整优先级
2. 选择性禁用：暂时关闭冲突组件
3. 自定义配置：修改组件选项解决冲突点
4. 查看兼容性说明：组件详情页通常会标注已知冲突

侧边栏组件实战应用 🚀

侧边栏组件是Bilibili-Evolved的特色功能之一，提供丰富的快捷操作和功能入口。

侧边栏核心功能：

• 快速导航：一键访问首页、番剧、直播等主要板块
• 个人中心：快速访问收藏、历史、稍后再看
• 功能入口：直接打开设置面板、组件管理等功能
• 快捷操作：提供播放控制、画质切换等常用功能

高效使用技巧：

1. 自定义布局：通过设置调整侧边栏项目顺序
2. 隐藏冗余项：关闭不常用的功能入口
3. 快捷键呼出：设置自定义快捷键快速显示/隐藏侧边栏
4. 响应式适配：在不同设备上自动调整侧边栏样式

进阶探索：开发自己的组件 🔨

如果你有一定的开发经验，可以尝试开发自己的组件，扩展Bilibili-Evolved的功能。

开发环境搭建：

1. 克隆仓库：git clone https://gitcode.com/gh_mirrors/bi/Bilibili-Evolved
2. 安装依赖：pnpm install
3. 启动开发服务器：pnpm dev

组件开发步骤：

1. 在registry/lib/components/目录下创建新组件文件夹
2. 使用defineComponentMetadata定义组件元数据
3. 实现组件逻辑（JavaScript/TypeScript）
4. 创建样式文件（SCSS）
5. 添加配置界面（Vue组件）
6. 在本地测试并提交PR

总结与行动号召

通过本文介绍的Bilibili-Evolved组件系统，你已经掌握了从基础配置到高级定制的全部知识。无论是简单的界面调整还是复杂的功能扩展，组件系统都能满足你的个性化需求。

现在就开始行动：

1. 安装Bilibili-Evolved脚本
2. 探索设置面板中的各类组件
3. 根据个人需求配置属于你的B站界面
4. 尝试开发自己的第一个组件，为社区贡献力量

官方文档：docs/official.md 组件开发指南：registry/lib/components/

立即开始探索，打造专属的B站增强体验吧！