摘要：在項(xiàng)目中有一個(gè)功能需要在瀏覽器頁(yè)面中瀏覽服務(wù)器的目錄。服務(wù)器使用，而提供了相應(yīng)的模塊，該模塊提供了我們想要的功能。

在項(xiàng)目中有一個(gè)功能需要在瀏覽器頁(yè)面中瀏覽服務(wù)器的目錄。服務(wù)器使用Nginx，而Nginx提供了相應(yīng)的ngx_http_autoindex_module 模塊，該模塊提供了我們想要的功能。

該模塊有以下幾個(gè)命令：

根據(jù)上面的命令，一個(gè)簡(jiǎn)單的Nginx瀏覽目錄的配置如下：

location /download
{
    root /home/map/www/; #指定目錄所在路徑
    autoindex on; #開啟目錄瀏覽
    autoindex_format html; #以html風(fēng)格將目錄展示在瀏覽器中
    autoindex_exact_size off; #切換為 off 后，以可讀的方式顯示文件大小，單位為 KB、MB 或者 GB
    autoindex_localtime on; #以服務(wù)器的文件時(shí)間作為顯示的時(shí)間
}

頁(yè)面展示如下：

可以看到頁(yè)面中的展示信息和配置想要的一致，但還有個(gè)問(wèn)題是中文文件名顯示的時(shí)候亂碼。

要解決上面的問(wèn)題，只需要添加如下配置即可：

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

完整配置如下：

location /download
{
    root /home/map/www/; #指定目錄所在路徑
    autoindex on; #開啟目錄瀏覽
    autoindex_format html; #以html風(fēng)格將目錄展示在瀏覽器中
    autoindex_exact_size off; #切換為 off 后，以可讀的方式顯示文件大小，單位為 KB、MB 或者 GB
    autoindex_localtime on; #以服務(wù)器的文件時(shí)間作為顯示的時(shí)間
    charset utf-8,gbk; #展示中文文件名
}

頁(yè)面展示如下：

文件列表的第一行是一個(gè)目錄，點(diǎn)進(jìn)去，展示如下：

稍微有一點(diǎn)審美的同學(xué)是不是覺得這樣展示不太美觀呢？是的，很不美觀，感覺亂糟糟的。下面就來(lái)解決這個(gè)問(wèn)題。

我們使用開源的Fancy Index來(lái)美化頁(yè)面，Github看這里

在美化之前，需要安裝Nginx FancyIndex模塊。安裝模塊步驟如下。

要查看Nginx編譯了哪些模塊，執(zhí)行以下命令：2>&1 nginx -V | tr " " " "|grep module，如下：

查看完整的編譯參數(shù)：nginx -V，如下：

內(nèi)容如下：

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

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

源碼下載下來(lái)后，解壓，放到nginx源碼目錄(/usr/local/nginx)中,執(zhí)行下面的代碼，編譯：

./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

make 這里不要make install！！！

進(jìn)入nginx源碼目錄下的objs目錄，執(zhí)行2>&1 ./nginx -V | tr " " " "|grep fan

用objs目錄下的nginx文件替換/usr/bin下面的nginx即可

在Github里面找到了兩個(gè)開源的主題，分別是:

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

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

大家選一個(gè)自己喜歡的就好了，這里我選的是第一個(gè)。

但是在實(shí)際使用過(guò)程中，第一個(gè)代碼有一些問(wèn)題，我做了一些修改，想要直接可以使用的，可以用這個(gè)：https://github.com/lanffy/Nginx-Fancyindex-Theme

進(jìn)入Nginx安裝的web目錄，執(zhí)行nginx -V，輸出configure arguments: --prefix=/usr/local/nginx，就是這個(gè)目錄

git clone https://github.com/lanffy/Nginx-Fancyindex-Theme.git

在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風(fēng)格將目錄展示在瀏覽器中
autoindex_exact_size off; #切換為 off 后，以可讀的方式顯示文件大小，單位為 KB、MB 或者 GB
autoindex_localtime on; #以服務(wù)器的文件時(shí)間作為顯示的時(shí)間
charset utf-8,gbk; #展示中文文件名

}

重啟Nginx即可

到這一步就完成配置了，最終頁(yè)面展示如下：

該主題有兩種風(fēng)格，上面一種是light風(fēng)格，下面的是dark風(fēng)格：

風(fēng)格在/usr/local/nginx/html/Nginx-Fancyindex-Theme/fancyindex.conf;配置文件中進(jìn)行修改。

配置 Nginx 的目錄瀏覽功能

Nginx-Fancyindex-Theme