3步解锁B站个性化新体验：BewlyBewly插件深度定制教程

3步解锁B站个性化新体验：BewlyBewly插件深度定制教程

【免费下载链接】BewlyBewlyImprove your Bilibili homepage by redesigning it, adding more features, and personalizing it to match your preferences.项目地址: https://gitcode.com/gh_mirrors/be/BewlyBewly

你是否也曾面临这样的困境：B站首页推荐永远猜不透你的喜好，千篇一律的界面让浏览变成负担，常用功能藏在层层菜单中难以触及？BewlyBewly插件为这些痛点提供了完美解决方案，通过基础定制、智能筛选和场景整合三大模块，让你轻松打造专属B站浏览体验。本教程将带你一步步完成从界面美化到功能优化的全流程配置，让B站真正成为符合你个人习惯的内容平台。

一、基础定制：打造视觉专属空间

核心功能清单

配置实操指南

🔧主题基础配置

1. 克隆项目代码库：git clone https://gitcode.com/gh_mirrors/be/BewlyBewly
2. 进入样式配置目录：cd src/styles/adaptedStyles/
3. 打开variables.scss文件，修改主色调变量：

   $primary-color: #4285f4; // 将默认蓝色改为你喜欢的颜色值 $secondary-color: #34a853; // 辅助色设置

📌高级视觉定制

1. 编辑forceDark.scss实现夜间模式增强
2. 修改transitionAndTransitionGroup.scss调整动画效果
3. 通过src/components/Settings/Appearance/Appearance.vue配置界面元素大小

💡避坑指南

⚠️ 颜色修改后需运行pnpm run build重新编译插件 ⚠️ 过度自定义可能导致部分页面布局错乱，建议先备份原始配置文件

效果对比展示

BewlyBewly插件提供的个性化主题展示，通过鲜明色彩和卡通元素打造独特视觉体验

二、智能筛选：让内容主动找你

核心功能清单

配置实操指南

🔧基础过滤规则设置

1. 打开配置文件：assets/rules.json
2. 添加关键词过滤规则：

   { "filterRules": [ {"type": "keyword", "value": "标题包含的关键词", "action": "hide"}, {"type": "up主", "value": "UP主ID", "action": "prioritize"} ] }

📌高级筛选配置

1. 调整内容权重：编辑src/models/video/ranking.ts中的算法参数
2. 配置推荐优先级：修改src/stores/mainStore.ts中的推荐逻辑
3. 设置自定义分类：在src/components/Settings/General/General.vue中添加分类标签

💡避坑指南

⚠️ 过度过滤可能导致内容过少，建议初始设置保持适度宽松 ⚠️ 规则修改后需在插件设置中手动刷新缓存才能生效

效果对比展示

三、场景整合：一站式功能中心

核心功能清单

配置实操指南

🔧基础功能整合

1. 配置快捷工具栏：编辑src/components/Dock/types.ts定义快捷功能
2. 设置默认打开页面：修改src/stores/settingsStore.ts中的默认路由
3. 自定义快捷键：在src/constants/globalEvents.ts中添加键盘事件监听

📌场景化功能配置

1. 学习模式：启用src/components/Settings/Compatibility/Compatibility.vue中的专注模式
2. 创作模式：配置src/components/TopBar/components/UploadPop.vue的上传快捷功能
3. 休闲模式：设置src/components/VideoCard/VideoCardContextMenu.vue的快捷操作项

💡避坑指南

⚠️ 过多的功能整合可能影响加载速度，建议只保留常用功能 ⚠️ 部分高级功能需要B站账号登录才能正常使用

效果对比展示

传统B站界面需要多次点击才能完成的操作，通过BewlyBewly插件的场景整合功能，可以在单一界面完成内容浏览、收藏管理、视频播放等多种操作，平均减少60%的操作步骤，大幅提升使用效率。

四、场景化解决方案

初级用户方案：轻量定制组合

推荐配置：基础主题切换 + 关键词过滤
适用人群：每日浏览时间少于1小时的用户
配置步骤：

1. 选择预设主题：src/styles/adaptedStyles/common/中选择一种主题
2. 设置基础过滤规则：在assets/rules.json添加3-5个主要过滤关键词
3. 启用简化界面：在设置中勾选"精简模式"

优势：资源占用少，配置简单，保持B站核心体验的同时优化视觉效果

进阶用户方案：效率提升组合

推荐配置：自定义主题 + 智能排序 + 快捷操作面板
适用人群：每日浏览1-3小时的活跃用户
配置步骤：

1. 自定义主题配色：修改variables.scss中的颜色变量
2. 配置内容权重：调整src/models/video/forYou.ts中的推荐算法参数
3. 设置快捷工具栏：在src/components/Dock/Dock.vue中添加常用功能

优势：平衡个性化和性能，通过智能排序减少信息筛选时间

专业用户方案：全功能定制组合

推荐配置：深度主题定制 + 高级筛选规则 + 多场景模式
适用人群：内容创作者、UP主或每日浏览超过3小时的重度用户
配置步骤：

1. 开发自定义主题：基于src/styles/adaptedStyles/创建全新主题文件
2. 配置复杂筛选规则：通过src/utils/filter.ts编写自定义过滤逻辑
3. 设置多场景模式：在src/stores/mainStore.ts中添加场景切换功能

优势：完全定制化的体验，满足专业用户的特殊需求

五、核心价值总结

BewlyBewly插件通过三大核心模块彻底改变了B站的使用体验：基础定制让你的界面不再千篇一律，智能筛选让内容推荐更加精准贴心，场景整合让操作流程化繁为简。无论你是偶尔浏览的轻度用户，还是深度沉浸的内容创作者，都能找到适合自己的配置方案。

通过本教程的步骤，你已经掌握了从界面美化到功能优化的全流程配置方法。记住，个性化不是一蹴而就的过程，建议从解决最迫切的痛点开始，逐步探索更多高级功能。现在就动手配置属于你的专属B站体验吧！

配置过程中遇到任何问题，可以查阅项目文档：docs/CONTRIBUTING.md，或参考源码中的示例配置：src/styles/adaptedStyles/。

【免费下载链接】BewlyBewlyImprove your Bilibili homepage by redesigning it, adding more features, and personalizing it to match your preferences.项目地址: https://gitcode.com/gh_mirrors/be/BewlyBewly