Nginx瀏覽目錄配置及美化

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

Nginx-Fancyindex-Theme

這是從一個項目Fork過來，做了部分改動，並修復了少量bug後的完整的可用項目，需要的可以參考：Nginx-Fancyindex-Theme

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，如下：

 

內容如下：

<span style="color:#222222"><span style="color:#333333"><code>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
</code></span></span>

動態編譯添加Nginx模塊

1. 在GitHub下載最新源碼：ngx-fancyindex

2. 源碼下載下來後，解壓，放到nginx源碼目錄(/usr/local/nginx)中,執行下面的代碼，編譯：

   <span style="color:#333333"><code> ./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
   </code></span>

3. make 這裏不要make install！！！
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;配置文件中進行修改。