摘要:在項目中有一個功能需要在瀏覽器頁面中瀏覽服務器的目錄。服務器使用,而提供了相應的模塊,該模塊提供了我們想要的功能。
在項目中有一個功能需要在瀏覽器頁面中瀏覽服務器的目錄。服務器使用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 " " "
"|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模塊
在GitHub下載最新源碼:ngx-fancyindex
源碼下載下來后,解壓,放到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
make 這里不要make install?。?!
進入nginx源碼目錄下的objs目錄,執行2>&1 ./nginx -V | tr " " " "|grep fan
用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 配置進入Nginx安裝的web目錄,執行nginx -V,輸出configure arguments: --prefix=/usr/local/nginx,就是這個目錄
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風格將目錄展示在瀏覽器中 autoindex_exact_size off; #切換為 off 后,以可讀的方式顯示文件大小,單位為 KB、MB 或者 GB autoindex_localtime on; #以服務器的文件時間作為顯示的時間 charset utf-8,gbk; #展示中文文件名
}
重啟Nginx即可
到這一步就完成配置了,最終頁面展示如下:
該主題有兩種風格,上面一種是light風格,下面的是dark風格:
風格在/usr/local/nginx/html/Nginx-Fancyindex-Theme/fancyindex.conf;配置文件中進行修改。
參考資料配置 Nginx 的目錄瀏覽功能
Nginx-Fancyindex-Theme
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/39738.html
摘要:注意事項服務器中配置的虛擬域名必須直接指向入口文件所在目錄,否則在省略的情況下,服務器無法正確訪問到項目。 Yii2.0默認的訪問形式為: http://www.xxx.com/index.php?r=post/index&id=100 一般我們都會考慮將其美化一下,變成如下的形式: http://www.xxx.com/post/100.html 接下來就是美化的步驟 一、配置htt...
摘要:引言學生管理系統昨日正式上線測試,上線遇到的問題不少,但最后都完美解決了。前臺上線,瀏覽器端訪問服務器卻得到了,查看相關日志后發現是訪問文件時遭到了拒絕。不足當時忙著上線,中默認也啟用了路由,就以為路由是正統的解決方案。 引言 Alice學生管理系統昨日正式上線測試,上線遇到的問題不少,但最后都完美解決了。 特此分享,一起爬坑。 項目優化 登錄頁美化 原來的登錄頁采用的是黑背景,經過大...
這篇說下yii2.0開發 API 吧,使用 RESTful API模式 安裝Yii2.0 通過 Composer 安裝 這是安裝Yii2.0的首選方法。如果你還沒有安裝 Composer,你可以按照這里的說明進行安裝。 安裝完 Composer,運行下面的命令來安裝 Composer Asset 插件: php composer.phar global require fxp/composer-a...
摘要:分享一些超好用插件,打造一個不一樣的瀏覽器編輯器。一谷歌瀏覽器插件谷歌訪問助手強烈推薦一鍵安裝,無需其他配置,即可訪問谷歌。谷歌瀏覽器是很耗內存的,該插件會自動掛起長時間未使用的網頁,來釋放系統資源。 showImg(https://segmentfault.com/img/remote/1460000014011338); 分享一些超好用插件,打造一個不一樣的 GitHub、瀏覽器、...
閱讀 3118·2021-11-15 18:14
閱讀 1773·2021-09-22 10:51
閱讀 3283·2021-09-09 09:34
閱讀 3505·2021-09-06 15:02
閱讀 1013·2021-09-01 11:40
閱讀 3186·2019-08-30 13:58
閱讀 2523·2019-08-30 11:04
閱讀 1081·2019-08-28 18:31