Afin de partager facilement les ressources de cours et de garder une trace, j’ai pris l’habitude de les uploader simplement sur le serveur de mon portfolio et de laisser mes élèves naviguer dessus avec le DirectoryIndex d’Apache. Soyons d’accord : l’interface est simple mais austère ! Et des élèves m’ont plusieurs fois fait la remarque: « Mais monsieur, vous êtes prof d’intégration et pourtant votre site il est moche ». Remarque à laquelle je répondait simplement que c’était l’interface d’Apache et que je n’y pouvais rien, tout en me disant au fond de moi qu’il y avait forcément moyen de modifier ça puisque c’était du HTML qui était généré.
J’ai enfin décider de m’y mettre et je vous propose donc un petit tutoriel pour apprendre à customiser votre DirectoryIndex Apache.
Le commencement : le .htaccess du DirectoryIndex
Nous allons déjà faire quelques manipulations à l’aide du .htaccess afin de simplifier l’affichage et de retirer les informations dont nous n’avons plus besoin:
IndexOptions FoldersFirst
IndexOptions SuppressDescription SuppressSize SuppressLastModifiedLa première ligne permet simplement de trier les répertoires avant les fichiers, ce qui n’est pas indispensable mais permet une meilleure visibilité et une meilleure navigation !
La ligne du dessous retire simplement les informations dont nous ne nous servirons pas : la description, la taille et la date de modification. Nous ne gardons plus que le nom. Et vous devriez arriver à un affichage de votre DirectoryIndex comme celui-ci:
Nous n’avons désormais plus que quelques éléments : un titre, une adresse (tout en bas) et la liste des dossiers et fichiers sous forme de <ul>/<li>.
Nous allons maintenant préciser à Apache un fichier HTML qui servira de header à la page et qui nous permettra en réalité de modifier le style ! Dans votre .htaccess, écrivez donc :
HeaderName /header.htmlNotez que le « / » au niveau du HeaderName n’en fait pas réellement un chemin absolu, du moins pas par rapport à la racine du système. En mettant un « / » devant vous définissez un chemin absolu depuis la racine du DocumentRoot de votre domaine. Vous pouvez vous contenter d’écrire « header.html » mais si vous entrez dans le moindre dossier vous aurez à nouveau le style par défaut, je vous conseille donc fortement de laisser le « / ».
Passons au style
Notre HTML de base va être extrêmement simple puisque nous ne voulons pas toucher au contenu du body (qui est généré automatiquement par Apache) :
<!DOCTYPE html>
<html>
<head>
<style type="text/css"></style>
</head>
<body>
</body>
</html>Notez que la balise <title> ne fonctionne pas : non seulement Apache le remplace par son titre par défaut, mais en plus il vous ajoute votre <title> dans le body de la page.
Nous allons donc passer au CSS de notre page ! Et une fois n’est pas coutume : nous allons commencer par le body. On va d’abord retirer le margin de base et rajouter un léger padding pour éviter que des éléments puissent se retrouver collés aux bordures. Ensuite on change la couleur de fond et on met son min-height à 100vh pour faire en sorte que le body fasse au moins la même hauteur que la fenêtre du navigateur afin de centrer verticalement les éléments par la suite.
body {
margin: 0;
padding: 40px;
box-sizing: border-box;
background-color: #1C1E31;
min-height: 100vh;
font-family: sans-serif;
}Ensuite, comme Apache a l’habitude de nous rajouter quelques éléments indésirables, on retire les <hr> et les <address> de la page:
hr, address {
display: none;
}Nous allons maintenant transformer notre <ul> en container flex avec le contenu centré verticalement et horizontalement. Sans oublier de préciser le flex-wrap afin de permettre aux <li> d’aller à la ligne s’il n’y a plus assez de place. On précise également son min-height pour que visuellement les éléments soient au centre de la fenêtre (la hauteur par défaut du <ul> étant égale à la hauteur du contenu). Et enfin penser à retirer les puces de la liste :
ul {
margin: 0;
padding: 0;
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
min-height: 100%;
list-style: none;
}Pour les <li> j’ai fait quelque chose de simple. J’ai juste ajouté une marge autour et un text-transform: capitalize pour mettre une majuscule sur les noms de fichiers :
li {
margin: 10px 30px;
text-transform: capitalize;
}Et nous voilà sur la touche finale : les liens ! Tout d’abord il peut arriver qu’un lien vers le root soit listé sur votre page, vous pouvez vous en débarrasser avec :
a[href="/"] {
display: none;
}Pour les autres liens, comme ils sont en inline de base (puisqu’il s’agit généralement de texte) nous allons commencer par changer leur display en block. On passe le texte en blanc et on retire le soulignement. Et afin que le texte soit bien aligné avec l’icon qu’on va mettre au dessus, on ajoute un text-align: center.
a {
display: block;
color: #fff;
text-decoration: none;
text-align: center;
}Et comme nous ne pouvons pas ajouter des éléments en HTML, nous allons passer par les pseudo éléments.
Nous allons passer par un :before en commençant par mettre une valeur vide à son content. Afin qu’il se positionne correctement au dessus, on le met également en block et avec une margin auto puis une margin-bottom de 5px afin de laisser un espace entre l’icon et le texte. Je rajoute également une width et une height pour en faire un carré. On précise ensuite que le background sera centré, en contain pour être sûr que l’image apparaisse entièrement et enfin qu’elle ne se répète pas. Et comme il vaut mieux avoir une image par défaut, j’y ai également ajouté une background-image.
a:before {
content: "";
display: block;
margin: auto;
margin-bottom: 5px;
height: 80px;
width: 80px;
background-position: center;
background-repeat: no-repeat;
background-size: contain;
background-image: url("folder.svg");
}Ensuite, vous allez vouloir afficher une icon différente pour chacun des types de fichier. Pour cela on peut passer par une propriété des sélecteurs CSS qui permet de cibler un attribut par une chaine de caractère qu’il contient. Par exemple :
a[href*=".mp4"]:before, a[href*=".avi"]:before {
background-image: url("avi.svg");
}Ici je cible les liens ayant soit l’extension « .mp4 » soit l’extension « .avi » et je ré-écrit simplement leur background-image. Vous pouvez adapter ensuite votre CSS pour prendre en compte autant de cas que vous voulez (j’ai par exemple regroupé tous les medias par types: vidéos ensemble, photos ensemble, …).
Voilà, vous avez désormais un DirectoryIndex un peu plus agréable à utiliser. Notez que vous pouvez également décider d’ajouter du HTML dans votre header.html, votre code sera affiché au dessus du <ul>. Et vous pouvez faire la même chose avec un footer.html qui sera affiché en dessous du <ul> !
