企业官网建设流程全解析

copyparty 换肤实战:3 个参数,给文件服务器界面换一套自己的颜色

【免费下载链接】copypartyPortable file server with accelerated resumable uploads, dedup, WebDAV, SFTP, FTP, TFTP, zeroconf, media indexer, thumbnails++ all in one file项目地址: https://gitcode.com/GitHub_Trending/co/copyparty

团队共用一台 copyparty 文件服务器时,所有人看到的都是同一套深色界面。用 3 个启动参数加一小段 CSS,你能把整个文件浏览页换成自己的配色,甚至套上官方仓库里的蓝屏主题。

30 秒看懂原理:主题就是一张变量表

copyparty 的文件浏览界面把颜色、字体、阴影全部写进了一组 CSS 变量,相当于在整套 UI 上挂了一排旋钮,变量定义集中在 copyparty/web/browser.css。所谓"主题",本质就是把这些变量批量改成另一组值的预设表。你要做的只有两件事:把旋钮拨到别的预设位置,或者亲手拧到自己的刻度。

3 条命令完成内置主题切换

内置主题共 10 个编号(0–9),同一编号的偶数、奇数是同一家族的深色/浅色变体:

1. 挑一个编号启动,例如 3 号深色:copyparty --theme=3 /path/to/files
2. 不想让设置面板列出全部 10 个选项,就调低数量:copyparty --theme=3 --themes=4 /path/to/files
3. 加载你自己的样式表(文件需放在 webroot 下,浏览器要能访问到):copyparty --theme=9 --css-browser=/custom.css /path/to/files

进阶:12 行 CSS 改出一套专属配色

选一个内置主题编号后,页面的html元素会带上对应类名,比如 9 号是ey。你只需覆盖最关键的几个变量,其余颜色会跟着联动:

/* custom.css —— 套在 9 号主题上 */ html.ey { --fg: #e8e6e3; /* 正文颜色 */ --fg-max: #ffffff; /* 高亮文字 */ --bg: #14161a; /* 页面底色 */ --bg-u2: #1b1e24; /* 面板底色 */ --bg-u5: #2a2f3a; /* 悬停行颜色 */ --a: #7fb4ff; /* 链接色 */ --btn-1-bg: #2f6fed; /* 主按钮底色 */ }

保存后按上面的第 3 条命令启动,刷新页面即可看到效果,不用改任何源码。如果还想给文件网格按扩展名加图标,可以参考仓库里现成的写法 contrib/plugins/browser-icons.css,用#ggrid>a[href$=".mp4"i]:before选择器加个content: '▶'即可。

三步复刻官方蓝屏主题

仓库自带一个把界面改成 Windows 蓝屏的示例,过程很短:

1. 把 contrib/themes/ 里的bsod.css和bsod.png复制到 webroot 下,放进一个名为.themes的文件夹
2. 启动并指定主题表:copyparty --themes=10 --theme=9 --css-browser=/.themes/bsod.css /path/to/files
3. 打开页面,整个文件列表就变成熟悉的深蓝底色加白字

整个主题没有动任何布局,靠的就是覆盖--bg、--fg这类变量再补一张背景图。

几个容易踩的坑

• --theme只是默认值。访客打开设置面板可以自行切换,选择会存在浏览器本地,下次访问沿用
• --css-browser指向的是 URL,不是服务器本地路径,文件必须能被 HTTP 访问到;放进.themes这类点开头的隐藏目录,就不会出现在目录列表里
• 只改配色时不必罗列全部变量,覆盖--fg、--bg、--a这一组核心项,面板和表格会跟着变

把--theme、--css-browser加进启动命令,再花十分钟写一张变量表,你的文件服务器界面就有了辨识度。想再进一步,可以试试--js-browser注入自己的脚本,给浏览页加上交互逻辑,思路和换色完全一致:找到挂载点,写最小可用的代码,然后刷新看结果。

【免费下载链接】copypartyPortable file server with accelerated resumable uploads, dedup, WebDAV, SFTP, FTP, TFTP, zeroconf, media indexer, thumbnails++ all in one file项目地址: https://gitcode.com/GitHub_Trending/co/copyparty