Installing and Configuring h5ai Directory Listing in LNMP Environment

h5ai is a directory listing program developed in PHP. Similar to previously introduced tools like Fdscript and PHP Directory Lister, h5ai offers richer functionality based on practical experience. Consequently, I have switched my software library to h5ai and am sharing the configuration process.

Before starting, ensure you have a PHP environment installed. OneinStack is recommended. If you are a beginner, installing the Baota panel is also an option.

Download

Official download address: h5ai-0.29.0.zip Software library download: h5ai-0.29.0.zip

# Execute in the site root directory
wget http://soft.xiaoz.org/website/h5ai-0.29.0.zip
unzip h5ai-0.29.0.zip

After downloading, unzip the files to the website root directory. The directory structure will be as follows:

DOC_ROOT
 ├─ _h5ai
 ├─ your files
 └─ and folders

Nginx Configuration

Next, visit http://YOUR-DOMAIN.TLD/_h5ai/public/index.php to test if it opens. If successful, you should see the following interface.

If you have installed Oneinstack, the configuration file is typically located at /usr/local/nginx/conf/vhost/domain.com.conf. Modify this file to set /_h5ai/public/index.php as the default homepage:

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

After modification, remember to reload Nginx (service nginx reload). If all goes well, visiting your domain again will display the result.

Change Default Language

h5ai supports multiple languages, but the default display is English. You can modify the configuration file _h5ai/private/conf/options.json to change the language.

Change the following:

"l10n": {
        "enabled": true,
        "lang": "en",
        "useBrowserLang": true
    },

Modify en to zh-cn so the default interface becomes Chinese:

"l10n": {
        "enabled": true,
        "lang": "zh-cn",
        "useBrowserLang": true
    },

Enable Search Function

Still modifying the options.json file, change the search settings:

Change the following:

"search": {
        "enabled": false,
        "advanced": true,
        "debounceTime": 300,
        "ignorecase": true
    },

Change false to true:

"search": {
        "enabled": true,
        "advanced": true,
        "debounceTime": 300,
        "ignorecase": true
    },

Display QR Code

To facilitate downloads via mobile apps, you can enable the QR code display feature. Scan the code directly with your phone to download. Modify the options.json configuration file:

Change the following:

"info": {
        "enabled": false,
        "show": false,
        "qrcode": true,
        "qrFill": "#999",
        "qrBack": "#fff"
    },

Change false to true:

"info": {
        "enabled": true,
        "show": true,
        "qrcode": true,
        "qrFill": "#999",
        "qrBack": "#fff"
    },

Replace Google Fonts

You may notice that h5ai opens very slowly because it loads Google Fonts, which are often unstable within the Great Firewall. It is better to replace them. Modify the options.json configuration file to replace fonts.googleapis.com with fonts.lug.ustc.edu.cn:

"resources": {
        "scripts": [],
        "styles": [
            "//fonts.lug.ustc.edu.cn/css?family=Ubuntu:300,400,700%7CUbuntu+Mono:400,700"
        ]
    },

Summary

h5ai is open-source code and provides many more configuration options. It is feature-rich. After trying several directory listing programs, h5ai is currently the most satisfactory one, offering all the necessary functions. Give it a try.

h5ai official website: https://larsjung.de/h5ai/ DEMO: http://soft.xiaoz.org/