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

Nicky 7.8K 0
摘要：

网站有非常多的Index目录列表程序，有单纯apache和一些php的，普遍来说php的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/

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

安装方法

首先安装网站环境，推荐使用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

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

支持功能

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

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

作者除了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

本文作者为Nicky，转载请注明。

发表评论 取消回复
表情 图片 链接 代码

分享