Nginx瀏覽目錄配置及美化

在項目中有一個功能須要在瀏覽器頁面中瀏覽服務器的目錄。服務器使用Nginx，而Nginx提供了相應的ngx_http_autoindex_module 模塊，該模塊提供了咱們想要的功能。

Nginx ngx_http_autoindex_module 模塊

該模塊有如下幾個命令：

命令	默認值	值域	做用域	EG
autoindex	off	on：開啓目錄瀏覽； off：關閉目錄瀏覽	http, server, location	autoindex on;打開目錄瀏覽功能
autoindex_format	html	html、xml、json、jsonp 分別用這幾個風格展現目錄	http, server, location	autoindex_format html; 以網頁的風格展現目錄內容。該屬性在1.7.9及以上適用
autoindex_exact_size	on	on：展現文件字節數； off：以可讀的方式顯示文件大小	http, server, location	autoindex_exact_size off; 以可讀的方式顯示文件大小，單位爲 KB、MB 或者 GB，autoindex_format爲html時有效
autoindex_localtime	off	on、off：是否以服務器的文件時間做爲顯示的時間	http, server, location	autoindex_localtime on; 以服務器的文件時間做爲顯示的時間,autoindex_format爲html時有效

瀏覽目錄基本配置

根據上面的命令，一個簡單的Nginx瀏覽目錄的配置以下：

location /download
{
    root /home/map/www/; #指定目錄所在路徑
    autoindex on; #開啓目錄瀏覽
    autoindex_format html; #以html風格將目錄展現在瀏覽器中
    autoindex_exact_size off; #切換爲 off 後，以可讀的方式顯示文件大小，單位爲 KB、MB 或者 GB
    autoindex_localtime on; #以服務器的文件時間做爲顯示的時間
}

頁面展現以下：

能夠看到頁面中的展現信息和配置想要的一致，但還有個問題是中文文件名顯示的時候亂碼。

中文文件名亂碼

要解決上面的問題，只須要添加以下配置便可：

charset utf-8,gbk; #展現中文文件名

完整配置以下：

location /download
{
    root /home/map/www/; #指定目錄所在路徑
    autoindex on; #開啓目錄瀏覽
    autoindex_format html; #以html風格將目錄展現在瀏覽器中
    autoindex_exact_size off; #切換爲 off 後，以可讀的方式顯示文件大小，單位爲 KB、MB 或者 GB
    autoindex_localtime on; #以服務器的文件時間做爲顯示的時間
    charset utf-8,gbk; #展現中文文件名
}

頁面展現以下：

文件列表的第一行是一個目錄，點進去，展現以下：

稍微有一點審美的同窗是否是以爲這樣展現不太美觀呢？是的，很不美觀，感受亂糟糟的。下面就來解決這個問題。

目錄瀏覽美化

咱們使用開源的Fancy Index來美化頁面，Github看這裏

在美化以前，須要安裝Nginx FancyIndex模塊。安裝模塊步驟以下。

查看Nginx當前編譯了哪些模塊

要查看Nginx編譯了哪些模塊，執行如下命令：2>&1 nginx -V | tr ' ' '\n'|grep module，以下：

查看完整的編譯參數：nginx -V，以下：

內容以下：

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/openssl@1.1/include' --with-ld-opt='-L/usr/local/opt/pcre/lib -L/usr/local/opt/openssl@1.1/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

動態編譯添加Nginx模塊

1. 在GitHub下載最新源碼：ngx-fancyindex
2. 源碼下載下來後，解壓，放到nginx源碼目錄(/usr/local/nginx)中,執行下面的代碼，編譯：

   ./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/openssl@1.1/include' --with-ld-opt='-L/usr/local/opt/pcre/lib -L/usr/local/opt/openssl@1.1/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">這裏不要make install！！！</font>
4. 進入nginx源碼目錄下的objs目錄，執行2>&1 ./nginx -V | tr ' ' '\n'|grep fan
5. 用objs目錄下的nginx文件替換/usr/bin下面的nginx便可

選擇Fancy Index主題

在Github裏面找到了兩個開源的主題，分別是:

• https://github.com/Naereen/Nginx-Fancyindex-Theme
• https://github.com/TheInsomniac/Nginx-Fancyindex-Theme

你們選一個本身喜歡的就行了，這裏我選的是第一個。

可是在實際使用過程當中，第一個代碼有一些問題，我作了一些修改，想要直接可使用的，能夠用這個：https://github.com/lanffy/Nginx-Fancyindex-Theme

Fancy Index 配置

1. 進入Nginx安裝的web目錄，執行nginx -V，輸出configure arguments: --prefix=/usr/local/nginx，就是這個目錄
2. git clone https://github.com/lanffy/Nginx-Fancyindex-Theme.git

3. 在nginx location模塊中添加Fancy Index配置，以下：

   location /download
   {

   include /usr/local/nginx/html/Nginx-Fancyindex-Theme/fancyindex.conf; # 目錄美化配置
   root /home/map/www/; #指定目錄所在路徑
   autoindex on; #開啓目錄瀏覽
   autoindex_format html; #以html風格將目錄展現在瀏覽器中
   autoindex_exact_size off; #切換爲 off 後，以可讀的方式顯示文件大小，單位爲 KB、MB 或者 GB
   autoindex_localtime on; #以服務器的文件時間做爲顯示的時間
   charset utf-8,gbk; #展現中文文件名

   }

4. 重啓Nginx便可

到這一步就完成配置了，最終頁面展現以下：

該主題有兩種風格，上面一種是light風格，下面的是dark風格：

風格在/usr/local/nginx/html/Nginx-Fancyindex-Theme/fancyindex.conf;配置文件中進行修改。

參考資料

1. 配置 Nginx 的目錄瀏覽功能
2. Nginx-Fancyindex-Theme