# Nginx-Fancyindex-Theme A responsive theme for Nginx Fancyindex module. Minimal, modern and simple. Comes with a search form, aims to handle thousands of files without any problems. The fancyindex module can be found [here](https://github.com/aperezdc/ngx-fancyindex). <table> <tbody><tr><th valign="top"><img src="/besson/autoindex_strapdown/icons/blank.svg" alt="[ICO]"></th><th><a href="?C=N;O=A">Name</a></th><th><a href="?C=M;O=A">Last modified</a></th><th><a href="?C=S;O=A">Size</a></th><th><a href="?C=D;O=A">Description</a></th></tr> <tr><td valign="top"><a href="/besson/publis/"><img src="/besson/autoindex_strapdown/icons/glyphicon-circle-arrow-up.svg" alt="[PARENTDIR]"></a></td><td><a href="/besson/publis/">Parent Directory</a></td><td>&nbsp;</td><td align="right"> - </td><td>Root of the website (<a href="../">in English</a> or <a href="../index.fr.html">in French</a>)</td></tr> <tr><td valign="top"><a href="screenshots/"><img src="/besson/autoindex_strapdown/icons/glyphicon-folder-open.svg" alt="[DIR]"></a></td><td><a href="screenshots/">screenshots/</a></td><td align="right">2018-02-09 15:16 </td><td align="right"> - </td><td>&nbsp;</td></tr> <tr><td valign="top"><a href="Nginx-Fancyindex-Theme-light/"><img src="/besson/autoindex_strapdown/icons/glyphicon-folder-open.svg" alt="[DIR]"></a></td><td><a href="Nginx-Fancyindex-Theme-light/">Nginx-Fancyindex-Theme-light/</a></td><td align="right">2018-02-09 15:01 </td><td align="right"> - </td><td>A <a href="https://github.com/Naereen/Nginx-Fancyindex-Theme">open-source, clean and pretty theme</a> for the FancyIndex module for the <a href="http://nginx.org/">nginx</a> webserver</td></tr> <tr><td valign="top"><a href="Nginx-Fancyindex-Theme-dark/"><img src="/besson/autoindex_strapdown/icons/glyphicon-folder-open.svg" alt="[DIR]"></a></td><td><a href="Nginx-Fancyindex-Theme-dark/">Nginx-Fancyindex-Theme-dark/</a></td><td align="right">2018-02-09 15:01 </td><td align="right"> - </td><td>A <a href="https://github.com/Naereen/Nginx-Fancyindex-Theme">open-source, clean and pretty theme</a> for the FancyIndex module for the <a href="http://nginx.org/">nginx</a> webserver</td></tr> <tr><td valign="top"><a href="Nginx-Fancyindex-Theme__example1.png"><img src="/besson/autoindex_strapdown/icons/glyphicon-picture.svg" alt="[IMG]"></a></td><td><a href="Nginx-Fancyindex-Theme__example1.png">Nginx-Fancyindex-Theme__example1.png</a></td><td align="right">2016-06-28 21:04 </td><td align="right">211K</td><td>A <a href="https://github.com/Naereen/Nginx-Fancyindex-Theme">open-source, clean and pretty theme</a> for the FancyIndex module for the <a href="http://nginx.org/">nginx</a> webserver</td></tr> <tr><td valign="top"><a href="Nginx-Fancyindex-Theme__example5.png"><img src="/besson/autoindex_strapdown/icons/glyphicon-picture.svg" alt="[IMG]"></a></td><td><a href="Nginx-Fancyindex-Theme__example5.png">Nginx-Fancyindex-Theme__example5.png</a></td><td align="right">2018-02-09 15:09 </td><td align="right"> 80K</td><td>A <a href="https://github.com/Naereen/Nginx-Fancyindex-Theme">open-source, clean and pretty theme</a> for the FancyIndex module for the <a href="http://nginx.org/">nginx</a> webserver</td></tr> <tr><td valign="top"><a href="Nginx-Fancyindex-Theme__example4.png"><img src="/besson/autoindex_strapdown/icons/glyphicon-picture.svg" alt="[IMG]"></a></td><td><a href="Nginx-Fancyindex-Theme__example4.png">Nginx-Fancyindex-Theme__example4.png</a></td><td align="right">2018-02-09 15:09 </td><td align="right"> 80K</td><td>A <a href="https://github.com/Naereen/Nginx-Fancyindex-Theme">open-source, clean and pretty theme</a> for the FancyIndex module for the <a href="http://nginx.org/">nginx</a> webserver</td></tr> <tr><td valign="top"><a href="Nginx-Fancyindex-Theme__example2.png"><img src="/besson/autoindex_strapdown/icons/glyphicon-picture.svg" alt="[IMG]"></a></td><td><a href="Nginx-Fancyindex-Theme__example2.png">Nginx-Fancyindex-Theme__example2.png</a></td><td align="right">2016-06-28 21:04 </td><td align="right"> 70K</td><td>A <a href="https://github.com/Naereen/Nginx-Fancyindex-Theme">open-source, clean and pretty theme</a> for the FancyIndex module for the <a href="http://nginx.org/">nginx</a> webserver</td></tr> <tr><td valign="top"><a href="Nginx-Fancyindex-Theme__example6.png"><img src="/besson/autoindex_strapdown/icons/glyphicon-picture.svg" alt="[IMG]"></a></td><td><a href="Nginx-Fancyindex-Theme__example6.png">Nginx-Fancyindex-Theme__example6.png</a></td><td align="right">2018-02-09 15:15 </td><td align="right"> 70K</td><td>A <a href="https://github.com/Naereen/Nginx-Fancyindex-Theme">open-source, clean and pretty theme</a> for the FancyIndex module for the <a href="http://nginx.org/">nginx</a> webserver</td></tr> <tr><td valign="top"><a href="Nginx-Fancyindex-Theme__example3.png"><img src="/besson/autoindex_strapdown/icons/glyphicon-picture.svg" alt="[IMG]"></a></td><td><a href="Nginx-Fancyindex-Theme__example3.png">Nginx-Fancyindex-Theme__example3.png</a></td><td align="right">2016-06-28 21:04 </td><td align="right"> 36K</td><td>A <a href="https://github.com/Naereen/Nginx-Fancyindex-Theme">open-source, clean and pretty theme</a> for the FancyIndex module for the <a href="http://nginx.org/">nginx</a> webserver</td></tr> <tr><td valign="top"><a href="README.md"><img src="/besson/autoindex_strapdown/icons/glyphicon-file.svg" alt="[TXT]"></a></td><td><a href="README.md">README.md</a></td><td align="right">2018-02-09 15:18 </td><td align="right">6.5K</td><td>Some details about this page</td></tr> <tr><td valign="top"><a href="LICENSE"><img src="/besson/autoindex_strapdown/icons/glyphicon-file.svg" alt="[ ]"></a></td><td><a href="LICENSE">LICENSE</a></td><td align="right">2017-03-06 14:13 </td><td align="right">1.1K</td><td>&nbsp;</td></tr> <tr><td valign="top"><a href="fancyindex.conf"><img src="/icons/script.gif" alt="[ ]"></a></td><td><a href="fancyindex.conf">fancyindex.conf</a></td><td align="right">2018-02-09 15:01 </td><td align="right">520 </td><td>&nbsp;</td></tr> <tr><td valign="top"><a href="HEADER.md"><img src="/besson/autoindex_strapdown/icons/glyphicon-file.svg" alt="[TXT]"></a></td><td><a href="HEADER.md">HEADER.md</a></td><td align="right">2016-06-28 21:04 </td><td align="right">271 </td><td>&nbsp;</td></tr> <tr><td valign="top"><a href="_config.yml"><img src="/besson/autoindex_strapdown/icons/glyphicon-file.svg" alt="[ ]"></a></td><td><a href="_config.yml">_config.yml</a></td><td align="right">2017-03-06 14:13 </td><td align="right"> 26 </td><td>&nbsp;</td></tr> </tbody></table> # Nginx-Fancyindex-Theme A responsive theme for [Nginx](https://www.nginx.org/) Fancyindex module. Minimal, modern and simple. Comes with a search form, aims to handle thousands of files without any problems. The fancyindex module can be found [here](https://github.com/aperezdc/ngx-fancyindex) (by @aperezdc). [![made-for-nginx](https://img.shields.io/badge/Made%20for-nginx-1f425f.svg)](https://www.nginx.org/) ### Demonstration of the Light theme: ![Demo #5](screenshots/Nginx-Fancyindex-Theme__example5.png "Example of Nginx-Fancyindex-Theme-light") ## Usage 1. Make sure you have the fancyindex module compiled with nginx, either by compiling it yourself or installing nginx via the full distribution (paquet ``nginx-extras``). 2. Include the content of [fancyindex.conf](fancyindex.conf) in your location directive (``location / {.....}``) in your nginx config (usually ``nginx.conf``). 3. Move the ``Nginx-Fancyindex-Theme/`` folder to the root of the site directory. 4. Restart/reload nginx. 5. Check that it's working, and enjoy! 6. A new feature is the automatic inclusion of `HEADER.md` and `README.md` file from the current directory (if any), as shown in the example above. It uses [JQuery](https://jquery.com/) and [ShowDown.js](https://github.com/showdownjs/showdown/), it is badly written but it works perfectly! I wanted this feature as I have it for Apache (see [this project](https://bitbucket.org/lbesson/autoindex-strapdown)). ## Configuration A standard config looks something like this (use `-light` for the default light theme, or `-dark` for a dark theme): ```bash fancyindex on; fancyindex_localtime on; fancyindex_exact_size off; # Specify the path to the header.html and foother.html files (server-wise) fancyindex_header "/Nginx-Fancyindex-Theme-light/header.html"; fancyindex_footer "/Nginx-Fancyindex-Theme-light/footer.html"; # Ignored files will not show up in the directory listing, but will still be public. fancyindex_ignore "examplefile.html"; # Making sure folder where these files are do not show up in the listing. fancyindex_ignore "Nginx-Fancyindex-Theme-light"; # Maximum file name length in bytes, change as you like. fancyindex_name_length 255; ``` If you want to conserve a few more bytes in network transmissions enable gzip on the served assets. ```bash # Enable gzip compression. gzip on; # Compression level (1-9). # 5 is a perfect compromise between size and CPU usage, offering about # 75% reduction for most ASCII files (almost identical to level 9). gzip_comp_level 5; # Don't compress anything that's already small and unlikely to shrink much # if at all (the default is 20 bytes, which is bad as that usually leads to # larger files after gzipping). gzip_min_length 256; # Compress data even for clients that are connecting to us via proxies, # identified by the "Via" header (required for CloudFront). gzip_proxied any; # Tell proxies to cache both the gzipped and regular version of a resource # whenever the client's Accept-Encoding capabilities header varies; # Avoids the issue where a non-gzip capable client (which is extremely rare # today) would display gibberish if their proxy gave them the gzipped version. gzip_vary on; # Compress all output labeled with one of the following MIME-types. gzip_types application/atom+xml application/javascript application/json application/ld+json application/manifest+json application/rss+xml application/vnd.geo+json application/vnd.ms-fontobject application/x-font-ttf application/x-web-app-manifest+json application/xhtml+xml application/xml font/opentype image/bmp image/svg+xml image/x-icon text/cache-manifest text/css text/plain text/vcard text/vnd.rim.location.xloc text/vtt text/x-component text/x-cross-domain-policy; # text/html is always compressed by gzip module # This should be turned on if you are going to have pre-compressed copies (.gz) of # static files available. If not it should be left off as it will cause extra I/O # for the check. It is best if you enable this in a location{} block for # a specific directory, or on an individual server{} level. # gzip_static on; ``` > Reference: [H5BP Nginx Server Config](https://github.com/h5bp/server-configs-nginx/blob/master/nginx.conf) ## Examples ### Showing a list of files (without search): ![Demo #2](screenshots/Nginx-Fancyindex-Theme__example2.png "Example of Nginx-Fancyindex-Theme") --- ### Filter a list of files (with search): ![Demo #1](screenshots/Nginx-Fancyindex-Theme__example1.png "Example of Nginx-Fancyindex-Theme") --- ### Filter a list of directories (with search): ![Demo #3](screenshots/Nginx-Fancyindex-Theme__example3.png "Example of Nginx-Fancyindex-Theme") --- ### Filter a list of directories (with search) -- Dark theme: It also shows the automatic inclusion of `HEADER.md` file and `README.md` file. ![Demo #4](screenshots/Nginx-Fancyindex-Theme__example4.png "Example of Nginx-Fancyindex-Theme-dark") ### Include HEADER and README files automatically: Another demo: ![Demo #6](screenshots/Nginx-Fancyindex-Theme__example6.png "Example of Nginx-Fancyindex-Theme-light") --- ### :scroll: License ? [![GitHub license](https://img.shields.io/github/license/Naereen/Nginx-Fancyindex-Theme.svg)](https://github.com/Naereen/Nginx-Fancyindex-Theme/blob/master/LICENSE) [MIT Licensed](https://lbesson.mit-license.org/) (file [LICENSE](LICENSE)). © [Lilian Besson](https://GitHub.com/Naereen), 2016-18. [![Maintenance](https://img.shields.io/badge/Maintained%3F-yes-green.svg)](https://GitHub.com/Naereen/Nginx-Fancyindex-Theme/graphs/commit-activity) [![Ask Me Anything !](https://img.shields.io/badge/Ask%20me-anything-1abc9c.svg)](https://GitHub.com/Naereen/ama) [![Analytics](https://ga-beacon.appspot.com/UA-38514290-17/github.com/Naereen/Nginx-Fancyindex-Theme/README.md?pixel)](https://GitHub.com/Naereen/Nginx-Fancyindex-Theme/) [![ForTheBadge built-with-swag](http://ForTheBadge.com/images/badges/built-with-swag.svg)](https://GitHub.com/Naereen/) [![ForTheBadge uses-js](http://ForTheBadge.com/images/badges/uses-js.svg)](http://ForTheBadge.com) [![ForTheBadge uses-html](http://ForTheBadge.com/images/badges/uses-html.svg)](http://ForTheBadge.com) [![ForTheBadge uses-css](http://ForTheBadge.com/images/badges/uses-css.svg)](http://ForTheBadge.com) [![ForTheBadge uses-badges](http://ForTheBadge.com/images/badges/uses-badges.svg)](http://ForTheBadge.com) [![ForTheBadge uses-git](http://ForTheBadge.com/images/badges/uses-git.svg)](https://GitHub.com/)