Nginx 索引目录美化

我们在做一些文件服务器的时候，偶尔会考虑使用http来搞，虽然说默认的也ok，但是长得有点丑，怎么办呢？ 一个字干！！

首先你的网站长这个屌样子

原始

别人家网站长的比你好看

ngx-fancyindex

怎么搞呢？非常简单
装nginx么，谁不会，是不是？嘿嘿嘿，多加一个模块而已，我们开始。

首先git拉一下ngx-fancyindex的模块

[root@localhost home]# git clone https://github.com/aperezdc/ngx-fancyindex.git
Cloning into 'ngx-fancyindex'...
remote: Enumerating objects: 14, done.
remote: Counting objects: 100% (14/14), done.
remote: Compressing objects: 100% (12/12), done.
remote: Total 755 (delta 3), reused 4 (delta 0), pack-reused 741
Receiving objects: 100% (755/755), 223.81 KiB | 107.00 KiB/s, done.
Resolving deltas: 100% (429/429), done.
[root@localhost home]#

然后么，开始安装

[root@localhost home]# tar xvf nginx-1.10.1.tar.gz
[root@localhost home]# cd nginx-1.10.1/
[root@localhost nginx-1.10.1]# useradd  -s /sbin/nologin -M www
[root@localhost nginx-1.10.1]# ./configure  --user=www  --group=www  --add-module=../ngx-fancyindex/ --prefix=/home/nginx  --with-http_stub_status_module  --with-http_ssl_module
[root@localhost nginx-1.10.1]# make && make install

安装完成后，我们搞套索引主题来

先随便进个目录，然后git上拉个索引主题
[root@tmp-20180522-sys-kvm-c-03-890525692825 tmp]# git clone https://github.com/Naereen/Nginx-Fancyindex-Theme.git
Cloning into 'Nginx-Fancyindex-Theme'...
remote: Enumerating objects: 182, done.
remote: Total 182 (delta 0), reused 0 (delta 0), pack-reused 182
Receiving objects: 100% (182/182), 654.20 KiB | 131.00 KiB/s, done.
Resolving deltas: 100% (81/81), done.
[root@tmp-20180522-sys-kvm-c-03-890525692825 tmp]#

[root@tmp-20180522-sys-kvm-c-03-890525692825 tmp]# tree Nginx-Fancyindex-Theme/
Nginx-Fancyindex-Theme/
├── _config.yml
├── fancyindex.conf
├── HEADER.md
├── LICENSE
├── Nginx-Fancyindex-Theme-dark
│   ├── addNginxFancyIndexForm.js
│   ├── footer.html
│   ├── header.html
│   ├── jquery.min.js
│   ├── showdown.min.js
│   └── styles.css
├── Nginx-Fancyindex-Theme-light
│   ├── addNginxFancyIndexForm.js
│   ├── footer.html
│   ├── header.html
│   ├── HEADER.md
│   ├── jquery.min.js
│   ├── README.md
│   ├── showdown.min.js
│   └── styles.css
├── README.md
└── screenshots
    ├── Nginx-Fancyindex-Theme__example1.png
    ├── Nginx-Fancyindex-Theme__example2.png
    ├── Nginx-Fancyindex-Theme__example3.png
    ├── Nginx-Fancyindex-Theme__example4.png
    ├── Nginx-Fancyindex-Theme__example5.png
    └── Nginx-Fancyindex-Theme__example6.png

3 directories, 25 files
[root@tmp-20180522-sys-kvm-c-03-890525692825 tmp]#

下载主题后，我们看到里面有2套，一套黑色，一套白色分别是
Nginx-Fancyindex-Theme-dark
Nginx-Fancyindex-Theme-light

然后将主题拷贝到网站目录下

[root@tmp-20180522-sys-kvm-c-03-890525692825 tmp]# mv Nginx-Fancyindex-Theme/Nginx-Fancyindex-Theme-light /home/webapp/

然后配置下nginx，注意看下配置文件中的索引html指向

[root@localhost conf]# cat nginx.conf
worker_processes  auto;

events {
    worker_connections  1024;
}


http {
    include       mime.types;
    default_type  application/octet-stream;
    sendfile        on;
    keepalive_timeout  65;

    fancyindex on;
    fancyindex_exact_size off;
    fancyindex_localtime on;
    fancyindex_header "/Nginx-Fancyindex-Theme-light/header.html";
    fancyindex_footer "/Nginx-Fancyindex-Theme-light/footer.html";
    fancyindex_ignore "examplefile.html";
    fancyindex_ignore "Nginx-Fancyindex-Theme-light";
    fancyindex_name_length 255;


    server {
        listen       80;
        server_name  localhost;

        location / {
            root   /home/webapp/;
            index  index.html index.htm;
        }


        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }
    }
}

配置完成后，启动nginx 嗨吧