原文地址：https://blog.mmoe.work/alist-js-beautification/

alist美化

alist作为一个优秀的开源网盘程序，其用户基数是非常庞大的，所以这其中也就不乏有我这样的美化小王子（无敌大闲逼）的存在。因此，现在网上已经有了很多文章贴出了alist自定义头部与内容的美化代码，例如Alist V3 美化教程(4)​（这哥们貌似是alist美化的鼻祖），这种美化的代码大概如下所示：

提出问题

这种美化方式有一个明显的问题。alist作为一个webapp，页面的内容是动态生成的，并且不像静态网站，其元素名是不保证其相对稳定的。因此，使用这种方式美化alist的代码也是不可靠的，可能在alist更新之后，类名发生更改，部分美化就失效了。更何况，alist每次更新都会带来一些新的特性，虽然其大部分都是功能性的，但有时也会有一些新的前段元素与样式变动出现，因此，使用这种方式美化alist的代码需要不断地维护。

我随便找了个一个月前的美化代码（来自https://blog.anxy.top/posts/5.html），发现其已经过时。

应有效果：

应有效果

实际效果：

实际效果

显然，地址栏、功能栏与展示方式切换按钮的美化都失效了。事实上，原版截图的搜索栏美化应该已经失效了。

解决问题

我反正是懒得每次都去维护这些代码，所以我就想到了个一劳永逸的美化方案。这个方案的核心思想是：关注alist元素中的一些特征，使用javascript捕获它们，然后动态替换样式。这样一来，就不需要担心alist更新后，类名发生变化导致美化失效的问题了。找了一圈，发现没有已有的方案，遂决定自己动手撸一个。

alist js美化方案

代码我已贴在了我的github存储库https://github.com/adogecheems/alist-beautification上，你也可以直接在下方查看。

代码

注意！要想使用这段代码，你必须将代码最尾部的themeColor变量设置为你alist的主题色（如果没有设置主题色，可以不填），而且需要写成rgb(r, g, b)的标准格式。

推荐一起使用我的自定义头部代码，这样效果更佳（不然没有背景）。

自定义内容

不过好像放自定义头部也能跑…

自定义头部

建议一起使用，效果更佳。

从cdn引入

如果你只需要美化alist背景色，而不需要自定义头部，可以直接从CDN引入这段代码（如果有自定义主题色，记得fork一份，填入主题色后，再改成你自己的仓库）（itdog了一下速度竟出奇的可观）：

代码说明

这段代码提供了一个Beautifier类，用于自动修改alist的背景色，其创建的实例会监听DOM的变化，并在页面变动时自动对有背景色的元素应用样式（当然是有选择的）。在控制台中，你可以通过window.beautifier访问这个实例。

它暴露了以下方法：

• observe(): 开始监听页面变化并应用美化

• disconnect(): 停止监听页面变化

• undo(): 恢复元素背景色到默认状态

还有一个愚蠢到有点无敌的修复机制，用于修复登录页面的背景色。

这些方法工作的效果（gif动图去原文看）：

工作效果

效果

使用这段代码后，你的alist元素将会有一个统一的背景色。并且在alist版本更新之后，美化器也会工作得相当良好。

不说了上图：

实际效果

最后

如果你有任何问题与建议，欢迎在评论区与Github issues中提出（去github给我点一个Star是再好不过的了）。希望这个美化方案能给你一个良好而统一的视觉体验，如要转载，也请希望务必注明出处。