神代綺凜

[h5ai] 轻便但强大的 PHP 文件目录列表程序
h5ai 是一款功能强大的 PHP 文件目录列表程序,它提供多种文件目录列表呈现方式,支持 Apache、ligh...
扫描右侧二维码阅读全文
09
2017/11

[h5ai] 轻便但强大的 PHP 文件目录列表程序

h5ai 是一款功能强大的 PHP 文件目录列表程序,它提供多种文件目录列表呈现方式,支持 Apache、lighttpd、nginx、Cherokee 服务器,支持多国语言(有中文)。
你可以在线预览文本,图片,音频,视频等文件格式,以及打包下载,显示文件二维码等。

Head Pic: 「第一回シストチャレンジ!」/「凍咲しいな」のイラスト [pixiv]

h5ai

官网:https://larsjung.de/h5ai/
演示:https://larsjung.de/h5ai/demo/

本站演示:https://files.lolico.moe/

环境要求

  • Apache / lighttpd / nginx / Cherokee 服务器
  • PHP 5.5+

下载

进入官网直接点击右侧的“DOWNLOAD”即可。
你也可以直接访问 https://release.larsjung.de/h5ai/ 来查看所有可供下载的版本(这一下载站点也运用了 h5ai)。

部署

  1. 将下载好的压缩包上传到服务器,解压,将其中的_h5ai文件夹放到网站根目录。

    当然,如果你只想让某个子目录使用 h5ai 的话,你可以放到任意一个你想的子目录中。
  2. 修改服务器配置:修改默认文档
    其实就是在站点默认文档中加入/_h5ai/public/index.php这一项
    • Apache: httpd.conf或者网站根目录的.htaccess
      DirectoryIndex  index.html  index.php  /_h5ai/public/index.php
    • lighttpd 1.4: lighttpd.conf
      index-file.names += ("index.html", "index.php", "/_h5ai/public/index.php")
    • nginx 1.2: nginx.conf
      index  index.html  index.php  /_h5ai/public/index.php;
    • Cherokee 1.2: cherokee.conf
      vserver!1!directory_index = index.html,index.php,/_h5ai/public/index.php
  3. 禁止/_h5ai/private中的内容被访问
    此目录下的文件不宜泄露,因此需要配置服务器以禁止此目录下的文件被访问。
    这里拿 nginx 的配置来做示例。
    在 nginx 当前网站的配置中加上以下内容:
    location ~ ^/_h5ai/private/ {
        return 404;
    }

    如果在子目录中部署的话,前面要加上子目录的路径。

注意事项

  • 如果发现无法正常使用,检查 PHP 禁用函数,不能禁用execpassthruscandir
  • 如果排除了上面这个问题,仍然不能显示文件,请检查你的站点根目录中是否有创建站点时自动生成的index.html之类的默认首页文件,请删除。
  • 在 _h5ai 中不会显示任何以.开头的隐藏文件/文件夹,也不会显示任何以_h5ai开头的文件/文件夹。
    你也可以用正则表达式自定义不显示的文件/文件夹,这里在后面会讲,这可以用来保护隐私。
  • 不要使用目录别名(例如 Apache / nginx 的 alias),这会使 h5ai 无法得到目录下文件的地址。
  • 如果网页中的图标没有显示,说明你需要向服务器中添加SVG MIME-type
  • 在 Ubuntu 上你可能需要额外安装PHP JSON支持包。

配置文件

h5ai 的配置文件位于/_h5ai/private/conf/options.json

此处只讲一些比较重要的常用配置,如果你想折腾其他设置的话,我相信你也一定能看懂配置文件里简单的鸟语(。

配置仅作解释,请勿照抄,根据自己实际需求更改true或者false等。

浏览相关

"view": {
    //为true的话,用1024进制来计算文件大小
    "binaryPrefix": true,
    ...
    //隐藏名字与这些正则表达式匹配的文件/文件夹
    "hidden": ["^\\.", "^_h5ai"],
    ...
    //如果目录里存在这些文件之一则不应用 _h5ai 来管理文件
    //(即用于点击目录直接打开网站之类的)
    "unmanaged": ["index.html", "index.htm", "index.php"],
    //是否在新窗口中打开上面提到的这种目录
    "unmanagedInNewWindow": false
},

自定义页头页脚

"custom": {
    "enabled": true
},

开启之后,可以自定义页头页脚。

当你打开一个目录后,_h5ai 会检测当前目录中是否含有_h5ai.header.html_h5ai.footer.html,如果有的话则会当做页头/页脚显示。

如果找不到这两个文件,则会在当前目录或者依次去父级目录中寻找_h5ai.headers.html_h5ai.footers.html这两个文件,如果有的话,则会当做页头/页脚显示。

这个机制很简单,其实就是带s的就可以让本目录及子目录都显示这个页头/页脚,但是不带s的具有更高的优先级。

开启批量下载

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

开启文件地址二维码

"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
},
我的文章对您有帮助吗?
我很可爱 请给我钱
扫一扫拿红包 → 扫商家收款码 → 花呗支付比红包多1分钱的金额
既可免费赞赏,又可完成支付宝支付任务!
Last modification:March 1st, 2018 at 09:44 pm
If you think my article is useful to you, please feel free to appreciate

Leave a Comment

18 comments

  1. 666  Windows 7 x64 Edition(Windows 7 x64 Edition) / Google Chrome 65.0.3325.146(Google Chrome 65.0.3325.146)

    h5ai 无法播放视频怎么解决

    1. 神代綺凜  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 66.0.3359.139(Google Chrome 66.0.3359.139)
      @666

      呃,这个不清楚,我没有用h5ai在线播放过视频

  2. sjyt08  Mac OS X 10.12.5(Mac OS X 10.12.5) / Google Chrome 63.0.3239.132(Google Chrome 63.0.3239.132)

    你好,按照你的教程,目录下的文件显示不了。求帮忙 ,谢谢

    1. 神代綺凜  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 63.0.3239.132(Google Chrome 63.0.3239.132)
      @sjyt08

      唯一要注意的是_h5ai文件夹应当与你要显示的文件同级,而不是把文件放到这个文件夹里

      1. sjyt08  Mac OS X 10.12.5(Mac OS X 10.12.5) / Google Chrome 63.0.3239.132(Google Chrome 63.0.3239.132)
        @神代綺凜

        files.yanxi.pro

      2. sjyt08  Mac OS X 10.12.5(Mac OS X 10.12.5) / Google Chrome 63.0.3239.132(Google Chrome 63.0.3239.132)
        @神代綺凜

        现在我的目录结构是这样的。您看看。
        .
        ├── a
        │   └── 1
        ├── _h5ai
        │   ├── CHANGELOG.md
        │   ├── private
        │   ├── public
        │   └── README.md
        ├── h5ai-0.29.0.zip
        ├── ss_software
        │   ├── 0
        │   ├── shadowsocks-nightly-4.4.4.apk
        │   ├── ShadowsocksX-2.6.3.dmg
        │   ├── ss-3.4.3.zip
        │   ├── ssr-3.3.5.apk
        │   ├── ssr-4.1.4-win.7z
        │   └── SSX-NG-R8.dmg
        └── \345\220\273\345\210\253(\345\233\275).mp3

    2. sjyt08  Mac OS X 10.12.5(Mac OS X 10.12.5) / Google Chrome 63.0.3239.132(Google Chrome 63.0.3239.132)
      @sjyt08

      php 5.6

      1. Moo  Mac OS X 10.13(Mac OS X 10.13) / Firefox 59.0(Firefox 59.0)
        @sjyt08

        @sjyt08 好想问一问你现在那个网址的 File Manager 是什么 webapp 来的 _(:зゝ∠)_

        1. 神代綺凜  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 64.0.3282.140(Google Chrome 64.0.3282.140)
          1. Moo  Mac OS X 10.13(Mac OS X 10.13) / Firefox 59.0(Firefox 59.0)
            @神代綺凜

            啊!!O(∩_∩)O谢谢 好简单粗暴的名字

            1. 神代綺凜  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 64.0.3282.140(Google Chrome 64.0.3282.140)
              @Moo

              是呀,这个APP的UI也很好看,和私有云比较贴近,比较适合自用

      2. 神代綺凜  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 63.0.3239.132(Google Chrome 63.0.3239.132)
        @sjyt08

        或者干脆直接把整个网站目录递归改成755所属www(可能不是www,总之是你web网站所属的那个组)

        1. sjyt08  Mac OS X 10.12.5(Mac OS X 10.12.5) / Google Chrome 63.0.3239.132(Google Chrome 63.0.3239.132)
          @神代綺凜

          /www/wwwroot/files.yanxi.pro
          drwxr-xr-x 8 www www 4096 Jan 22 15:08 www
          drwxr-xr-x 5 www www 4096 Jan 23 00:51 wwwroot
          drwxr-xr-x 5 www www 4096 Jan 23 00:57 files.yanxi.pro
          不知道 是不是我的NGINX 配制文件有问题?

          1. 神代綺凜  Mac OS X(Mac OS X) / Safari(Safari)
            @sjyt08

            注意事项最后一条有检查么

          2. 神代綺凜  Mac OS X(Mac OS X) / Safari(Safari)
            @sjyt08

            那真不太清楚了。。。

      3. 神代綺凜  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 63.0.3239.132(Google Chrome 63.0.3239.132)
        @sjyt08

        呃,你看看你的目录权限和所属组,是否是755以及web服务器的组

  3. BT  Windows 7 x64 Edition(Windows 7 x64 Edition) / Google Chrome 54.0.2840.59(Google Chrome 54.0.2840.59)

    SSH怎么修改修改默认文档?能不能再详细一下

    1. 神代綺凜  Mac OS X(Mac OS X) / Safari(Safari)
      @BT

      根据文章里面说的按照对应的服务器程序修改对应的配置文件,文件的具体默认位置可以百度,如果你用的是一键lnmp来添加网站之类的就要找找vhost文件夹(一般是叫这个)里面对应网站的配置,然后用vi或者nano之类的文本编辑器修改就行