lightbox2 使用
lightbox 是一个JavaScript 库,用来在前端显示图片。它的特点是轻量,容易部署,适用于现代的浏览器。
官网:https://lokeshdhakar.com/projects/lightbox2/
GitHub 项目地址:https://github.com/lokesh/lightbox2
release 下载:https://github.com/lokesh/lightbox2/releases
lightbox 是一个JavaScript 库,用来在前端显示图片。它的特点是轻量,容易部署,适用于现代的浏览器。
官网:https://lokeshdhakar.com/projects/lightbox2/
GitHub 项目地址:https://github.com/lokesh/lightbox2
release 下载:https://github.com/lokesh/lightbox2/releases
font awesome 是流行的 icon 图标库。最新版为 version 5
font awesome 分为付费版和免费版,付费版有 7020 个 icon,免费版有 1535 个 icon。
免费:brands.js
solid.js
付费:regular.js
light.js
官网:https://fontawesome.com/
GitHub 项目地址:https://github.com/FortAwesome/Font-Awesome
release 地址:https://github.com/FortAwesome/Font-Awesome/releases
w3 教程:https://www.w3schools.com/icons/fontawesome5_intro.asp
bootstrap 是全球最流行的前端框架,用来构建高响应,移动端优先的项目。
官网:https://getbootstrap.com/
GitHub 主页:https://github.com/twbs/bootstrap
release 页面:https://github.com/twbs/bootstrap/releases
有时候我们想要限制某个页面的访问权限,需要用户名密码才能进入。
如果使用 nginx 作为反向代理服务器,可以使用 auth_basic 来实现页面加密。
环境需求:
Linux env
nginx
apache2-utils (Debian, Ubuntu) or httpd-tools (RHEL/CentOS/Oracle Linux)
安装环境:
nginx 安装参考:https://niekun.net/index.php/archives/30.html
安装 apache2-utils:
apt-get install apache2-utils
创建账户密码:
使用了 htpasswd 命令创建用户。
关于 htpasswd 的详细使用:https://httpd.apache.org/docs/2.4/programs/htpasswd.html
建议将账户信息文件建立在 nginx 目录,我放在 /etc/nginx/users 目录下:
htpasswd -c /etc/nginx/users/.adminpasswd user1
.adminpasswd 为隐藏的存储所有账户信息的文件,user1 为用户名,回车后会提示输入密码,然后确认密码。
建立其他账户:
htpasswd /etc/nginx/users/.adminpasswd user2
不需要 -c
参数,因为文件已经建立了。
验证账户密码 -v
:
htpasswd -v /etc/nginx/users/.adminpasswd user1
删除账户 -D
:
htpasswd -D /etc/nginx/users/.adminpasswd user1
使用账户:
打开 nginx 配置文件,在需要账户登录的路径段修改如下:
location /path {
...
auth_basic "Administrator's Area";
auth_basic_user_file /etc/nginx/users/.adminpasswd;
...
...
}
重新加载配置文件:
service nginx configtest
service nginx reload
打开对应页面测试是否提示输入账号密码。
使用 nginx 的 autoindex 模块可以搭建简单的文件分享页面,但默认的页面比较简陋:
autoindex 搭建教程参考:https://niekun.net/index.php/archives/26.html
如果需要更加美观和丰富的页面,可以使用第三方模块 fancyindex 来实现。