Cette fameuse page "index of" apparaît typiquement lorsque vous n'avez pas ajouté un fichier index à l'intérieur d'un dossier. La directive Apache qui vous permet de spécifier la page d'index est DirectoryIndex et prend en général des valeurs telles que "index.htm", "index.html" ou "index.php". Cependant, il est possible de personnaliser l'affichage du index-of grâce au module Apache "mod_autoindex" ([dés]activable dans le fichier httpd.conf).

I) Configuration d'un fichier .htaccess

Pour commencer la personnalisation, il faut créer un fichier .htaccess et le configurer grâce aux options disponibles dans la documentation d'Apache. Pour ceux qui ont la flemme de le lire en entier, nous n'allons utiliser que les options qui nous intéressent. Nous allons commencer par la directive IndexOptions (qui nous permettra d'effectuer une bonne partie du travail) avec les options suivantes:

  • FancyIndexing active la personnalisation de l'index-of
  • FoldersFirst liste d'abord les dossiers
  • IconsAreLinks transforme les icônes en liens
  • SuppressHTMLPreamble supprime l'ensemble des balises allant de <html> à <body> pour vous permettre d'utiliser du code HTML personnalisé
  • SuppressLastModified supprime la date de dernière modification de chaque élément
  • SuppressRules supprime les lignes horizontales utilisées par défaut par Apache (les balises <hr />)
  • NameWidth=* ajuste la colonne "Name" automatiquement en fonction du nom de fichier (ou dossier) le plus long
  • DescriptionWidth=* a la même fonction que "NameWidth" pour la colonne "Description"
  • IconWidth=24 fixe la taille des icônes à 24 pixels en largeur
  • IconHeight=24 fixe la taille des icônes à 24 pixels en hauteur.

Nous allons ensuite utiliser la directive IndexIgnore: elle permet de ne pas inclure certains fichiers dans le listing d'une page (typiquement le fichier .htaccess (exemple: IndexIgnore .htaccess README *.bak).
Pour ajouter des icônes à côté des fichiers/dossiers, nous allons utiliser les directives AddIcon et AddIconByType. La première directive s'utilise de cette façon: AddIcon (texte_alternatif,URL_image) something (par exemple: AddIcon (ISO,/chemin/vers/iso.png) *.iso). La seconde directive fait quasiment la même chose, à la différence que vous spécifiez cette fois-ci un type MIME. Par exemple, si on veut associer la même icône à un ensemble de fichiers images (PNG, GIF, JPG, TIFF...), voici ce qu'on pourrait faire: AddIconByType (IMG,/chemin/vers/image.png) image/*.
Pour ajouter une description selon un type de fichier, nous allons utiliser la directive AddDescription (exemple: AddDescription "Document - PDF" *.pdf).
Les 2 dernières directives que nous allons voir sont HeaderName et ReadmeName. Elles permettent d'utiliser notre propre code HTML (grâce à l'utilisation de l'option SuppressHTMLPreamble dans la directive IndexOptions plus haut) à la place de celui généré par Apache. HeaderName (que l'on peut considérer comme notre entête de page) prend en option un chemin vers un fichier (par exemple: HeaderName /chemin/vers/header.html). La directive ReadmeName est équivalente à HeaderName pour le pied de page.
C'est tout ce que nous aurons besoin de configurer dans le fichier .htaccess. Pour la prochaine partie: HTML + CSS !

II) Du vrai HTML qui rox + un peu de CSS, c'est mieux

Nous avons utilisé dans la partie précédente les directives HeaderName et ReadmeName. Voici un exemple d'entête de page...

<?xml version="1.0" encoding="ISO-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
	<head>
		<link rel="stylesheet" type="text/css" href="/chemin/vers/STYLE.css" media="screen" />
		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
		<title>L'index-of qui roxe :)</title>
	</head>
	<body>

... et un exemple de pied de page...

</body>
</html>

... avec un peu de staïle quand même ! Epicétou !

III) Résultat

Alors, ça en jette hein :D?

IV) Conclusion

Si vous voulez encore plus personnaliser votre index-of, sachez que:

Je vous mets à disposition l'archive contenant tout ce que nous avons pu voir (lisez bien le README à l'intérieur de l'archive !).