BetterBlackBoard：bb美化工程

仓库放开头：aaaaa114514-1/BetterBlackBoard: A local beautification version of blackboard (bb) of ShanghaiTech University

早就看上科大的bb系统界面UI不顺眼了，番茄炒鸡蛋的配色实在是有点恶俗，每次打开界面查作业的时候心情都不好了。终于，在考完试之后，可算有空来边学边写，搞一个bb美化工程了。正好最近刚玩完、并安利朋友玩完了《魔法少女的魔女审判》，正在处于戒断期，于是在这里夹带了一点私货。

如何本地部署

1. 下载必要文件

先去仓库里下载并准备好以下关键文件与目录结构：

.
├─ code.js
├─ css
│  ├─ brand.css
│  └─ colorpalette.generated.modern.css
└─ images
   ├─ bblearn_2011_bg.png
   └─ pinpai.png

2. 修改资源路径

打开 code.js，找到 第 10～13 行 ：

// @resource     brand   file:///D:/desktop/BetterBlackBoard/css/brand.css
// @resource     palette file:///D:/desktop/BetterBlackBoard/css/colorpalette.generated.modern.css
// @resource     bodybg  file:///D:/desktop/BetterBlackBoard/images/bblearn_2011_bg.png
// @resource     pinpai file:///D:/desktop/BetterBlackBoard/images/pinpai.png

将其中的 file:///D:/desktop/BetterBlackBoard/...替换为你本地实际存放这些文件的路径。

3. 安装 Tampermonkey

在你的浏览器中安装 Tampermonkey 插件：

Microsoft Edge
从 Microsoft Edge Add-ons 安装 Tampermonkey
Google Chrome
从 Chrome Web Store 安装 Tampermonkey

4. 导入脚本

打开 Tampermonkey 管理界面
新建一个脚本
将 code.js 中的全部代码复制进去
按 Ctrl + s 保存脚本

5. 验证是否生效

访问 Blackboard（bb）页面，确认：

Tampermonkey 中脚本已启用
页面样式已发生变化

如果没有效果，请重点检查：

脚本是否启用
资源路径是否正确
浏览器是否有本地文件访问权限限制（浏览器拓展管理设置“允许用户脚本”“允许访问文件网址”需要勾选）

注：将bb本身主题改为默认，加载会更快更流畅！

自定义你的 BB 页面皮肤！

在已经成功部署并确认生效的前提下，可以进行自定义的美化。

替换顶部图片

可以直接替换images/pinpai.png为你自己的图片，显示在页面顶部位置。（这张这么长的图是我自己拼的，确实挺难找的）

2026.1.28更新：添加了新的主题选择，现在可以在images/skins里直接找喜欢的顶图，然后复制进images，并更名为pinpai.png就可以啦！

修改主题配色

主题主要由以下两个文件共同决定：

css/brand.css
css/colorpalette.generated.modern.css

同时修改这两个文件开头的配色变量，可以修改主题色。

2026.1.28更新：在两个文件代码头部添加了可选的主题色配色方案，注释/取消注释即可选择想要的主题配色。

这个项目仍在持续更新中，后续可能将加入更多功能与可定制选项。

aaaaa online