Lister un répertoire Apache

Ce tutoriel couvre

✅ Les avantages du .htaccess
✅ Configuration complète de Perishable Press
✅ Configuration d'Apaxy avec licence GPLv3 expliquée
✅ Options IndexOptions détaillées
✅ Tri et filtrage côté client avec exemples d'URLs
✅ Tableau comparatif
✅ Guide de sélection
✅ Checklist d'installation
✅ Dépannage
✅ Ressources utiles

Introduction

Ce tutoriel vous présente les meilleures solutions open source pour afficher un listing professionnel et réactif de vos répertoires Apache. Quack! 🦆

Au lieu d'utiliser des solutions complexes comme h5ai ou Snap2HTML, vous pouvez customiser le comportement natif d'Apache avec un simple fichier .htaccess.

Avantages du fichier .htaccess

Zéro installation serveur – Fonctionne sur tous les serveurs Apache
Extrêmement léger – Juste un fichier texte, aucune dépendance
Réactif (responsive) – Compatible avec tous les appareils (desktop, tablette, mobile) grâce à l'option HTMLTable
Tri dynamique – Les utilisateurs peuvent trier par colonne (nom, date, taille)
Icônes et styling CSS personnalisables – Apparence professionnelle
Sécurité intégrée – Masquage du fichier .htaccess lui-même
Gratuit et open source – Aucune licence ou restriction
Descriptions personnalisées – Ajouter des infos sur chaque type de fichier

Solution 1 : Perishable Press

📖 À propos de Perishable Press

Perishable Press propose une configuration .htaccess complète et optimisée pour améliorer les listings par défaut d'Apache avec mod_autoindex.

Site officiel : Perishable Press - Better Default Directory Views

Licence : Libre d'utilisation (public domain / open source)

Avantages : Solution complète, iconographie détaillée par type de fichier, descriptions personnalisées, fichiers header/footer inclus

Fichier .htaccess complet

Créez un fichier .htaccess à la racine de votre répertoire avec le contenu suivant :

💾 Voir le code complet .htaccess (à copier-coller)

# ============================================================================
# STRONG HTACCESS PROTECTION
# ============================================================================
<Files ~ "^.*\.([Hh][Tt][Aa])">
    order allow,deny
    deny from all
</Files>

# ============================================================================
# DIRECTORY CUSTOMIZATION
# ============================================================================
<IfModule mod_autoindex.c>

    # SET INDEX OPTIONS
    IndexOptions IgnoreCase FancyIndexing FoldersFirst NameWidth=* DescriptionWidth=* SuppressHTMLPreamble

    # SET DISPLAY ORDER
    IndexOrderDefault Descending Name

    # SPECIFY HEADER FILE
    HeaderName header.html
    
    # SPECIFY FOOTER FILE
    ReadmeName footer.html

    # IGNORE THESE FILES
    IndexIgnore header.html footer.html favicon.ico .htaccess .ftpquota .DS_Store icons *.log *,v *,t .??* *~ *#

    # DEFAULT ICON
    DefaultIcon icons/generic.gif

    # BLANK ICON (Optionnel - commenté par défaut)
    # AddIcon icons/purple.gif ^^BLANKICON^^

    # FOLDER AND PARENT ICONS
    AddIcon icons/grey.gif ^^DIRECTORY^^
    AddIcon icons/green.gif ..

    # SPECIFIC FILE ICONS
    AddIcon icons/blue.gif .txt .pdf .zip .rar .jpg .jpeg .jpe .png .gif .mpg .ico .js .log .doc .css .html
    AddIcon icons/red.gif readme
    AddIcon (MP3,icons/arrow.gif) .mp3

    # CUSTOM IMAGE ICONS
    AddIconByType (IMG,icons/image.gif) image/*

    # GZIP ENCODING ICON
    AddIconByEncoding (CMP,icons/compress.gif) x-compress x-gzip

    # ========================================================================
    # FILE DESCRIPTIONS
    # ========================================================================
    
    AddDescription "<span class='description'>MPEG Layer 3 Format</span>" .mp3
    AddDescription "<span class='description'>GZIP compressed TAR archive</span>" .tgz .tar.gz
    AddDescription "<span class='description'>GZIP compressed archive</span>" .Z .z .gz .zip
    AddDescription "<span class='description'>RAR compressed archive</span>" .rar
    AddDescription "<span class='description'>TAR compressed archive</span>" .tar
    AddDescription "<span class='description'>ZIP compressed archive</span>" .zip 
    AddDescription "<span class='description'>Windows executable file</span>" .exe
    AddDescription "<span class='description'>Common Gateway Interface</span>" .cgi
    AddDescription "<span class='description'>Joint Photographics Experts Group</span>" .jpg .jpeg .jpe
    AddDescription "<span class='description'>Graphic Interchange Format</span>" .gif
    AddDescription "<span class='description'>Portable Network Graphic</span>" .png
    AddDescription "<span class='description'>Vector graphic</span>" .ps .ai .eps
    AddDescription "<span class='description'>Hypertext Markup Language</span>" .html .shtml .htm
    AddDescription "<span class='description'>Cascading Style Sheet</span>" .css
    AddDescription "<span class='description'>DocType Definition</span>" .dtd
    AddDescription "<span class='description'>Extensible Markup Language</span>" .xml
    AddDescription "<span class='description'>Win32 compressed HTML help</span>" .chm
    AddDescription "<span class='description'>Adobe Portable Document Format</span>" .pdf
    AddDescription "<span class='description'>Plain text file</span>" .txt .nfo .faq .readme
    AddDescription "<span class='description'>Unix man page</span>" .man
    AddDescription "<span class='description'>Email data</span>" .eml .mbox
    AddDescription "<span class='description'>Microsoft Word document</span>" .doc
    AddDescription "<span class='description'>PHP: Hypertext Preprocessor script</span>" .php .php3 .php4
    AddDescription "<span class='description'>PHP: Hypertext Preprocessor source code</span>" .phps
    AddDescription "<span class='description'>Javascript</span>" .js
    AddDescription "<span class='description'>Java code</span>" .java
    AddDescription "<span class='description'>Unix shell script</span>" .sh .shar .csh .ksh .command
    AddDescription "<span class='description'>Mac OS X shell script</span>" .command
    AddDescription "<span class='description'>Configuration file</span>" .conf
    AddDescription "<span class='description'>Mac OS X terminal</span>" .term
    AddDescription "<span class='description'>BitTorrent file</span>" .torrent
    AddDescription "<span class='description'>Windows link</span>" .lnk .url

    # DEFAULT DESCRIPTION
    AddDescription "[<span class='description'>unknown item..</span>]" *

</IfModule>

Fichier header.html

Créez un fichier header.html au même niveau que le .htaccess :

📝 Voir le code header.html (à copier-coller)

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>📁 Explorateur de Fichiers</title>
    <style type="text/css">
    
    body {
        background: #f5f5f5;
        margin: 30px;
        padding: 0;
        color: #333;
        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    }

    h1 {
        font: 2.2em Georgia, serif;
        color: #222;
        margin-bottom: 20px;
    }

    h1 a:hover, h1 a:active {
        text-decoration: none;
    }

    a:link {
        text-decoration: none;
        color: #0066cc;
    }

    a:visited {
        text-decoration: none;
        color: #663399;
    }

    a:hover, a:active {
        text-decoration: underline;
        color: #cc0000;
    }

    pre {
        font: 0.95em/1.6em "Courier New", Courier, monospace;
        margin: 0;
        padding: 10px;
        color: #555;
        background: white;
        border: 1px solid #ddd;
        border-radius: 4px;
        overflow-x: auto;
    }

    pre img {
        display: inline;
        margin-right: 8px;
        vertical-align: middle;
    }

    img {
        border: none;
    }

    hr {
        border: none;
        border-top: 1px solid #ddd;
        margin: 15px 0;
    }

    .description {
        font-style: italic;
        font-size: 85%;
        color: #888;
    }

    </style>
</head>
<body>

<h1>📁 Explorateur de Fichiers</h1>
<p style="color: #666; margin-bottom: 20px;">Naviguez et téléchargez vos fichiers ci-dessous</p>

Fichier footer.html

Créez un fichier footer.html au même niveau que le .htaccess :

📝 Voir le code footer.html (à copier-coller)

<hr>
<pre style="text-align: center; font-size: 0.9em; color: #999;">
    <em>Explorateur de fichiers réactif - Alimenté par Apache</em>
</pre>
<pre style="text-align: center;">
    <a href="/" title="Accueil">🏠 Retour à l'accueil</a> | 
    <a href=".." title="Parent">📂 Dossier parent</a>
</pre>

</body>
</html>

Structure des dossiers

/votre-repertoire/
├── .htaccess              ← Fichier de configuration Apache
├── header.html            ← En-tête personnalisé
├── footer.html            ← Pied de page personnalisé
├── icons/                 ← Dossier avec les icônes (téléchargez depuis Apache)
│   ├── generic.gif
│   ├── grey.gif
│   ├── green.gif
│   ├── blue.gif
│   ├── red.gif
│   └── ...
├── fichier1.pdf
├── fichier2.mp3
├── image.jpg
└── sous-dossier/

Solution 2 : Apaxy

📖 À propos d'Apaxy

Apaxy est un thème Apache simple et personnalisable pour les listings de répertoires avec icônes modernes et styling CSS.

Dépôt GitHub : Apaxy - GitHub

Licence : GPLv3 (GNU General Public License v3) - Libre d'utilisation personnelle et commerciale avec obligations

Ce que la licence GPLv3 permet :

✅ Utilisation commerciale et privée
✅ Modification du code
✅ Distribution
✅ Usage personnel sans restrictions

Obligations de la licence GPLv3 :

⚠️ Fournir le code source modifié si vous redistribuez
⚠️ Garder les mentions GPLv3 visibles
⚠️ Créditer les icônes Faenza (incluses)
⚠️ Toute modification doit rester sous GPLv3

Avantages : Design moderne, icônes SVG/PNG de qualité, configuration simple, excellent support de la responsivité

Installation d'Apaxy

Téléchargez le dépôt GitHub : https://github.com/AdamWhitcroft/Apaxy
Extrayez les fichiers dans votre répertoire web
Les fichiers principaux sont:
- .htaccess – Configuration Apache
- header.html – En-tête personnalisé
- footer.html – Pied de page personnalisé
- theme/ – Dossier contenant CSS et icônes
Accédez au répertoire via votre navigateur – c'est prêt!

Avantages d'Apaxy vs Perishable Press

Design plus moderne avec icônes SVG
Meilleure intégration mobile
Thèmes personnalisables (couleurs, icônes)
Configuration très simple (cloner et utiliser)
Communauté active avec mises à jour régulières

Options principales de IndexOptions

Le fichier .htaccess utilise la directive IndexOptions pour contrôler l'apparence et le comportement du listing. Voici les options les plus importantes :

📋 Liste complète des options IndexOptions

Option	Effet
`FancyIndexing`	Active le mode avec icônes et colonnes (hautement recommandé)
`HTMLTable`	Utilise un `<table>` HTML au lieu de `<pre>` – ESSENTIEL pour la responsivité
`FoldersFirst`	Affiche les dossiers en premier, puis les fichiers
`IconsAreLinks`	Les icônes deviennent cliquables (améliore l'UX)
`VersionSort`	Tri intelligent des versions (v1, v2, v10 au lieu de v1, v10, v2)
`IgnoreCase`	Tri insensible à la casse
`SuppressHTMLPreamble`	Supprime le code HTML auto-généré (pour utiliser des en-têtes personnalisés)
`SuppressSize`	Masque la colonne « taille »
`SuppressLastModified`	Masque la colonne « date de modification »
`SuppressDescription`	Masque la colonne « description »
`NameWidth=*`	La colonne nom s'adapte automatiquement à la largeur disponible
`DescriptionWidth=*`	La colonne description s'adapte automatiquement

Configuration recommandée

IndexOptions IgnoreCase FancyIndexing FoldersFirst NameWidth=* DescriptionWidth=* SuppressHTMLPreamble

Explication :

IgnoreCase – Tri insensible à la casse
FancyIndexing – Activez les icônes
FoldersFirst – Dossiers en premier
NameWidth=* – Colonne nom adaptative
DescriptionWidth=* – Colonne description adaptative
SuppressHTMLPreamble – Permet d'utiliser un header.html personnalisé

Tri et filtrage côté client

Apache génère automatiquement des en-têtes de colonnes cliquables qui permettent aux utilisateurs de trier le listing dynamiquement, sans rechargement de page.

Paramètres de tri disponibles

Les paramètres de URL suivants contrôlent le tri :

📊 Voir tous les paramètres de tri

Paramètre	Effet
`C=N`	Tri par nom
`C=M`	Tri par date de modification
`C=S`	Tri par taille
`C=D`	Tri par description
`O=A`	Ordre ascendant (A à Z)
`O=D`	Ordre descendant (Z à A)
`F=0`	Liste simple (sans icônes)
`F=1`	Fancy indexing (avec icônes)

Exemples d'URLs de tri

Voici des exemples concrets que vous pouvez utiliser ou que les utilisateurs généreront en cliquant sur les en-têtes :

💻 Voir les exemples de code (à tester)

# Tri par nom (ascendant)
http://exemple.com/fichiers/?C=N;O=A

# Tri par nom (descendant)
http://exemple.com/fichiers/?C=N;O=D

# Tri par taille (fichiers les plus volumineux en premier)
http://exemple.com/fichiers/?C=S;O=D

# Tri par date (plus récents en premier)
http://exemple.com/fichiers/?C=M;O=D

# Tri par date (plus anciens en premier)
http://exemple.com/fichiers/?C=M;O=A

# Tri par description
http://exemple.com/fichiers/?C=D;O=A

# Fancy indexing avec tri par nom
http://exemple.com/fichiers/?C=N;O=A&F=1

# Liste simple (sans icônes)
http://exemple.com/fichiers/?F=0

Comment fonctionne le tri côté client?

Quand Apache génère le listing, il crée des en-têtes de colonne cliquables qui comportent ces paramètres. L'utilisateur clique sur le nom de la colonne (Nom, Date, Taille, Description) et Apache régénère le listing avec le tri appliqué – c'est entièrement automatique!

Avantage : Aucun JavaScript requis, fonctionne même avec JavaScript désactivé.

Récapitulatif et comparaison

Critère	.htaccess seul	Perishable Press	Apaxy
Installation	1 fichier	3-4 fichiers	Cloner le dépôt
Design	Basique	Professionnel	Moderne
Responsivité	Bonne (HTMLTable)	Excellente	Excellente
Icônes	Basiques (GIF)	Complètes (GIF)	Modernes (SVG/PNG)
Personnalisation	Limitée	Moyenne	Haute (thèmes)
Descriptions fichiers	Supportées	Complètes (80+ types)	Supportées
Tri dynamique	✅ Oui	✅ Oui	✅ Oui
Dépendances	Aucune	Aucune	Aucune
Licence	Apache natif	Public domain	(GPL-3.0-or-later)
Recommandé pour	Débutants	Usage professionnel	Design moderne

Quelle solution choisir?

💡 Guides de sélection

Choisir le .htaccess seul si vous :

Êtes débutant et voulez une solution ultra-simple
N'avez pas besoin de design sophistiqué
Voulez juste un listing fonctionnel et rapide
Avez des contraintes d'espace serveur

Choisir Perishable Press si vous :

Avez besoin d'une configuration complète et robuste
Devez supporter de nombreux types de fichiers différents
Voulez un listing professionnel avec descriptions détaillées
Préférez une base éprouvée et documentée

Choisir Apaxy si vous :

Voulez un design moderne et attractif
Appréciez les icônes SVG de qualité
Souhaitez personnaliser facilement (thèmes, couleurs)
Préférez une communauté active et des mises à jour régulières
Travaillez sur des projets où l'esthétique compte

Mise en place – Checklist

Voici les étapes pour mettre en place votre solution :

Créez un dossier dédiée
```
mkdir /var/www/html/fichiers
```
Choisissez votre solution (Perishable Press recommandée pour commencer)
Copiez le fichier .htaccess dans le dossier
```
nano .htaccess
```
(Collez le contenu complet fourni ci-dessus)
Créez header.html et footer.html dans le même dossier
Créez un dossier icons/ et ajoutez les icônes (téléchargez depuis Apache)
```
mkdir icons
```
Placez vos fichiers à partager dans le dossier
Testez en accédant via navigateur : http://votre-domaine.com/fichiers/
Ajustez le .htaccess et les fichiers HTML selon vos besoins

Dépannage courant

❓ Le listing ne s'affiche pas

Problème : mod_autoindex n'est pas activé
Solution : Contactez votre hébergeur pour activer mod_autoindex
Alternative : Testez si Options +Indexes fonctionne seul

❓ Les icônes ne s'affichent pas

Problème : Le chemin du dossier icons/ est incorrect
Solution : Vérifiez que le dossier existe et qu'il contient les fichiers GIF/PNG
Téléchargement : Utilisez les icônes d'Apache : /usr/share/apache2/icons/ (Linux)

❓ Le fichier .htaccess ne s'applique pas

Problème : AllowOverride n'est pas activé dans la config Apache
Solution : Vérifiez dans la config serveur que AllowOverride All est défini
Redémarrage : Redémarrez Apache après modification : sudo systemctl restart apache2

❓ Le header.html ou footer.html ne s'affiche pas

Problème : Les noms de fichiers ne correspondent pas exactement
Solution : Vérifiez la casse et l'extension (.html exact)
Note : Apache cherche HeaderName et ReadmeName tels que définis

Ressources utiles

Documentation Apache mod_autoindex : httpd.apache.org
Perishable Press : Better Default Directory Views with .htaccess
Apaxy (GitHub) : Apaxy – GitHub Repository
Icônes Apache : Apache Icons

Conclusion

Avec un simple fichier .htaccess, vous pouvez transformer un listing Apache basique en explorateur de fichiers professionnel, réactif et personnalisé. Quack! 🦆

Les avantages principaux :

✅ Zéro installation serveur complexe
✅ Fonctionne sur tous les hébergements Apache
✅ Responsive sur tous les appareils
✅ Tri dynamique par colonne
✅ Icônes et styling personnalisables
✅ Descriptions détaillées par type de fichier
✅ Entièrement gratuit et open source

Prochaines étapes : Choisissez votre solution préférée (Perishable Press ou Apaxy), copiez-collez les fichiers fournis ci-dessus, et testez immédiatement – c'est vraiment aussi simple que ça!

📁 Lister un répertoire Apache avec .htaccess