- A+
这个博客好久没有打理了,最近才想起来
这篇文章是以下 5 篇文章的组合,希望这个免费的项目能实现他的初衷吧
- vList5:部署指南
- vList5.3 全面加密,从我做起
- njs 从入门(交叉编译)到入坟(与vList5配对)
- vList5+njs/moment 实用与使用
- 光猫折腾4:为光猫编译armel版本的nginx
特色:
- 使用 Vue3 作为框架,支持njs作为后端(推荐),超强大的并发能力
- 超多格式支持预览,甚至原生支持
CueSheet
与vue原生集成 - 动态模块加载,即插即用
- 预设5个打开方式和3个备用打开方式,可在
src/opener.ts
中添加 - 支持简单的文件系统管理,集成批量、正则等好用的工具
- 响应式设置设计,设置里修改后立即生效
- 仿explorer易上手的文件选取、文件树结构
- 好用的右键支持,在移动端也可以像Windows那样长按唤出右键菜单
- vPlayer集成ASS字幕,支持手势、字幕选取,artPlayer能否做到的她都能做到
- vLite仿照了 [yesPlayMusic][9] 的UI,支持CUE光盘文件播放,强大而华丽
- 支持 [所见即所得的MarkDown编辑器Muya][10],高效编写MarkDown的助手
- 使用VSCode底层monaco编辑器,代码编辑如虎添翼
- ......
GITHUB开源:https://github.com/imzlh/vList5
1.编译
njs是Nginx的一个扩展,用于取代lua动态输出内容
njs融合了浏览器端的ES(如crypto
)语法和部分NodeJS语法(如fs.open
)
这里已经假设你安装了pcre2、openssl、zlib、libxml2库
先fetch NGINX
curl https://nginx.org/download/nginx-1.25.4.tar.gz | tar xz cd nginx-1.25.4 sed -i 's|ngx_feature_run=yes|ngx_feature_run=no|g' auto/cc/name sed -i 's|ngx_feature_run=yes|ngx_feature_run=no|g' auto/os/linux sed -i 's|ngx_feature_run=yes|ngx_feature_run=no|g' auto/unix sed -i 's|ngx_size=`$NGX_AUTOTEST`|ngx_size=4|g' auto/types/sizeof sed -i '187 a ngx_feature_run=no' auto/cc/conf sed -i 's|/opt/local|/data/app|g' auto/lib/geoip/conf sed -i 's|/opt/local|/data/app|g' auto/lib/pcre/conf sed -i 's|ngx_feature_path=|ngx_feature_path="/data/app/include"|g' auto/lib/zlib/conf sed -i 's|ngx_feature_libs="-lz"|ngx_feature_libs="-R/data/app/lib -L/data/app/lib -lz"|g' auto/lib/zlib/conf sed -i 's|/opt/local|/data/app|g' auto/lib/openssl/conf
将njs克隆到 njs/
文件夹中:
git clone https://github.com/nginx/njs.git
由于是交叉编译,我们需要修改一下编译选项
for i in `ls njs/auto` do sed -i 's|njs_feature_run=yes|njs_feature_run=no|g' njs/auto/$i sed -i 's|njs_feature_run=value|njs_feature_run=no|g' njs/auto/$i done
然后是重新编译nginx
./configure --prefix=/usr/local/ --user=daemon --group=daemon --build="for ARMRounger" --without-poll_module --without-http_ssi_module --without-http_userid_module --without-http_mirror_module --without-http_geo_module --without-http_map_module --without-http_split_clients_module --without-http_uwsgi_module --without-http_grpc_module --without-http_memcached_module --without-http_empty_gif_module --without-http_browser_module --without-http_upstream_hash_module --without-http_upstream_ip_hash_module --without-http_upstream_least_conn_module --without-http_upstream_random_module --without-http_upstream_keepalive_module --without-http_upstream_zone_module --http-log-path=/tmp/nginx/log.log --http-client-body-temp-path=/tmp/nginx/body --http-proxy-temp-path=/tmp/nginx/proxy --http-fastcgi-temp-path=/tmp/nginx/fcgi --http-scgi-temp-path=/tmp/nginx/scgi --with-cc=armv7m-linux-musleabi-gcc --with-cpp=armv7m-linux-musleabi-gcc-g++ --add-dynamic-module=njs/nginx/ --add-module=dav --with-http_dav_module --with-http_v2_module --with-http_v3_module
完美:
configuring additional dynamic modules
adding module in ../njs/nginx/
enabled webcrypto module
enabled xml module
enabled zlib module
+ ngx_js_module was configured
想要我编译好的可以去 原文找到
2.安装vList
vList在一个月内从 v1
升级到了 v4
,完成了甚至超额完成我们预期内的所有功能
我们团队觉得好不是真的好,接下来是用户的天地!
配置nginx
如果你是自己编译的,那么配置文件位置是你自己设置的
打开配置文件,大部分系统都保存在 /etc/nginx/nginx.conf
nano /etc/nginx/nginx.conf
可以直接将配置写在这里,但是我其实更推荐使用系统为我们设计好的其他目录
Alpine: /etc/nginx/http.d/default.conf
Debian: /etc/nginx/site-enabled/default.conf
然后找到合适的位置加上这几行
js_import /etc/nginx/main.js; location = /@api/ { js_var $authkey "[这里填写你想要的密码]"; js_content main.main; }
如果有 # Everything in 404
这几行 location
,删掉
下载vList
得益于GithubAction,现在你不需要安装node,直接可以开箱即用啦
这个是vList5
这个是适用于nginx的
配置网页
cd [你的网页根目录] curl https://github.com/imzlh/vList5/releases/download/main/vlist5_latest.tgz -L | tar xz
配置
curl -L https://github.com/imzlh/vlist-njs/releases/download/master/vlist5.js -o /etc/nginx/main.js
开始使用
现在,重载nginx
killall nginx nginx
打开网页,即可体验
进阶用法
修改配置
用记事本打开config.ts
这个文件
- | // 应用名称,显示在左上角 4 | export const APP_NAME = 'izCloud'; - | // 默认文件图标,自定义:可以改成相对路径 5 | export const DEFAULT_FILE_ICON = I_File; - | // 默认文件夹图标,自定义:可以改成相对路径 6 | export const DEFAULT_DIR_ICON = I_DIR; - | // API地址,除非前后端分离,请修改请修改最后一行引号内至"/" 7 | export const APP_API = import.meta.env.DEV | ? 'http://192.168.1.1:81/@api/' | : '/@api/'; // <--- HERE - | // 文件服务器地址,除非前后端分离,请修改最后一行引号内至"/" 10 | export const FILE_PROXY_SERVER = import.meta.env.DEV | ? 'http://192.168.1.1:81/' | : ''; // <--- HERE
关于FILE_PROXY_SERVER
- 如果有代理服务器,可以修改这一段
- 如果前后端分离(vList5单独一个服务器),需要填写
- 一般情况下直接改成
/
即可,因为vList5默认使用网页根目录作为列表根目录
关于API地址
- 并不是一定需要
/@api/
作为API地址的,但是需要nginx和前端vlist一起更改
vList的妙用
批量删除/重命名/移动
场景 设想你下载了一堆番剧文件和找来了一堆字幕,有简体、繁体、各种不同的命名。你甘心一个一个排序吗?
cue文件解析
你去网上下载了一张CD,结果是一个cue文件和一个长达1个小时,大小甚至超过了200MB的flac文件,你想要听一个片段,怎么办?
在vList5
中,双击打开即可
私密文件夹
有的时候,我们需要开放,也需要隐私。这个时候隐藏文件夹就出场了
比如屏蔽所有$
开头的文件夹,打开 vlist.js
16 | /** 17 | * 检验文件是否应该被隐藏 18 | */ 19 | const HIDE_FILES = (name) => name[0] == '.';
在19行添加即可,如
19 | const HIDE_FILES = (name) => name[0] == '.' || name[0] == '$';
甚至可以正则匹配,如隐藏所有图片
19 | const HIDE_FILES = (name) => name[0] == '.' || name.match(/.(jpg|png|webp|jpeg)$/);
然后,我自己访问只需要 转到目录
,输入隐藏的路径(文件夹)即可
或者使用HASH大法,在路径上输入目录路径即可,如http://localhost:5173/#/.in/
完美!