Dave Perrett

Styling Apache Directory Listings With Mod_autoindex

apache, linux, mod_autoindex, programming, web

Index-Style is a set of html, css and image files designed to work together with the mod_autoindex module to make the default Apache file listings look a little nicer. The UI design is based almost entirely on the great work done by the guys at Repos-Style, although the code itself is largely done from scratch (as mod_autoindex doesn’t support XSLT).

Installation

First, get a copy of the index-style folder - the easiest way is to change to the document root of the domain you want to style, and check it out from subversion (in my case the domain will be download.recurser.com ) :

1
2
> cd /var/www/download.recurser.com
> svn co http://svn.recurser.com/misc/apache/index-style/

This should create an ‘index-style’ folder in your document root. Next, you need to configure Apache to use the index-style files to style your directory listings. I use the following config, which you’ll need to adjust to match your particular setup - the ‘icons’ alias and the ‘mod_autoindex’ section are the main areas to pay attention to:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<VirtualHost *:80>
    ServerName download.recurser.com
    DocumentRoot /var/www/download.recurser.com
    Alias /icons/ /var/www/download.recurser.com/index-style/icons/

    <Directory "/var/www/download.recurser.com">
        AllowOverride All
        Order allow,deny
        Allow from all

        <IfModule mod_autoindex.c>
            Options Indexes FollowSymLinks
            IndexOptions FancyIndexing
            IndexOptions VersionSort
            IndexOptions HTMLTable
            IndexOptions FoldersFirst
            IndexOptions IconsAreLinks
            IndexOptions IgnoreCase
            IndexOptions SuppressDescription
            IndexOptions SuppressHTMLPreamble
            IndexOptions XHTML
            IndexOptions IconWidth=16
            IndexOptions IconHeight=16
            IndexOptions NameWidth=*
            IndexOrderDefault Descending Name
            HeaderName /index-style/header.html
            ReadmeName /index-style/footer.html
        </ifModule>

    </Directory>
</VirtualHost>

You’ll need mod_autoindex for any of this to work - it should be installed by default with Apache in most linux distributions.

Disclaimer

The formatting relies on a few javascript hacks which may or may not work exactly as intended if the output of your apache directory listings differs a lot from what is expected. If the output appears strange, try playing around with the javascript formatting in header.html, or drop me a line if you need a hand.