分享CHFS文件共享服务器前端魔改配置文件

liaohcai

由于疫情约束，在家里三天了。无聊，尝试魔改CHFS文件共享服务器配置文件。
但是在手机某些浏览器上效果有些不好，电脑上毛玻璃显示效果很好！


CuteHttpFileServer/chfs是一个免费的、HTTP协议的文件共享服务器，使用浏览器可以快速访问
感谢docblue@163.com大神开发的软件 CuteHttpFileServer | iscute.cn


分为两个不同平台魔改：
一、padavan平台上
二、windows平台上

魔改后的效果：






现在很多人都在食用alist。而我还是在用chfs文件共享服务器好多年了。

下列是脚本和魔改配置文件，可用在padavan和内核5.4及以下的openwrt
脚本和魔改配置文件
运行文件CuteHttpFileServer | iscute.cn
如果觉得运行文件太大，也可以下载我压缩好






把后缀“.zip”删除，然后用7z浏览打开
——————————————————————————
魔改配置文件

1. #---------------------------------------
   
2. # 请注意：
   
3. #     1，如果不存在键或对应值为空，则不影响对应的配置
   
4. #     2，配置项的值，语法如同其对应的命令行参数
   
5. #---------------------------------------
   
6. 
   
7. 
   
8. # 监听端口
   
9. port=8888
   
10. 
    
11. 
    
12. # 共享根目录，通过字符'|'进行分割
    
13. # 注意：
    
14. #     1，带空格的目录须用引号包住，如 path="c:\a uply name\folder"，windows下用“\”，linux下用“/”如 path="/mnt/sda4/oppo 10"。
    
15. #     2，可配置多个path，分别对应不同的目录
    
16. path=/mnt/sda2
    
17. path=/mnt/sda3/video
    
18. path=/tmp
    
19. path=/mnt/sda3/mp3
    
20. path="/mnt/sda4/11 10"
    
21. path=/mnt/sda1/c7v1通过uboot互刷固件
    
22. path=/mnt/sda1/食品化验
    
23. 
    
24. # IP地址过滤
    
25. allow=
    
26. 
    
27. #----------------- 账户控制规则 -------------------
    
28. # 注意：该键值可以同时存在多个，你可以将每个用户的访问规则写成一个rule，这样比较清晰，如：
    
29. #     rule=::
    
30. #     rule=root:123456:RW
    
31. #     rule=readonlyuser:123456:R
    
32. rule=::
    
33. rule=用户A:123::11 10:RW
    
34. rule=用户B:123::食品化验:RW
    
35. rule=用户C:123::sda2:R:c7v1通过uboot互刷固件:R
    
36. rule=游客:123::video:R:mp3:R
    
37. 
    
38. 
    
39. # 用户操作日志存放目录，默认为空
    
40. # 如果赋值为空，表示禁用日志
    
41. log=/tmp/log
    
42. 
    
43. # 网页标题
    
44. html.title=文件资源分享
    
45. 
    
46. # 网页顶部的公告板。可以是文字，也可以是HTML标签，此时，需要适用一对``(反单引号，通过键盘左上角的ESC键下面的那个键输出)来包住所有HTML标签。几个例子：
    
47. html.notice=`  <div style="background:black;color:white"><p>这是一台家用路由器搭建的小功耗小型文件服务器</p><!-- 网页鼠标点击特效 - 核心价值观关键字 -->
    
48. <STYLE>
    
49. body{
    
50.         background-image: url(https://cn.bing.com/th?id=OHR.SeaAngel_EN-US5531672696_1920x1080.jpg&rf=LaDigue_1920x1080.jpg&pid=hp) !important;
    
51.         color: #d90101 !important;
    
52.         text-shadow: 0px 0px 3px #3c8ed5 !important;
    
53.         background-repeat:no-repeat;
    
54.         background-size:cover;
    
55.         background-attachment:fixed;
    
56.         background-position-x:center;
    
57. }
    
58. 
    
59. .dropdown-menu {
    
60.         background-color: rgb(0 0 0 / 53%) !important;
    
61. }
    
62. 
    
63. .form-control {
    
64.         background-color: rgb(0 0 0 / 0%) !important;
    
65.         color: #ffffff !important;
    
66. }
    
67. 
    
68. .container {
    
69.         background-color:#e1e4e833 !important;
    
70.         backdrop-filter: blur(3px) !important;
    
71.         box-shadow: inset 0px 1px 8px 4px rgb(255 255 255 / 40%) !important;
    
72.         background-position:100% !important;
    
73. }
    
74. a {
    
75.         color: #e4620e !important;
    
76.         text-shadow: 0px -1px 11px #42b2ea !important;
    
77. }
    
78. 
    
79. .jconfirm.jconfirm-bootstrap .jconfirm-box {
    
80.         background-color: #ffffff24 !important;
    
81.         backdrop-filter: blur(3px) !important;
    
82. }
    
83. 
    
84. .modal-content {
    
85.         background-color: #33333369 !important;
    
86.         box-shadow: inset 0 3px 13px 8px rgb(0 0 0 / 50%) !important;
    
87. }
    
88. 
    
89. .modal.in .modal-dialog {
    
90.         color: #337ab7 !importan !importan;
    
91.         background-color: #a94442 !importan;
    
92.         backdrop-filter: blur(4px) !importan;
    
93. }
    
94. 
    
95. .breadcrumb>.active {
    
96.         color: #f5f5f5 !importan;
    
97. }
    
98. 
    
99. .mybc {
    
100.         background-color: #3492d940 ;
     
101. }
     
102. .footer{
     
103.         display: none !important;
     
104. }
     
105. </STYLE>
     
106. 
     
107. <script>
     
108.   (function () {
     
109.         var a_idx = 0;
     
110.         window.onclick = function (event) {
     
111.             var a = new Array("&#10084;富强&#10084;", "&#10084;民主&#10084;", "&#10084;文明&#10084;", "&#10084;和谐&#10084;", "&#10084;自由&#10084;", "&#10084;平等&#10084;", "&#10084;公正&#10084;", "&#10084;法治&#10084;", "&#10084;爱国&#10084;",
     
112.                 "&#10084;敬业&#10084;", "&#10084;诚信&#10084;", "&#10084;友善&#10084;");
     
113.             var heart = document.createElement("b"); //创建b元素
     
114.             heart.onselectstart = new Function('event.returnValue=false'); //防止拖动
     
115. 
     
116.             document.body.appendChild(heart).innerHTML = a[a_idx]; //将b元素添加到页面上
     
117.             a_idx = (a_idx + 1) % a.length;
     
118.             heart.style.cssText = "position: fixed;left:-100%;"; //给p元素设置样式
     
119. 
     
120.             var f = 13, // 字体大小
     
121.                 x = event.clientX - f / 2 - 30, // 横坐标
     
122.                 y = event.clientY - f, // 纵坐标
     
123.                 c = randomColor(), // 随机颜色
     
124.                 a = 1, // 透明度
     
125.                 s = 0.8; // 放大缩小
     
126. 
     
127.             var timer = setInterval(function () { //添加定时器
     
128.                 if (a <= 0) {
     
129.                     document.body.removeChild(heart);
     
130.                     clearInterval(timer);
     
131.                 } else {
     
132.                     heart.style.cssText = "font-size:16px;cursor: default;position: fixed;color:" +
     
133.                         c + ";left:" + x + "px;top:" + y + "px;opacity:" + a + ";transform:scale(" +
     
134.                         s + ");";
     
135. 
     
136.                     y--;
     
137.                     a -= 0.016;
     
138.                     s += 0.002;
     
139.                 }
     
140.             }, 15)
     
141.         }
     
142.         // 随机颜色
     
143.         function randomColor() {
     
144.             return "rgb(" + (~~(Math.random() * 255)) + "," + (~~(Math.random() * 255)) + "," + (~~(Math
     
145.                 .random() * 255)) + ")";
     
146.         }
     
147.     }());
     
148. </script>`
     
149. 
     
150. 
     
151. # 是否启用图片预览(网页中显示图片文件的缩略图)，true表示开启，false为关闭。默认开启
     
152. image.preview=false
     
153. # 下载目录策略。disable:禁用; leaf:仅限叶子目录的下载; enable或其他值:不进行限制。
     
154. # 默认值为 enable
     
155. folder.download=disable
     
156. 
     
157. #-------------- 设置生效后启用HTTPS，注意监听端口设置为443-------------
     
158. # 指定certificate文件
     
159. ssl.cert=
     
160. # 指定private key文件
     
161. ssl.key=
     
162. 
     
163. # 设置会话的生命周期，单位：分钟，默认为30分钟
     
164. session.timeout=0
     

复制代码

一、padavan平台食用方法如下：
1、确定padavan路由器有USB接口，接上U盘或移动硬盘且有ext4系统文件分区。因为chfs执行文件较大有10MB多，padavan固件自身的可写分区小，无法写入大文件！或者是能过挂载本地或远程ext4分区。
2、用winSCP登陆路由器，在ext4分区上新建“chfs”目录（文件夹），将chfs运行文件、chfs.sh脚本和chfs配置文件拖放到chfs目录中，双击打开chfs配置文件,修改成你想要的 “端口号”、共享目录、帐号等等，保存。chfs运行文件赋予运行权限，shfs.sh脚本也赋予运行权限并复制名称包括目录，如图所示：


3、在win10上同时按下“win键”+r键，弹出运行，键入cmd ,“确定”如下图所示：

格式：

1. ssh 用户名@ip或者域名

复制代码

1. admin@l0.noip.cn's password:密码

复制代码

鼠标右键 粘贴 其路径后加 空格和”&“，回车

如果要padavan路由器开机运行就将粘贴到自定义用户脚本——在路由器启动后执行，点击”运用本页面设置“
完成打开浏览器输入http://ip:端口号，就能看到魔改后的前端界面。

有谁还会在padavan上用chfs文件共享服务器呢，ALIST难道不香吗！
但在windows平台上用它共享文件非常方便，比windows自带的smb共享还好用，不会被逼疯，一个运行文件，绿色配置简单，有图形用户界面，逻辑明了，一目了然。
这是它的图形用户界面:





这是它的前端页面：

看久了还会审美疲劳：


二、在windows平台上，改它的前端页面，
说真的非常简单，不用写代码，改代码。
只要把下列的代码复制进………里面，再运行。

1. <STYLE>
   
2. body{
   
3.         background-image: url(https://cn.bing.com/th?id=OHR.SeaAngel_EN-US5531672696_1920x1080.jpg&rf=LaDigue_1920x1080.jpg&pid=hp) !important;
   
4.         color: #d90101 !important;
   
5.         text-shadow: 0px 0px 3px #3c8ed5 !important;
   
6.         background-repeat:no-repeat;
   
7.         background-size:cover;
   
8.         background-attachment:fixed;
   
9.         background-position-x:center;
   
10. }
    
11. 
    
12. .dropdown-menu {
    
13.         background-color: rgb(0 0 0 / 53%) !important;
    
14. }
    
15. 
    
16. .form-control {
    
17.         background-color: rgb(0 0 0 / 0%) !important;
    
18.         color: #ffffff !important;
    
19. }
    
20. 
    
21. .container {
    
22.         background-color:#e1e4e833 !important;
    
23.         backdrop-filter: blur(3px) !important;
    
24.         box-shadow: inset 0px 1px 8px 4px rgb(255 255 255 / 40%) !important;
    
25.         background-position:100% !important;
    
26. }
    
27. a {
    
28.         color: #e4620e !important;
    
29.         text-shadow: 0px -1px 11px #42b2ea !important;
    
30. }
    
31. 
    
32. .jconfirm.jconfirm-bootstrap .jconfirm-box {
    
33.         background-color: #ffffff24 !important;
    
34.         backdrop-filter: blur(3px) !important;
    
35. }
    
36. 
    
37. .modal-content {
    
38.         background-color: #33333369 !important;
    
39.         box-shadow: inset 0 3px 13px 8px rgb(0 0 0 / 50%) !important;
    
40. }
    
41. 
    
42. .modal.in .modal-dialog {
    
43.         color: #337ab7 !importan !importan;
    
44.         background-color: #a94442 !importan;
    
45.         backdrop-filter: blur(4px) !importan;
    
46. }
    
47. 
    
48. .breadcrumb>.active {
    
49.         color: #f5f5f5 !importan;
    
50. }
    
51. 
    
52. .mybc {
    
53.         background-color: #3492d940 ;
    
54. }
    
55. .footer{
    
56.         display: none !important;
    
57. }
    
58. </STYLE>
    
59. 
    
60. <script>
    
61.   (function () {
    
62.         var a_idx = 0;
    
63.         window.onclick = function (event) {
    
64.             var a = new Array("&#10084;富强&#10084;", "&#10084;民主&#10084;", "&#10084;文明&#10084;", "&#10084;和谐&#10084;", "&#10084;自由&#10084;", "&#10084;平等&#10084;", "&#10084;公正&#10084;", "&#10084;法治&#10084;", "&#10084;爱国&#10084;",
    
65.                 "&#10084;敬业&#10084;", "&#10084;诚信&#10084;", "&#10084;友善&#10084;");
    
66.             var heart = document.createElement("b"); //创建b元素
    
67.             heart.onselectstart = new Function('event.returnValue=false'); //防止拖动
    
68. 
    
69.             document.body.appendChild(heart).innerHTML = a[a_idx]; //将b元素添加到页面上
    
70.             a_idx = (a_idx + 1) % a.length;
    
71.             heart.style.cssText = "position: fixed;left:-100%;"; //给p元素设置样式
    
72. 
    
73.             var f = 13, // 字体大小
    
74.                 x = event.clientX - f / 2 - 30, // 横坐标
    
75.                 y = event.clientY - f, // 纵坐标
    
76.                 c = randomColor(), // 随机颜色
    
77.                 a = 1, // 透明度
    
78.                 s = 0.8; // 放大缩小
    
79. 
    
80.             var timer = setInterval(function () { //添加定时器
    
81.                 if (a <= 0) {
    
82.                     document.body.removeChild(heart);
    
83.                     clearInterval(timer);
    
84.                 } else {
    
85.                     heart.style.cssText = "font-size:16px;cursor: default;position: fixed;color:" +
    
86.                         c + ";left:" + x + "px;top:" + y + "px;opacity:" + a + ";transform:scale(" +
    
87.                         s + ");";
    
88. 
    
89.                     y--;
    
90.                     a -= 0.016;
    
91.                     s += 0.002;
    
92.                 }
    
93.             }, 15)
    
94.         }
    
95.         // 随机颜色
    
96.         function randomColor() {
    
97.             return "rgb(" + (~~(Math.random() * 255)) + "," + (~~(Math.random() * 255)) + "," + (~~(Math
    
98.                 .random() * 255)) + ")";
    
99.         }
    
100.     }());
     
101. </script>

复制代码

看清楚，看清楚，看清楚！！！
这是魔改后的前端页面：


在windows平台上是不是超级简单！

———————————————————————————————
后来我的r3g刷了Kiddin大神的OpenWrt就用不了了

SkyTiger

来思考一下CHFS文件，辛苦了，感谢楼主分享。

ggggfnwfn2015

下载试试吧

baitai

最后也在单位的电脑上装了一个CHFS，然后用raidrive挂载到一个磁盘中，用起来非常方便。但在使用中发现一个bug，用webdav挂载后，只能显示设置的第一个文件里面的内容。

bicantcsr

谢谢大佬分享

kmy143

谢谢楼主分享，过来思考

cnov

看看改的咋样