No Comments

强大的目录列表——h5ai

最近购入的大硬盘VPS用来共享文件，不过需要一个Web端GUI，于是就盯上了这个强大的目录列表程序——h5ai。

功能

当前版本0.29.0还算可以，功能不错

  • 排序
  • 查看模式
  • 多国语言
  • 访问足迹
  • 文件夹树状图
  • 自定义页眉+页脚
  • 过滤器+搜索
  • 文件夹大小
  • 自动刷新
  • 压缩打包下载
  • 二维码
  • 缩略图
  • 图像+文本+音频+视频的预览

安装

进入发布网站https://larsjung.de/h5ai/，把最新的程序包下载到服务器上并解压。注意，_h5ai文件夹要放在你需要共享的文件夹同目录下。

就像这样：

根目录
  ├ _h5ai
  ├ 你的文件
  └ 你的文件夹

或

根目录
  └ 子目录xN
    ├ _h5ai
    ├ 你的共享文件
    └ 你的共享文件夹

然后访问http(s)://yourdomain.xxx/_h5ai/public/index.php查看是否安装成功。（刚安装为空密码）

若把h5ai安装到子目录，那么上面的网址就要更改为子目录。

检测页面说明

  1. h5ai version
    检测源代码版本，这个基本没用
  2. Index file found
    检测文件完整性（是否存在index.php）
  3. Options parsable
    检测设置是否正确，较重要
  4. Types parsable
    检测类型设置是否正确，较重要
  5. Server software
    检测服务器Web解析器是否支持，目前官方宣称支持4种：Nginx、Apache、Lighttpd、cherokee
  6. PHP version
    检测PHP版本，h5ai仅支持PHP 5.5及以后的版本
  7. PHP arch
    检测是x86还是x64，x86对显示文件的大小有限制，较重要
  8. Public Cache directory
    检测Cache目录是否可写
  9. Private Cache directory
    检测Cache目录是否可写
  10. Image thumbs
    检测是否支持JPEG图片预览，即检测PHP GD扩展是否安装
  11. Use EXIF thumbs
    检测是否支持EXIF信息（照片里面对拍摄参数的存储信息）读取，即检测PHP EXIF扩展是否安装
  12. Movie thumbs
    检测是否支持视频预览，即检测avconv或者ffmpeg是否安装
  13. PDF thumbs
    检测是否支持PDF预览，即检测convert或者gm是否安装
  14. Shell tar
    检测是否支持tar压缩，即检测tar命令是否安装
  15. Shell zip
    检测是否支持zip压缩，即检测zip命令是否安装
  16. Shell du
    检测是否支持文件大小查看，即检测du命令是否安装

注意

  1. 要设置禁止访问页面或目录，以保证服务器安全无虞。
  2. 官方网站建议开启exec和passthru函数，但本人不推荐。h5ai使用这两个函数是为了实现打包下载和获取文件使用空间，如不需要应该要禁用这两个高危函数。

使用

将/_h5ai/public/index.php添加到默认主页里面

Nginx
index index.html index.php /_h5ai/public/index.php;//修改index一行
Apache
DirectoryIndex index.html index.php /_h5ai/public/index.php//修改DirectoryIndex一行
Lighttpd
index-file.names += ("index.html", "index.php", "/_h5ai/public/index.php")

配置

用编辑器编辑_h5ai/private/conf/options.json，以下是文件注释的翻译和解释。

/* h5ai v0.29.0 - https://larsjung.de/h5ai/ */
{
    /*
    密码的SHA512，预设值为空
    建议单独写一个php的加密脚本 echo hash("sha512", "你的密码");
    $$不推荐原版注释里推荐的加密网站，会默认记录你的密码$$
    */
    "passhash": "cf83e1357eefb8bdf1542850d66d8007d620e4050b5715dc83f4a921d36ce9ce47d0d13c5d85f2b0ff8318d2877eec2f63b931bd47417a81a538327af927da3e",

    /*
    资源
    附加于所有页面的脚本和CSS等，路径不要使用http协议头开头，可以相对于h5ai安装目录_h5ai/public/ext/（不检查是否存在）
    - scripts：字符串数组
    - styles：字符串数组
    */
    "resources": {
        "scripts": [],
        "styles": [
            "//fonts.googleapis.com/css?family=Ubuntu:300,400,700%7CUbuntu+Mono:400,700"
        ]
    },

    /*
    一般视图选项。
     - binaryPrefix：布尔值，设置为true在格式化文件大小时使用KiB而不是KB（参阅http://en.wikipedia.org/wiki/Binary_prefix）
     - disableSidebar：布尔值，隐藏边栏和切换按钮
     - fallbackMode：布尔型，服务于后备模式
     - fastBrowsing：布尔型，使用History API（如果可用）（无需重新加载整个页面）
     - fonts：字符串数组，常规上下文中使用的字体
     - fontsMono：字符串数组，在monopspace化的上下文中使用的字体
     - hidden：字符串数组，不要列出匹配这些正则表达式匹配的项目
     - hideFolders：布尔值，隐藏主视图中的所有文件夹
     - hideIf403：布尔值，隐藏服务器无法读取的文件和文件夹
     - hideParentFolder：布尔值，在主视图中隐藏父文件夹链接
     - maxIconSize：数字，主视图中图标的最大尺寸
     - modes：字符串数组，[“细节”，“网格”，“图标”的子集]，第一个值表示默认视图模式。如果只有一个值，给出的视图模式是固定的，并且选择器按钮被隐藏。用户选择的视图模式也保存在现代浏览器的本地，所以它会保存好长时间。
     - modeToggle：布尔值，在工具栏中显示视图模式切换，或“next”
     - setParentFolderLabels：布尔值，将父文件夹标签设置为实际文件夹名称
     - sizes：数组数组
        第一个值表示默认视图大小。如果只有一个值，给出的视图大小是固定的，并且选择器按钮被隐藏。用户选择的视图大小也存储在现代浏览器的本地所以它会保存很长时间。
     - theme：字符串，“_h5ai/images/themes”中文件夹的名称之一，默认为“Normal”
     - unmanaged：字符串数组，不要显示包含某个文件（名）的文件夹
     - unmanagedInNewWindow：布尔值，在新窗口/选项卡中打开非托管链接
    */
    "view": {
        "binaryPrefix": false,
        "disableSidebar": false,
        "fallbackMode": false,
        "fastBrowsing": true,
        "fonts": ["Ubuntu", "Roboto", "Helvetica", "Arial", "sans-serif"],
        "fontsMono": ["Ubuntu Mono", "Monaco", "Lucida Sans Typewriter", "monospace"],
        "hidden": ["^\\.", "^_h5ai"],
        "hideFolders": false,
        "hideIf403": true,
        "hideParentFolder": false,
        "maxIconSize": 40,
        "modes": ["details", "grid", "icons"],
        "modeToggle": false,
        "setParentFolderLabels": true,
        "sizes": [20, 40, 60, 80, 100, 140, 180, 220, 260, 300],
        "theme": "comity",
        "unmanaged": ["index.html", "index.htm", "index.php"],
        "unmanagedInNewWindow": false
    },

    /***扩展（按字母顺序）***/

    /*
     监视并更新当前文件夹内容。
     - interval：数值，更新时间间隔，以毫秒为单位，至少1000
    */
    "autorefresh": {
        "enabled": false,
        "interval": 5000
    },

    /*
    显示可点击的文件目录树状图
    */
    "crumb": {
        "enabled": true
    },

     /*
    允许自定义页眉和页脚文件。
     首先检查当前目录中的文件“_h5ai.header.html”和“_h5ai.footer.html”。如果不成功，它会检查所有父目录（从当前目录开始）文件“_h5ai.headers.html”和“_h5ai.footers.html”。
     注意不同的文件名：“header”（仅当前） - “headers”（当前和子目录）！
     该文件的内容将放置在主目录上方/下方的div标签内。
     如果文件的扩展名是“.md”而不是“.html”，则其内容将以Markdown解释。
    */
    "custom": {
        "enabled": true
    },

    /*
    启用所选条目的打包下载。
     要选择文件，需要启用“select”扩展（在本设置下面）。
     - type：字符串，“php-tar”，“shell-tar”或“shell-zip”
     - packageName：字符串，下载包的基本名，当前文件名或文件夹名为空
     - alwaysVisible：布尔值，始终显示下载按钮（默认为下载当前文件夹）
    */
    "download": {
        "enabled": false,
        "type": "php-tar",
        "packageName": null,
        "alwaysVisible": false
    },

    /*
    允许过滤当前文件夹中显示的文件和文件夹。
     也检查子字符串。如果启用了高级功能，它将检查条目的顺序，即“ab”匹配“ab”，“axb”，“xaxbx”而不是“ba”。 空间分离序列得到OR-ed。 如果你用“re：”作为前缀搜索将被视为JavaScript常规表达式。
     - advanced：布尔值，使用高级模式解析
     - debounceTime：数字，防止等待时间以毫秒为单位
     - ignorecase：布尔值，忽略大小写
    */
    "filter": {
        "enabled": false,
        "advanced": true,
        "debounceTime": 100,
        "ignorecase": true
    },

    /*
    计算文件夹的大小。
     这个操作很慢。两者的计算尺寸略有不同。类型若是“php”仅添加文件大小，“shell-du”还会添加实际文件夹文件的大小。
    */
    "foldersize": {
        "enabled": false,
        "type": "php"
    },

    /*
    Google Analytics
    - id: 字符串
    */
    "google-analytics-ua": {
        "enabled": false,
        "id": "UA-000000-0"
    },

    /*
    启用通用信息栏。
     - show：布尔
     - qrcode：布尔值，显示二维码
     - qrColor：字符串，二维码填充颜色
    */
    "info": {
        "enabled": false,
        "show": false,
        "qrcode": true,
        "qrFill": "#999",
        "qrBack": "#fff"
    },

    /*
    本地化，例如“en”，“de”等 - 请参阅“_h5ai / conf / l10n”文件夹可能的值。根据您的需求进行调整。默认为“en”。
     - lang：字符串，默认语言
     - useBroserLang：布尔型，尝试使用浏览器语言
    */
    "l10n": {
        "enabled": true,
        "lang": "en",
        "useBrowserLang": true
    },

    /*
    添加Piwik跟踪器JavaScript代码。
     - baseURL：字符串，不包括协议，例如“mydomain.tld/ piwik”
     - idSite：号码
    */
    "piwik-analytics": {
        "enabled": false,
        "baseURL": "some/url",
        "idSite": 1
    },

    /*
    点击播放音频预览。
     - autoplay
     - types：字符串数组
    */
    "preview-aud": {
        "enabled": true,
        "autoplay": true,
        "types": ["aud"]
    },

    /*
    单击时显示图像预览。
     - types：字符串数组
     - size：数量，样本量或原始尺寸为false
    */
    "preview-img": {
        "enabled": true,
        "size": false,
        "types": ["img", "img-bmp", "img-gif", "img-ico", "img-jpg", "img-png", "img-raw", "img-svg"]
    },

    /*
    单击时显示文本文件预览。
     可用的样式是：
       0：浮动文字
       1：固定宽度文本
       2：markdown
       3：语法高亮
     - styles：将字符串转换为int，将类型映射到样式
    */
    "preview-txt": {
        "enabled": true,
        "styles": {
            "txt": 1,
            "txt-authors": 1,
            "txt-c": 3,
            "txt-cpp": 3,
            "txt-css": 3,
            "txt-diff": 1,
            "txt-go": 3,
            "txt-h": 3,
            "txt-hpp": 3,
            "txt-install": 1,
            "txt-js": 3,
            "txt-json": 3,
            "txt-less": 3,
            "txt-license": 1,
            "txt-log": 1,
            "txt-makefile": 1,
            "txt-md": 2,
            "txt-py": 3,
            "txt-rb": 3,
            "txt-readme": 1,
            "txt-rtf": 1,
            "txt-rust": 3,
            "txt-script": 3,
            "txt-xml": 1
        }
    },

    /*
    点击播放视频预览。
     - autoplay
     - types：字符串数组
    */
    "preview-vid": {
        "enabled": true,
        "autoplay": true,
        "types": ["vid-avi", "vid-flv", "vid-mkv", "vid-mov", "vid-mp4", "vid-mpg", "vid-webm"]
    },

    /*
    允许在当前文件夹内和下面搜索文件和文件夹。
     检查子字符串。
     如果启用了高级功能，它将检查条目的正确顺序，即“ab”匹配“ab”，“axb”，“xaxbx”而不是“ba”。 空间分离序列得到OR-ed。如果你用“re：”作为前缀搜索将被视为JavaScript常规表达式。
     - advanced：布尔值，使用高级模式解析
     - debounceTime：数字，防止等待时间以毫秒为单位
     - ignorecase：布尔值，忽略大小写
    */
    "search": {
        "enabled": false,
        "advanced": true,
        "debounceTime": 300,
        "ignorecase": true
    },

    /*
    使条目可选。
     目前只用来打包下载。
     - clickndrag：布尔值，允许左键拖动选择
     - checkboxes：布尔值，显示鼠标悬停在项目上的复选框
    */
    "select": {
        "enabled": false,
        "clickndrag": true,
        "checkboxes": true
    },

    /*
    默认排序顺序。
     “column”和“reverse”在本地存储。
     - column：编号，0代表“名称”，1代表“日期”，2代表“大小”
     - reverse：布尔型，false为升序，true为降序
     - ignorecase：布尔型，忽略大小写
     - natural：布尔值，使用自然排序顺序
     - folders：数字，放置文件夹的位置，0代表“顶部”，1代表“就地”，2代表“底部”
    */
    "sort": {
        "enabled": true,
        "column": 0,
        "reverse": false,
        "ignorecase": true,
        "natural": true,
        "folders": 0
    },

    /*
    显示图像文件的缩略图。需要“/_h5ai/cache”文件夹
     可写入Web服务器。
     - img：字符串数组
     - mov：字符串数组
     - doc：字符串数组
     - delay：数字，延迟“dom-ready”之后的毫秒，然后开始处理缩略图请求
     - size：数值，生成的缩略图像素大小
     - exif：布尔值，如果可能的话，使用包含EXIF的缩略图
     - chunksize：整数，每个请求的缩略图数
    */
    "thumbnails": {
        "enabled": true,
        "img": ["img-bmp", "img-gif", "img-ico", "img-jpg", "img-png"],
        "mov": ["vid-avi", "vid-flv", "vid-mkv", "vid-mov", "vid-mp4", "vid-mpg", "vid-webm"],
        "doc": ["x-pdf", "x-ps"],
        "delay": 1,
        "size": 240,
        "exif": false,
        "chunksize": 20
    },

    /*
    用当前的缩略图名称替换窗口标题。
    */
    "title": {
        "enabled": true
    },

    /*
    显示文件夹树。
     请注意，这可能会影响性能。
     - show：布尔，首次可见的初次用户
     - maxSubfolders：数字，树中显示的最大子文件夹数
     - naturalSort：布尔值，对文件夹使用自然排序顺序
     - ignorecase：布尔值，排序忽略大小写
    */
    "tree": {
        "enabled": true,
        "show": true,
        "maxSubfolders": 50,
        "naturalSort": true,
        "ignorecase": true
    }
}

顺便说一句

h5ai的版权链接（就文件列表上面的powered by h5ai）是放在js脚本里面的，并且有换行标签不能直接搜索。其实只要搜索powered就可以找到并删除了

最后更新于 2018-04-15 11:12:06 并被添加「技巧 h5ai 文件」标签，已有 6908 人阅读过。 

本文距离最后一次更新已超过180天，部分内容可能会随着时间的推移变更或失效。

相关文章

此处无声胜有声