index网站目录列表程序h5ai完整安装及配置

网站有非常多的Index目录列表程序,有单纯apache和一些php的,普遍来说php的index程序要更加华丽和功能丰富一些。今天我要介绍的就是很多人都在用的h5ai。

h5ai由德国开发者 Lars Jung 主导开发,它提供多种文件目录列表呈现方式,支持多种主流 Web 服务器下的PHP 5.5+,例如 Nginx、Apache、Cherokee、Lighttpd 等, 支持的浏览器包括Chrome, Firefox, Opera, Vivaldi, Safari 和 Edge, 支持多国语言,最棒的是原生态支持中文,不过中文目录支持的不是很好。本程序支持在线预览文本、图片、音频、视频,同时支持网址直接转化为二维码显示。h5ai的好处是有众多的可选扩展和配置选项来自定义目录列表的Web外观,不好的地方就是安装及配置略繁琐。

程序特点

可按文件名、日期或大小排序
支持多种视图及图标模式
支持多国语言
可自定义页面顶部及底部
可过滤显示文件及文件夹
可计算文件夹大小
自动刷新文件夹内容
支持文件二维码
支持生成图片、视频、PDF文档缩略图
可以在线预览txt,图片,音频,视频等文件格式

程序预览

官网有个预览程序,我下面的截图就是来源于此。

https://larsjung.de/h5ai/demo/

同时作者的程序包也采用了h5ai的模式。

https://release.larsjung.de/

安装方法

首先安装网站环境,推荐使用LNMP安装,然后在用以下命令添加网站。
lnmp vhost add
将程序下载后解压,直接把_h5ai这个文件夹放置在网站根目录下,如果有必要的话,可以建立一个rebots.txt文件的话可以禁止搜索引擎搜索。但实际上_h5ai安装就基本结束了,只需要配置以下http的配置文件就可以了。还要记得把_h5ai中private和public两个文件夹中的cache目录权限设置为777。
最终文件结构应该是:
DOC_ROOT
├─ _h5ai
├─ your files
└─ and folders

修改配置

我先以我常用的lnmp为例。找到新建网站的配置文件,一般位于/usr/local/nginx/conf /vhost中。修改其中关于index的配置文选项(80端口的一般位于第六行)就可以了。

index index.html index.php /_h5ai/public/index.php;

如果配置了HTTPS访问的话也要记得把443端口的index配置文件修改为以上内容,还需要配置HTTP自动跳转HTTPS的话要在80端口配置中加入以下内容。

return 301 https://$server_name$request_uri; 最后记得重载下配置,我一般还顺便把服务也重启下。
/etc/init.d/nginx reload
/etc/init.d/nginx restart

为了避免配置页面泄露,我们还可以如下以下配置文件

location ~ ^/_h5ai/private/ { return 404; }? ?#如果在子目录安装,记得加入子目录完整路径
Apache及其他配置官网也有介绍,我就只列出来不详细说明了。

Apache:修改httpd.conf文件
DirectoryIndex index.html index.php /_h5ai/public/index.php

lighttpd:修改lighttpd.conf
index-file.names += ("index.html", "index.php", "/_h5ai/public/index.php")

Cherokee: 修改cherokee.conf
vserver!1!directory_index = index.html,index.php,/_h5ai/public/index.php

重启完服务通过浏览器查看是否能访问以下网址,如果出现一个带PayPal的网页,说明就成功了。
http://YOUR-DOMAIN.TLD/_h5ai/public/index.php

例如作者的就是https://release.larsjung.de/_h5ai/public/index.php

支持功能

上面的网站点击login,可以看到程序已经自动判断出支持哪些功能及不支持哪些功能模块。我把作者的网站截图了,供大家参考下。

作者除了Movie thumbs这个功能不支持(no)以外,其他的全部都支持(yes)。前面的选项基本上大家都只要是正常安装都会显示Yes,只有后7项是根据不同的服务器可能配置的不相同。

  • PHP version 请升级php版本
  • Public Cache directory 把_h5ai/public/cache目录权限设置为777
  • Private Cache directory把_h5ai/private/cache目录权限设置为777
  • Image thumbs 安装php的GD模块。
  • Use EXIF thumbs 安装php的exif模块。
  • Movie thumbs 可以选择安装ffmpeg,也可以选择安装avconv:
  • PDF thumbs 安装convert或gm:命令:yum -y install ImageMagick
  • Shell tar, Shell zip, Shell du 在php.ini文件中把exec函数从被禁用中删除。

Image thumbs

支持图片显示,这个默认都会安装的,只要是php的GD库支持就可以。

Use EXIF thumbs

支持图片的EXIF信息显示。默认LNMP(PHP版本5.X)是不会安装此项的。
cd /root/lnmp1.5/src
tar -jxvf -5.6.36.tar.bz2 #根据自己安装的版本不同
cd php-5.6.36/ext/exif/
/usr/local/php/bin/phpize
./configure --with-php-config=/usr/local/php/bin/php-config
make && make install
make clean

然后修改/usr/local/php/etc/php.ini
增加一条
extension=exif.so
保存后再将php重启就可以了。
/etc/init.d/php-fpm restart

Movie thumbs

需要安装ffmpeg或avconv等插件。
简单附上几个系统的安装说明:
CentOS7:
yum -y install epel-release
rpm --import /etc/pki/rpm-gpg/RPM-GPG-KEY-EPEL-7
rpm -Uvh http://li.nux.ro/download/nux/dextop/el7/x86_64/nux-dextop-release-0-1.el7.nux.noarch.rpm
yum -y install ffmpeg ffmpeg-devel

CentOS6:
yum -y install epel-release
rpm --import http://li.nux.ro/download/nux/RPM-GPG-KEY-nux.ro
rpm -Uvh http://li.nux.ro/download/nux/dextop/el6/x86_64/nux-dextop-release-0-2.el6.nux.noarch.rpm
yum -y install ffmpeg ffmpeg-devel

Debian:
编辑软件源
vim /etc/apt/sources.list
添加软件源
deb http://www.deb-multimedia.org jessie main non-free
deb ftp://ftp.deb-multimedia.org jessie main non-free
deb http://www.deb-multimedia.org stable main non-free
deb ftp://ftp.deb-multimedia.org stable main non-free

更新及安装
apt-get -y update
apt-get -y install ffmpeg

Ubuntu:
apt-get -y install ffmpeg
手动安装:
wget http://www.ffmpeg.org/releases/ffmpeg-4.1.tar.gz
tar -zxvf ffmpeg-4.1.tar.gz
cd ffmpeg-4.1
./configure
make
make install

其他版本也可以去http://www.ffmpeg.org/releases下载
如果嫌以上太麻烦可以去https://www.johnvansickle.com/ffmpeg/下载静态包,解压然后建立一个软链接及可以了。

PDF thumbs

需要安装ImageMagick插件。
yum install ImageMagick

Shell tar/Shell zip/Shell du

删除php已禁用函数exec与 passthru

另外去除禁用的 scandir 函数(如果有),不然会导致无法显示目录。

配置方法

主要的配置文件在_h5ai/private/conf/options.json中,可以根据自己相关不同的想法进行配置。
配置方法很简单,把false改成true就是打开功能,把true改成false就是关闭功能。

"download": {
//是否启用批量下载
"enabled": false,
//批量打包方式,可选"php-tar", "shell-tar", "shell-zip"
"type": "php-tar",
//打包后的压缩包的名字,为 null 的话就使用当前目录的名字
"packageName": null,
//是否始终显示下载按钮
"alwaysVisible": false}

"foldersize": {
"enabled": true,
"type": "php"
#打开文件夹大小显示

"info": {
//是否允许显示信息侧边栏
"enabled": true,
//是否默认显示侧边栏
"show": true,
//是否显示二维码
"qrcode": true,
//二维码前景色
"qrFill": "#999",
//二维码背景色
"qrBack": "#fff"}

"l10n": {
//用户是否可以自行选择语言
"enabled": true,
//默认语言,"zh-cn"为简体中文,其他支持的语言可以到"/_h5ai/conf/l10n"中查看
"lang": "zh-cn",
//根据浏览器自动判断语言
"useBrowserLang": true}

"search": {
//是否启用搜索
"enabled": true,
//是否开启进阶搜索(需要开启"filter"设置项,具体请自行研究)
"advanced": true,
"debounceTime": 300,
//是否忽略例外
"ignorecase": true}

"select": {
//是否启用多选
"enabled": false,
//是否启用拖拽式多选
"clickndrag": true,
//是否启用多选框
"checkboxes": true}

"title": {
//标题显示功能,false只显示index,true显示全部信息
"enabled": false}

"tree": {
//是否启用左侧目录树功能
"enabled": true,
"show": true,
//最大文件夹数
"maxSubfolders": 50,
//自然排序
"naturalSort": true,
//忽略大小写
"ignorecase": true}

进阶经验

支持中文目录
修改服务器默认语言为中文,不需要重启服务器
#CentOS6:
vi /etc/sysconfig/i18n
LANG="zh_CN.UTF-8"
source /etc/sysconfig/i18n

#CentOS7:
vi /etc/locale.conf
LANG="zh_CN.UTF-8"
source /etc/locale.conf

其他系统可参考军哥的方案:https://www.vpser.net/manage/lnmp-nginx-chinese-filename-directory.html

使目录为空
将index.html、index.htm或index.php放到需要不对外显示文件的目录中,则h5ai不显示该目录及其子目录任何文件,如果使用虚拟主机的需要注意调整一下根目录是否包含此类文件.
隐藏部分文件
同样在options.json配置文件中,在此项处添加,比如我就添加了robots.txt。当然,如果想隐藏某个文件夹也可以添加到列表中,这样文件夹中的文件及子目录全部都隐藏了,但是直接访问又是正常的,我测试了图片也可以正常输出。
"hidden": ["^\\.", "^_h5ai","robots.txt"],??//不显示的内容,支持正则

修改页面域名

虽然改了网站标题的Title为Index,但是左侧目录树跟导航栏还是现实域名,如果是网站的子目录做的网站还好,只显示子目录名称,但是如果是网站的话会显示网站域名全称,太长的话有碍感观,同时是逼死强迫症的节奏。修改_h5ai/public/js/scripts.js文件可以实现。(来源

"/"===e?f.getDomain():n.name
修改为
"/"===e?'Something I want':n.name

自定义页头页脚
"custom": {
"enabled": true
},

在当前目录中查找”_h5ai.header.html(.md)” 和 “_h5ai.footer.html(.md)”,如果没有,就到父目录去查找”_h5ai.headers.html(.md)” 和 “_h5ai.footers.html(.md)”,支持md格式文件。
通过php代码设置登录密码
首先在_h5ai/public/index.php最下面增加以下代码:
function mima(){ $user=array('填写你的用户名','填写你的密码'); if(!($user[0]===$_SERVER['PHP_AUTH_USER'] && $user[1]===$_SERVER['PHP_AUTH_PW'])){ header('WWW-Authenticate: Basic realm="MY Mark"'); header('HTTP/1.0 401 Unauthorized'); die("please login"); } }
然后在配置第一行,也就是<?php的下面(也就是第二行)插入以下代码:

mima();
版权修改
如果关闭了标题显示目录功能,Title中会显示作者的信息和网站,非常长,在以下文件中修改即可。另外强烈建议保留网站右上角的power by部分
_h5ai/private/php/pages/index.php
Nginx设置部分目录登陆可见
密码生成网址:http://tool.oschina.net/htpasswd,将生成的密码写入.htpasswd文件
编辑Nginx配置文件
#禁止访问.ht开头的任何文件
location ~ /\.ht {
deny all;
}
#对secrect目录使用密码认证,并使用Apache .htpasswd文件保存密码
location ^~ /secrect/ {
root /home/wwwroot/XXX;
autoindex on;
autoindex_exact_size off;
autoindex_localtime on;
auth_basic “Please input Password:”;
auth_basic_user_file /home/wwwroot/XXX/secrect/.htpasswd;
}

参考借鉴

好了,基本上就是全部的安装方法及相关配置了。有些未列入的功能或解决办法可以参考以下资料。
h5ai官网:https://larsjung.de/h5ai/
H5AI 新式的HTTP Web服务器索引的安装与配置:http://www.baerk.com/29.html
快速打造文件下载服务器-Directory Lister和h5ai优秀目录列表程序安装与使用:https://www.freehao123.com/directory-lister-h5ai/
h5ai 中文目录及文件均为乱码的更正方法:http://www.nbmao.com/archives/2880
LNMP环境安装h5ai索引目录与基本配置:https://www.xiaoz.me/archives/9338
h5ai 目录列表程序完整安装使用教程:https://www.htcp.net/3643.html
一款不错的PHP目录列表程序:h5ai安装教程:https://www.moerats.com/archives/121/
H5ai——一个强大美观的目录列表程序:http://www.senra.me/h5ai-a-modern-http-web-server-index-setup-and-modify
[h5ai] 轻便但强大的 PHP 文件目录列表程序:https://lolico.moe/yoimono/h5ai.html
修复 h5ai 没有密码的遗憾:https://www.hostloc.com/thread-366075-1-1.html

发表评论

电子邮件地址不会被公开。必填项已用 * 标注

此站点使用Akismet来减少垃圾评论。了解我们如何处理您的评论数据