小菜の菜盘

为什么会干这事

Alist 是个好东西，功能多、开源、支持各种网盘挂载。但默认界面嘛……不能说丑，只能说功能导向。用起来没啥毛病，但少点质感。

正好手头的博客刚改完 Apple Music 风格的音乐播放器，顺手把 Alist 也拉来整容。

目标明确：蓝白配色、毛玻璃卡片、大圆角、柔和的阴影和悬停动效——一眼 Apple Music。

第一回合：API 碰壁

Alist 的管理 API /api/admin/setting/put 可以改主题色和自定义 CSS，看起来很完美。

但实际上——登录后拿 token，调 API，返回的不是 JSON，是完整的 SPA HTML 页面。

试了 Bearer token、cookie session、curl、PowerShell 各种姿势，全挂。API 在 token 过期后不会报 401 JSON 错误，而是默默地给你返回首页 HTML，然后前端自己跳走。第一次遇到这种坑。

那好，API 走不通，直接上数据库。

第二回合：直写 SQLite

Alist 的配置存在 SQLite 数据库里，x_setting_items 表，键值对结构。

关键字段：

main_color —— 主色调，改成 #007AFF（苹果蓝）
customize_head —— 写在 HTML <head> 里的自定义内容，已有的内容（字体、背景图、看板娘、暗色模式样式等）有 1600 多字符

本来想用 sqlite3.exe 直接 UPDATE，结果 CSS 内容里有单引号，跟 SQL 字符串的单引号打架。解决方案：临时写个 Python 脚本，用参数化查询写入。

import sqlite3
conn = sqlite3.connect('data.db')
c = conn.cursor()
new_css = existing_1609_chars + apple_music_css_4300_chars
c.execute("UPDATE x_setting_items SET value=? WHERE key='customize_head'", (new_css,))
c.execute("UPDATE x_setting_items SET value='#007AFF' WHERE key='main_color'")
conn.commit()

重启 Alist，登录一看——蓝色主题 #007AFF 生效，Apple Music 风格的 CSS 也挂在 <head> 里了。舒坦。

苹果风的 CSS 都改了啥

项目	原来	现在
主色	`#1890ff`（普通蓝）	`#007AFF`（苹果蓝）
文件列表	方块卡片	毛玻璃圆角卡片 12px
顶栏	纯色	毛玻璃模糊 30px
弹窗/菜单	纯色方角	毛玻璃圆角 12-16px
遮罩	无模糊	毛玻璃 4px
悬停效果	无	轻微上移 + 阴影增强
图标色	跟随主题	苹果蓝统一着色

最核心的改动就是全局毛玻璃化：backdrop-filter: blur() + 半透明白/黑底，替代原来的纯色背景。这个做法让背景图始终能透出来，界面一下就"软"了。

一个小插曲：文件打不开了

改完 CSS 之后用户说能看到文件列表，但点开后是 404。

查了一下：Alist 前端 SPA 的 base_path 是 /，所以生成的下载链接是 /p/ftp/xxx。但我的 Nginx 反代配置里，/alist/ 路由到了 Alist，/ 兜底路由到了 Next.js 博客。前端生成 /p/ftp/xxx 这种链接，Nginx 直接送进了 Next.js 的 404 页面。

修法：在 Nginx 配置里加 location /p/ 和 location /d/，先于 location / 匹配，转发到 Alist：

location /p/ {
    proxy_pass http://127.0.0.1:524;
}
location /d/ {
    proxy_pass http://127.0.0.1:524;
}

搞定了。现在点击文件能正常下载。

写在最后

Alist 是个硬核网盘工具，但它那个"改配置全靠 API 或者 SQLite"的姿势，确实把门槛拉高了不是一点点。好处是——只要不怕折腾，什么都能改。

如果你也是 Alist 用户，不满足于默认的外观，不妨也尝试直接改数据库来定制。前提是做好备份，改之前 copy 一份 data.db。

写于 2026 年 6 月 9 日