萌化FileBrowser

随着FileBrowser的版本逐渐迭代到2.57.1，我发现我当初写的版本不少地方效果已经失效，于是我打算优化自定义的样式表代码来适配新版的FileBrowser。
因为跨的版本比较大，改动也是比较大的，甚至这个个性化自定义配置都有不小的改变。于是我打算重新彻底优化一下。
果然，事情总是动态发展的，上一版我调教的终极美化，这次要进行修补更新了。

文件目录结构说明

新版的filebrowser页面风格定制化style文件夹目录结构如下：

[chocola@Neko-X99 linux-amd64-filebrowser]$ tree 
.
├── CHANGELOG.md
├── filebrowser
├── filebrowser.db
├── LICENSE
├── README.md
└── style
    ├── custom.css
    ├── img
    │   ├── background.jpg
    │   ├── icons
    │   │   ├── android-chrome-192x192.png
    │   │   ├── android-chrome-512x512.png
    │   │   ├── apple-touch-icon.png
    │   │   ├── favicon.ico
    │   │   └── favicon.svg
    │   ├── JCuYuan.woff2
    │   ├── login.jpg
    │   └── logo.svg
    ├── index.html
    └── manifest.json

4 directories, 17 files

filebrowser相比于之前的版本，主要是图标数量进行了简化。而我这次的改进，有以下几点：

  • 使用了woff2格式的字体，减少页面加载流量和等待时间
  • 增加了提示框样式设置
  • 为文件预览添加了毛玻璃背景效果
  • 为新增的数值条增加样式适配
  • 优化弹窗背景，增加毛玻璃效果
  • 为文本编辑器添加半透明背景效果
  • 为新增的文件邮件菜单添加主题样式
  • 优化登陆界面信息提示的样式

大概就这些吧，还有一些细枝末节的部分，我没有详细列出，有一些效果是因为代码改动牵一发动全身，修改反反复复搞了快一天，总之这个filebrowser主题改动不小。

效果展示

接下来我会用图片逐个展示修改后的效果。
登陆界面：
01.png
这个改动不算大，只是适配了一下新版的消息框。
文件页面：
02.png
适配了右键菜单的效果。
文件选择效果（这部分没变）：
03.png
下载弹窗背景毛玻璃模糊化：
04.png
新建文件操作也是同理：
05.png
优化后的文本编辑器样式：
06.png
优化后的图片预览效果：
07.png
对新的数字选择器进行样式适配：
08.png
优化信息提示框：
09.png
10.png

萌化方法

萌化方法并不困难，只需要下载我准备好的style.zip压缩包，解压到filebrowser的目录后应用自定义样式就可以了，前文也有目录树说明了，详细操作可以去看这篇文章：个性化Filebrowser界面，NAS也要Kawaii~~~!
唯一要注意的是需要下载FileBrowser的2.57.1版本，因为这版界面美化是针对这个版本写的。
对于custom.css，我已经在不少位置都做了注释，想自己按需修改的话看注释照着改也不难。