Nginx目录浏览并进行美化

Nginx Directory Browsing Configuration Summary

Nginx is a high-performance HTTP and reverse proxy web server that does not allow directory listing by default. To enable this feature, specific configurations are required, commonly used for file download purposes within an internal network.

Configuring Directory Browsing

To enable directory browsing in Nginx, the following configuration can be added to the server block:

        server {    
            listen       80;    
            index index.html index.htm;    
            server_name dl.qq52o.me;    
            root /home/lufei/downloads;    
            autoindex on;  # Enables directory browsing    
            autoindex_localtime on;  # Displays local time    
            autoindex_format html;  # Output format options: html, xml, json, jsonp    
            autoindex_exact_size off;  # Shows exact size or human-readable size
        }
    

After configuring, a restart of Nginx is required. Accessing the configured server_name will display the directory browsing interface.

Beautifying Directory Browsing

The default appearance of Nginx's directory browsing is rather plain. To improve it, the ngx-fancyindex third-party module can be installed. For Ubuntu systems with Nginx installed via apt, the following command can be used:

sudo apt install libnginx-mod-http-fancyindex

Upon installation, enable fancyindex by updating the configuration:

        server {    
            listen       80;    
            index index.html index.htm;    
            server_name dl.qq52o.me;    
            root /home/lufei/downloads;    
            fancyindex on;            # Enables fancyindex    
            fancyindex_exact_size off; # Disables file size display    
            fancyindex_localtime on;  # Enables time display    
            fancyindex_name_length 255; # Maximum name length    
            fancyindex_time_format "%Y-%m-%d %H:%M:%S";
        }
    

After restarting Nginx, the improved interface will be visible. For further customization, a Material Design theme can be applied by cloning the theme repository and updating the Nginx configuration with theme-specific settings.

Applying a Theme

To apply a theme, the following commands can be used:

        cd /home/lufei/downloads
        git clone https://github.com/fraoustin/Nginx-Fancyindex-Theme.git fancyindex
    

Then, modify the Nginx configuration to include the theme:

        fancyindex_header "/fancyindex/header.html";
        fancyindex_footer "/fancyindex/footer.html";
        fancyindex_ignore "fancyindex";
    

A final restart of Nginx will reveal the themed directory browsing interface.