Apache Directory Indexes 101
Note: I have since published an update to this entry called Apache Directory Indexes 201. Please read it if you’re interested in a more flexible means of styling indexes.
With a tidbit from the Apache mod_autoindex documentation, I decided to give a little flair to my directory indexes. Usually, indexes are quite vanilla: unstyled HTML 3.2 with tab-delimited textual content enclosed in <PRE> tags.
I’m sure you know what I mean. Take a looksie at the directory listing of BLOGWARS, a sister site of underscorebleach.net: booooring directory listing
Now stand back and be amazed by underscorebleach.net’s directory listing: Indexes 101 directory listing
Now I know you’re just rearin’ to get a purdy lookin index like that. First things first. We’ve got limited options, but with CSS (including CSS2) and JavaScript, we have some flexibility. The first to do is lay it all out in .htaccess:
IndexOptions -FancyIndexing
HeaderName /path/to/header.shtml
ReadmeName /path/to/footer.shtml
Line 1 turns on indexes. Most servers already have indexes on. Line 2 generates the simpler—and I think more pleasant—view of the file listing. Instead of a tab-delimited, <PRE> style listing, this presents the files in a UL, list-based format. Lines 3 and 4 set the path to the Header Readme (a.k.a footer—why they call it a Readme is anyone’s guess). I like using absolute, root-relative paths, but I guess that’s up to you.
Now that we’ve got .htaccess cookin’, let’s see what Apache gives us to work with in terms of a default directory listing (using the above .htaccess parameters, that is):
<html>
<head>
<title>Index of [<em>directory</em>]</title>
</head>
<body>
[Piped-in HEADER]
[UL listing of files]
[Piped-in README (i.e. footer)]
</body></html>
A couple of key things to note about the above:
- We’ve got an HTML 3.2 DOCTYPE by default here. That’s no fun. You can either work within the 3.2 constraint, write HTML 4.01/XHTML 1.x (which won’t validate), or suppress the HTML preamble. The last approach is best, but I don’t really discuss it in full until the follow up to this article: Apache Directory Indexes 201.
- Note that you’re not going to be able to insert anything in the <HEAD>
- Your included HEADER and README files are processed by the server, so that means that you can use SSI (and PHP, I assume?). This is very important to note, because depending on the way you manage content on your site, it just might let you quickly integrate directory indexes with the rest of the look and feel of your pages.
I’ll basically leave it to your collective imagination and unmatched creative spirit as to what to put in the HEADER and README files. My styling for this example comes from this small stylesheet I wrote specifically for the indexes, and feel free to take inspiration from that. You might consider changing the <TITLE> via JavaScript’s document.title method. If you have any other thoughts, feel free to shoot ‘em my way.
February 2nd, 2005 at 5:30 am
> We’ve got an HTML 3.2 DOCTYPE that’s not going away
Don’t know if you could do this when the article was written, but here’s how to suppress the default HTML preamble.
February 2nd, 2005 at 5:35 am
Whoops, just saw Apache Directory Indexes 201. You might want to mention here that the last bit is wrong, or make the note up the top bright red, since I didn’t notice it and this is the page that appears when googling for “apache directory listing”, not the other one.
September 7th, 2005 at 12:33 pm
Thought I’d chuck this your way seeing as your page helped me. The ‘Header’ and ‘Readme’ files date back to BBS days. That should give you a little hint as to why they’re there (or named like that).
September 7th, 2005 at 1:31 pm
Quin: Ah, interesting! A bit before my time. :) (Just slightly, though.)