当前位置：首页 > news >正文

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

news 2026/7/4 12:39:06

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站真正成为符合你个人习惯的内容平台。

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

核心功能清单

功能名称	技术实现路径	适用场景
主题切换系统	`src/styles/adaptedStyles/`	长时间浏览需要护眼模式
界面布局重构	`src/components/TopBar/`	追求简洁高效的浏览体验
动态视觉效果	`src/composables/useDark.ts`	个性化展示需求强烈的用户

配置实操指南

🔧主题基础配置

克隆项目代码库：git clone https://gitcode.com/gh_mirrors/be/BewlyBewly
进入样式配置目录：cd src/styles/adaptedStyles/

打开variables.scss文件，修改主色调变量：

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

📌高级视觉定制

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

💡避坑指南

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

效果对比展示

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

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

核心功能清单

功能名称	技术实现路径	适用场景
关键词过滤	`assets/rules.json`	屏蔽特定类型内容
内容权重调整	`src/models/video/forYou.ts`	优化推荐精准度
历史记录分析	`src/models/history/history.ts`	个性化内容排序

配置实操指南

🔧基础过滤规则设置

打开配置文件：assets/rules.json

添加关键词过滤规则：

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

📌高级筛选配置

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

💡避坑指南

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

效果对比展示

配置前	配置后
算法主导的混合内容流	基于个人偏好的精准推荐
包含大量不感兴趣内容	过滤低质量和无关内容
固定排序方式	动态调整的内容优先级

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

核心功能清单

功能名称	技术实现路径	适用场景
快捷操作面板	`src/components/Dock/Dock.vue`	高频功能快速访问
内容管理中心	`src/components/Settings/BewlyPages/`	统一管理收藏和历史
多窗口协同	`src/components/PipWindow.vue`	边看视频边浏览内容