Nginx browsing directory configuration and beautification

Time:2021-9-7

In the project, there is a function that needs to browse the directory of the server in the browser page. The server uses nginx, and nginx provides the correspondingngx_http_autoindex_moduleModule, which provides the functions we want.

Nginx ngx_ http_ autoindex_ Module module

The module has the following commands:

Nginx browsing directory configuration and beautification

Browse directory basic configuration

According to the above command, a simple nginx browsing directory is configured as follows:

location /download
{
    root /home/map/www/; # Specify the path where the directory is located
    autoindex on; # Open directory browsing
    autoindex_ format html; # Display the directory in the browser in HTML style
    autoindex_ exact_ size off; # After switching to off, the file size is displayed in a readable manner, in KB, MB or GB
    autoindex_ localtime on; # The time displayed is the file time of the server
}

You can see that the display information in the page is consistent with the desired configuration, but there is also a problem that the Chinese file name is displayed in garbled code.

Chinese file name garbled

To solve the above problems, you only need to add the following configurations:

charset utf-8,gbk; # Display Chinese file name

The complete configuration is as follows:

location /download
{
    root /home/map/www/; # Specify the path where the directory is located
    autoindex on; # Open directory browsing
    autoindex_ format html; # Display the directory in the browser in HTML style
    autoindex_ exact_ size off; # After switching to off, the file size is displayed in a readable manner, in KB, MB or GB
    autoindex_ localtime on; # The time displayed is the file time of the server
    charset utf-8,gbk; # Display Chinese file name
}

The first line of the file list is a directory. Click it to display it as follows:
Nginx browsing directory configuration and beautification

Do students with a little aesthetic feel that this display is not beautiful? Yes, it’s not beautiful. It feels messy. Let’s solve this problem.

Directory browsing beautification

We use the open source fancy index to beautify the page, GitHubLook here

Before beautification, the nginx fancyindex module needs to be installed. Install the module as follows.

Check which modules are currently compiled by nginx

To see which modules nginx compiled, execute the following command:2>&1 nginx -V | tr ' ' 'n'|grep module, as follows:
Nginx browsing directory configuration and beautification

View the complete compilation parameters:nginx -V, as follows:

Nginx browsing directory configuration and beautification

The contents are as follows:

nginx version: nginx/1.13.8
built by clang 9.0.0 (clang-900.0.39.2)
built with OpenSSL 1.1.0f  25 May 2017
TLS SNI support enabled
configure arguments: --prefix=/usr/local/nginx --with-http_ssl_module --with-pcre --sbin-path=/usr/local/nginx/bin/nginx --with-cc-opt='-I/usr/local/opt/pcre/include -I/usr/local/opt/[email protected]/include' --with-ld-opt='-L/usr/local/opt/pcre/lib -L/usr/local/opt/[email protected]/lib' --conf-path=/usr/local/etc/nginx/nginx.conf --pid-path=/usr/local/var/run/nginx.pid --lock-path=/usr/local/var/run/nginx.lock --http-client-body-temp-path=/usr/local/var/run/nginx/client_body_temp --http-proxy-temp-path=/usr/local/var/run/nginx/proxy_temp --http-fastcgi-temp-path=/usr/local/var/run/nginx/fastcgi_temp --http-uwsgi-temp-path=/usr/local/var/run/nginx/uwsgi_temp --http-scgi-temp-path=/usr/local/var/run/nginx/scgi_temp --http-log-path=/usr/local/var/log/nginx/access.log --error-log-path=/usr/local/var/log/nginx/error.log --with-http_gzip_static_module --with-http_v2_module

Add nginx module for dynamic compilation

  1. Download the latest source code from GitHub:ngx-fancyindex
  2. After downloading the source code, unzip it, put it into the nginx source code directory (/ usr / local / nginx), execute the following code and compile it:

    ./configure –prefix=/usr/local/nginx –with-http_ssl_module –with-pcre –sbin-path=/usr/local/nginx/bin/nginx –with-cc-opt=’-I/usr/local/opt/pcre/include -I/usr/local/opt/[email protected]/include’ –with-ld-opt=’-L/usr/local/opt/pcre/lib -L/usr/local/opt/[email protected]/lib’ –conf-path=/usr/local/etc/nginx/nginx.conf –pid-path=/usr/local/var/run/nginx.pid –lock-path=/usr/local/var/run/nginx.lock –http-client-body-temp-path=/usr/local/var/run/nginx/client_body_temp –http-proxy-temp-path=/usr/local/var/run/nginx/proxy_temp –http-fastcgi-temp-path=/usr/local/var/run/nginx/fastcgi_temp –http-uwsgi-temp-path=/usr/local/var/run/nginx/uwsgi_temp –http-scgi-temp-path=/usr/local/var/run/nginx/scgi_temp –http-log-path=/usr/local/var/log/nginx/access.log –error-log-path=/usr/local/var/log/nginx/error.log –with-http_gzip_static_module –with-http_v2_module –add-module=ngx-fancyindex-0.4.2

  3. make < font color = “red” > don’t make install here</ font>
  4. Enter the nginx source directoryobjsDirectory, executing2>&1 ./nginx -V | tr ' ' 'n'|grep fan
  5. useobjsThe nginx file in the directory can replace the nginx file under / usr / bin

Select the fancy index theme

Two open source themes are found in GitHub:

Just choose one you like. Here I choose the first one.

However, in the actual use process, the first code has some problems. I have made some modifications. If you want to use it directly, you can use this:https://github.com/lanffy/Nginx-Fancyindex-Theme

Fancy index configuration

  1. Enter the web directory of nginx installation and executenginx -V, outputconfigure arguments: --prefix=/usr/local/nginx, that’s the directory
  2. git clone https://github.com/lanffy/Nginx-Fancyindex-Theme.git
  3. Add the fancy index configuration in the nginx location module, as follows:

    location /download
    {

    include /usr/local/nginx/html/Nginx-Fancyindex-Theme/fancyindex.conf; #  Directory beautification configuration
    root /home/map/www/; # Specify the path where the directory is located
    autoindex on; # Open directory browsing
    autoindex_ format html; # Display the directory in the browser in HTML style
    autoindex_ exact_ size off; # After switching to off, the file size is displayed in a readable manner, in KB, MB or GB
    autoindex_ localtime on; # The time displayed is the file time of the server
    charset utf-8,gbk; # Display Chinese file name

    }

  4. Just restart nginx

At this step, the configuration is completed. The final page is shown as follows:

Nginx browsing directory configuration and beautification

There are two styles of this theme. The above one is light style and the following is dark style:

Nginx browsing directory configuration and beautification

Style in/usr/local/nginx/html/Nginx-Fancyindex-Theme/fancyindex.conf;Modify in the configuration file.

reference material

  1. Configure the directory browsing function of nginx
  2. Nginx-Fancyindex-Theme