3步打造你的专属B站:BewlyBewly个性化改造指南
3步打造你的专属B站BewlyBewly个性化改造指南【免费下载链接】BewlyBewlyJust make a few small changes to your Bilibili homepage. (English | 简体中文 | 正體中文 | 廣東話)项目地址: https://gitcode.com/gh_mirrors/be/BewlyBewly你是否对Bilibili千篇一律的界面感到审美疲劳是否希望在浏览视频时获得更流畅、更个性化的体验BewlyBewly正是为你量身打造的浏览器扩展它通过重新设计B站界面、添加实用功能和个性化设置让你能够完全按照自己的喜好打造专属的B站浏览环境。为什么你需要BewlyBewly在当今内容爆炸的时代用户体验往往被忽略。B站作为国内最大的视频社区之一虽然内容丰富但其原生界面在视觉效果和交互体验上仍有提升空间。BewlyBewly的出现正是为了解决这些问题视觉疲劳长时间面对相同的界面设计容易产生审美疲劳功能局限原生B站缺少个性化定制选项效率低下视频浏览和内容发现流程不够高效BewlyBewly从YouTube、Vision OS和iOS等优秀产品中汲取灵感为你带来全新的B站体验。第一步快速安装与配置在线安装最简单的方式虽然BewlyBewly支持多种浏览器但我们强烈推荐通过Chrome应用商店安装。这不仅安装过程简单还能确保你第一时间获得最新的功能更新和安全修复。如果你使用的是Edge浏览器同样可以通过Chrome应用商店安装因为Chrome商店的审核速度更快更新也更及时。本地安装开发者或离线用户如果你无法访问Chrome应用商店或者希望使用最新的开发版本本地安装是个不错的选择访问项目仓库 https://gitcode.com/gh_mirrors/be/BewlyBewly 下载最新的extension.zip文件解压缩到本地文件夹在浏览器地址栏输入chrome://extensions/Chrome或edge://extensions/Edge开启右上角的开发者模式点击加载已解压的扩展程序选择刚才解压的文件夹权限说明安装时浏览器可能会提示可以读取您的浏览历史。这是因为扩展使用了tabs权限来识别B站页面实际上并不会收集你的任何浏览数据。项目完全开源所有代码都是透明可查的。第二步核心功能深度体验视觉革命重新设计的界面BewlyBewly最直观的变化就是界面的全面升级。它采用了现代化的设计语言让B站焕然一新视频卡片优化圆角设计、阴影效果、悬停动画让视频展示更加生动顶部导航栏重构重新组织的功能入口提升操作效率深色模式支持不仅支持浅色/深色主题还能根据系统设置自动切换效率提升智能化功能除了外观改变BewlyBewly还引入了多个提升效率的功能视频预览功能鼠标悬停在视频卡片上时会自动播放视频片段让你快速了解内容质量。这个功能在视频卡片组件中实现支持多种视频类型。横向滚动浏览对于频道推荐和热门内容支持横向滑动浏览大大提升了内容发现的效率。广告智能过滤自动识别并过滤首页和搜索结果中的广告内容让你的浏览体验更加纯粹。第三步个性化定制完全指南主题与颜色定制BewlyBewly提供了丰富的个性化选项让你能够打造独一无二的B站界面。主题色选择在外观设置面板中你可以从17种精心挑选的预设颜色中选择或者使用自定义色值。每种颜色都经过精心调校确保在不同主题下都有良好的视觉效果。!-- 主题色选择器实现代码 -- div v-forcolor in themeColorOptions :keycolor w-20px h-20px rounded-8 cursor-pointer transition :style{ background: color, transform: color settings.themeColor ? scale(1.3) : scale(1), border: color settings.themeColor ? 2px solid white : 2px solid transparent } clickchangeThemeColor(color) /背景壁纸设置除了主题色你还可以上传自己喜欢的图片作为背景壁纸。系统会自动为壁纸添加遮罩层确保文字内容清晰可读。功能模块自由组合在通用设置面板中你可以根据自己的需求启用或禁用特定功能字体自定义设置全局字体和弹幕字体满足个性化阅读需求链接打开方式选择视频卡片点击后的行为当前标签、新标签或抽屉式打开性能优化对于配置较低的设备可以关闭毛玻璃效果以提升流畅度高级自定义CSS注入对于有前端开发经验的用户BewlyBewly还提供了CSS注入功能。你可以编写自定义样式代码实现更深度的界面定制/* 隐藏首页推荐区域 */ .home-feed { display: none !important; } /* 修改视频标题样式 */ .video-card__title { color: #6366f1 !important; font-weight: 600 !important; } /* 自定义卡片阴影 */ .video-card { box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1) !important; }常见问题与解决方案功能冲突处理如果你同时使用其他B站增强插件如Bilibili-Evolved可能会遇到功能冲突。建议通过以下方式解决在BewlyBewly设置中关闭与冲突插件相同的功能优先使用BewlyBewly的自定义CSS功能实现样式修改如果问题持续可以暂时禁用其中一个插件进行测试数据备份与恢复BewlyBewly的所有设置都存储在浏览器本地。当你更换设备或清除浏览器数据时可以通过以下方式备份和恢复设置定期使用设置中的导出配置功能备份当前设置将配置文件保存在安全的位置在新设备上安装BewlyBewly后使用导入配置功能恢复设置性能优化建议如果你在使用过程中遇到性能问题可以尝试以下优化关闭视频预览功能对性能影响较大禁用毛玻璃效果减少同时启用的功能模块数量定期清理浏览器缓存打造你的专属B站体验BewlyBewly不仅仅是一个美化工具它更是你个性化B站体验的起点。通过合理配置各项功能你可以提升浏览效率通过视频预览和横向滚动更快找到感兴趣的内容保护眼睛健康深色模式和自定义主题色减少视觉疲劳展现个性风格通过自定义CSS和壁纸打造独一无二的界面优化操作流程重新组织的功能入口让常用操作更加便捷无论你是追求效率的实用主义者还是注重美学的视觉设计师BewlyBewly都能满足你的需求。它让B站从千篇一律的平台变成了真正属于你的个性化空间。现在就开始你的B站改造之旅吧通过简单的安装和配置你就能拥有一个更加美观、高效、个性化的Bilibili体验。如果在使用过程中有任何问题或建议欢迎查阅项目文档或参与社区讨论。项目完整源码和详细文档可在项目仓库中查看欢迎有开发经验的朋友参与贡献共同打造更好的B站体验。【免费下载链接】BewlyBewlyJust make a few small changes to your Bilibili homepage. (English | 简体中文 | 正體中文 | 廣東話)项目地址: https://gitcode.com/gh_mirrors/be/BewlyBewly创作声明:本文部分内容由AI辅助生成(AIGC),仅供参考