Un joli affichage pour la page de listing de dossier d’Apache

Selon les restrictions de votre site, lorsque vous arrivez dans un répertoire, Apache peut vous afficher tous les fichiers et dossiers contenus dans ce répertoire.
C'est mon objectif pour monter un petit partage rapide de fichiers...

Mais l'affichage de base est vraiment moche...

L'affichage de base d'Apache
Avec un peu de .htaccess, vous pouvez imposer des fichiers html pour l'entête et la fin de page... et le CSS vous aidera à jouer sur l'apparence de votre page.
Vous ne pourrez pas modifier le contenu du listing, si ce n'est l'ordre d'affichage et la largeur des colonnes (je l'aurais bien francisé... mais j'ai pas trouvé).
Affichage personnalisé

Sécurité

Il est avant tout conseille d'interdire de lister les répertoires d'une manière générale, et de n'autoriser qu'au cas par cas le listing.
Pour interdire globalement sur tout le site, dans le httpd.conf, utiliser par exemple :

Options -Indexes

Et dans chaque répertoire que vous voulez autoriser à lister, créez un fichier .htaccess contenant uniquement :

Options +Indexes

Le mécanisme de base

A la racine du site, créez un fichier .htaccess contenant :

IndexOptions FancyIndexing FoldersFirst SuppressHTMLPreamble
IndexOrderDefault Descending Name
#
# Fichiers header et footer (2 fichiers placés dans la racine du site)
HeaderName /header.html
ReadmeName /footer.html
#
# Fichiers à ignorer dans le listing
IndexIgnore header.html footer.html favicon.ico .htaccess .ftpquota .DS_Store icons *.log *,v *,t .??* *~ *#
#
# Affichage avec des icones personnalisés (placés dans le répertoire /icons_perso à la racine du site)
DefaultIcon /icons_perso/unknown.png
# Répertoire
AddIcon /icons_perso/folder.png ^^DIRECTORY^^
# Parent directory
AddIcon /icons_perso/parent.png ..
# Icones spécifiques aux types de fichiers
AddIcon /icons_perso/text.png .txt
AddIcon /icons_perso/image.png .jpg .jpeg .jpe .png .gif
AddIcon /icons_perso/calendar.png .ics
AddIcon /icons_perso/pdf.png .pdf
AddIcon /icons_perso/zip.png .zip .rar
AddIcon /icons_perso/video.png .mpg .avi
AddIcon /icons_perso/audio.png .mp3 .wav
AddIcon /icons_perso/word.png .doc .docx
AddIcon /icons_perso/excel.png .xls .xlsx
AddIcon /icons_perso/powerpoint.png .ppt .pps .ppsx

Les fichiers sources

À la racine du site, créez les deux fichiers header.html et footer.html, et le répertoire icons_perso avec les fichiers correspondants à l'intérieur.

En ce qui me concerne, voici mon header.html :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr" dir="ltr">
 <head>
   <title>R&eacute;pertoire</title>
   <style type="text/css">
body {
 background: #ffffff;
 margin: 33px;
 color: #333;
 font: Arial, Helvetica;
 font-size:0.9em;
 }
h1 {
 font: 1.4em Verdana, Georgia, serif;
 background:url(/logo.png) top left no-repeat;
 line-height:35px;
 padding: 0 0 0 35px;
 }
h1 a:hover, h1 a:active {
 text-decoration: none;
 }
a:link {
 text-decoration: none;
 color: #333;
 }
a:visited {
 text-decoration: none;
 color: #333;
 }
a:hover, a:active {
 text-decoration: underline;
 color: #333;
 }
pre {
 font:  "Courier New", Courier;
 margin: 3px 0;
 color: #333;
 }
pre img {
 display: inline;
 height:16px;
 width:16px;
 }
</style>
   </head>
   <body>
      <h1>Contenu du r&eacute;pertoire</h1>

et mon footer.html :

<pre><em>&copy; &Eacute;cole La Mache</em></pre>
<pre>Contenu r&eacute;serv&eacute; &agrave; l'usage des membres de l'&Eacute;cole La Mache.</pre>
<pre><a href="http://portail.ecolelamache.org/" title="Retour au portail de l'&Eacute;cole La Mache">Retour au portail</a>
</body>
</html>

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.