为什么要个性化?

虽然filebriwser本身就是单文件的一个轻量级网盘服务端,简洁美观,但是对于我这种喜欢骚里骚气的人来说,纯白色的背景和图标显然不够好看,于是,我就需要把它个性化。
001.png

准备工作

相关的个性化文件需要放在程序同一个目录的style文件夹内,然后进行设置即可生效,虽然官方文档也写了如何个性化,但是写的不够清楚。于是我在网上东拼西凑,找到了设置的方法,进行整合,需要的可以直接使用我整合过的版本。我的版本设置了登陆界面背景,主页面背景,程序图标,界面字体,界面颜色。绝大部分的设置都在custom.css文件内,可以修改。对于图像,字体,图标等直接替换文件就可以了,不需要改设置文件,就是图标必须是svg格式的。
002.png
下面是custom.css的内容:

 
/** 页面字体 */
@font-face {
  font-family: 'cute';
  src: local('cute'), local('cute'), url(/static/img/cute.ttf) format('truetype');
}
* {
  font-family: "cute", sans-serif;

}

/** 加载动画 */
.spinner > div {
  background-color: #ff5f77;
  backdrop-filter: blur(6px);
  background-color: orangered\0; /* IE 样式 */
}

/** 普通文字、字体图标颜色 */
.action, #listing h2, #search .boxes h3, .card h3, .collapsible > label *, .dashboard p label, .message {
  color: #ff5f77;

}

/** 链接文字颜色 */
a {
  color: #ff5f77;
  backdrop-filter: blur(6px);
}

/** 输入框、表格标题文字颜色 */
#search.active i, #search.active input, table th {
  backdrop-filter: blur(6px);
  color: #ff5f77;
}

/** 主体、弹窗颜色 */
#loading, #login, #search.active #input, body, header, .card, #search .boxes, .ace-chrome .ace_gutter-active-line {
  background-image: url(/static/img/background.jpg);
        background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: center center;
     background-attachment: fixed;
      background-size: cover;

  color: #ff5f77 ;
}




/** 搜索页面、列表标题样式 */
#search #input, #search #result, .input, #listing.list .item.header, .ace-chrome .ace_gutter, .share__box__download, .file-list li:hover {
  background-color:transparent;
  backdrop-filter: blur(6px);
  color:  #CD1076 ;
}

/** 列表项目、文本编辑、命令行、文件分享样式 */
#listing .item, .ace-chrome, .shell, .share__box {
  background-color:transparent;
  backdrop-filter: blur(6px);
  color:  #CD1076;
}




/** 加载页面、登录页面信息提示 */
#loading::after, #login::after {
    position: absolute;
    bottom: 6px;
    width: 100%;
    display: block;
    font-size: 26px;
    text-align: center;
    content: '';
    color: #FF1493;
    /* IE 样式 */
    bottom: 30px\0;
    font-size: 36px\0;
    color: tomato\0;
}
/** 加载页面、登录页面背景图 */
#login {
    background-image: url(/static/img/login.jpg);
}

#login img {
    width: 8em;
    height: 8em;
}

整合包下载:

这个是我设置好的整合包,稍微设置一下就可以用了:
linux_filebrowser_style.zip

进行设置:

下载fliebrowser,也可以直接下上面说的整合包。上面的整合包已经把主题设置好了,即开即用。
进入文件所在目录,运行filebrowser:

./filebrowser

然后使用Ctrl+C终止程序,进行基本设置。
让全部IP都可以访问:

./filebrowser config set -a 0.0.0.0

更改储存路径:(可选)

./filebrowser config set -r /path/to/storage/folder/

更改监听端口:(可选)

./filebrowser config set -p 2333

设置证书以使用https:(可选,前提是你有域名,并且申请了证书)

./filebrowser config set -t /path/to/certs/example_com.pem
./filebrowser config set -k /path/to/certs/example_com.key

我的整合包只进行了第一步的设置。
设置好后,启动filebrowser:

./filebrowser

打开浏览器,地址输入127.0.0.1:8080即可访问。
登陆用户名和密码都是admin,记得及时修改密码!
登陆后,点击设置,把语言改成中文:
003.png
然后设置品牌设置,更新后,刷新浏览器就可以看到效果了:
004.png
005.png
006.png