Nginx directory browsing and beautification

Original link: https://qq52o.me/2816.html

nginx-logo.png

As a high-performance HTTP and reverse proxy web server, Nginx does not allow listing the entire directory of the site by default. If you need to enable it, you can enable this function through configuration.

This function is generally used to provide functions such as downloading files in the intranet.

Configure Directory Browsing

 server { listen 80; index index.html index.htm; server_name dl.qq52o.me; root /home/lufei/downloads; autoindex on; # 开启目录浏览功能autoindex_localtime on; # 显示本地时间autoindex_format html; # 输入格式,可选项为html、xml、json、jsonp autoindex_exact_size off; # 显示精确字节大小还是显示友好可读的大小}

After the configuration is complete, restart Nginx and visit the configured server_name to see the effect. The effect is as follows:

nginx-autoindex.png

Beautify directory browsing

The directory browsing function that comes with Nginx does not look so beautiful, you can use the third-party module ngx-fancyindex plug-in to beautify the directory browsing function.

I use ubuntu , and Nginx is also installed through apt

 sudo apt install libnginx-mod-http-fancyindex

So I used this command to install it here, and other systems can refer to README for installation.

After the installation is complete, enable fancyindex and modify the configuration file just now

 server { listen 80; index index.html index.htm; server_name dl.qq52o.me; root /home/lufei/downloads; fancyindex on; # 开启索引功能fancyindex_exact_size off; # 关闭文件大小fancyindex_localtime on; #开启时间显示fancyindex_name_length 255; #最大名字长度fancyindex_time_format "%Y-%m-%d %H:%M:%S"; }

You can see the effect after restarting.

I chose a responsive theme that uses Material Design elements. Theme address: https://github.com/fraoustin/Nginx-Fancyindex-Theme

To pull the theme code, it needs to be placed in the directory where directory browsing is enabled:

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

Then modify the configuration and add the theme configuration:

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

Restart Nginx again, and you can see the final effect:

nginx-fancyindex.png

This article is transferred from: https://qq52o.me/2816.html
This site is only for collection, and the copyright belongs to the original author.