Personnaliser l’affichage de son FTP

Personnaliser le listing des fichiers apache

Dans ce tutoriel vidéo vous allez apprendre comment changer l’apparence de votre FTP. Quand je parle de FTP je veux parler de l’arborescence lorsque nous naviguons dans les dossiers de nos sites avec un navigateur. Pour vous faire une idée concrète du tutoriel, voici une image avant/après (ou cliquez ici pour voir un exemple) :

 

Le principe pour personnaliser son FTP est très simple et il se fait en 2 grandes étapes :

  1. On crée ces fichiers header et footer qui contiennent le design de l’entête et du pied de page
  2. On affecte à chaque type de fichier (.pdf, .avi et j’en passe) une image plus jolie que celle par défaut mais aussi une description.

Voici la vidéo qui détaille principalement la seconde étapes.

Comme vous avez pu le constater dans la vidéo ce n’est pas bien compliqué, c’est surtout très répétitif. Néanmoins voici un petit résumé sur le fichier htaccess avec quelques précisions :

# On précise le chemin de l'entete et footer
HeaderName /tutoriel/ftp/header.htm
ReadmeName /tutoriel/ftp/footer.htm

# On cache certains fichier et le dossier Images
IndexIgnore .htaccess footer.htm header.htm /tutoriel/ftp/Images
# On donne quelques options : taille automatique, dimensions des icones
# mettre les dossiers en premier et ne pas tenir compte de la casse
IndexOptions SuppressHTMLPreamble FancyIndexing NameWidth=* DescriptionWidth=* IconWidth=32 IconHeight=32 FoldersFirst IgnoreCase
IndexOrderDefault Ascending Description

# On personnalise l'icone et la description pour les fichiers pdf
AddIcon (IMG,/tutoriel/ftp/Images/pdf.png) .pdf .PDF
AddDescription "Document Adobe PDF" *.pdf *.PDF

# Cas particulier du dossier parent (revenir en arrière)
AddIcon (PAR,/tutoriel/ftp/Images/back.png) ..
AddDescription "Revenir en arrière" ..

# Cas particulier des dossiers
AddIcon (DIR,/tutoriel/ftp/Images/folder.png) ^^DIRECTORY^^
AddDescription "Répertoire" */

# Pour les extensions inconnus, une image par défaut
DefaultIcon /tutoriel/ftp/Images/unknow.png

Comme promis voici les fichiers utilisés lors de cette vidéo ainsi qu’un lien pour télécharger le tutoriel : Télécharger les fichiers.

J’espère que vous avez apprécié le tutoriel, n’hésitez pas à poser des questions et faites un tour sur la page facebook ça me fera plaisir !

15 commentaires ont été ajoutés, ajoutez le vôtre.

Vous pouvez laisser un commentaire, cependant je ne peux pas vous garantir qu'il sera modéré rapidement ou qu'il aura une réponse, faute de temps pour m'occuper du site.

  1. Legarsfred

    Super Tuto, merci beaucoup. J’ai réussi à le mettre en ligne impec. ça marche super :o)

    Maintenant je vais essayer de protéger mes dossiers par un mot de passe (un mot de passe différent pour chaque dossier.. Une autre paire de manches :o)

  2. Anon

    http://www.webmasterworld.com/apache/3589651.htm

    3’20 » On peut utiliser le mode xhtml strict et utiliser un fichier css externe, avec une balise link, de la même manière que dans une page classique…
    6’03 » « l’erreur que tu ne comprend pas trop » viens de ton éditeur, il te dit que tu as déjà un fichier du même nom ouvert dans le buffer (onglet 1)
    22’35 » « J’aurai bien aimé vous montrer mais là je peux pas! » XD
    Tu as qu’un seul terminal et sans onglet dans ton ubuntu?
    25’30 » Rien a voir avec le « cache » tu as une erreur d’orthographe, c’est « unknowN » et pas « unknow »

    J’ai bien rigolé MERCI
    Félicitation tout de même pour l’initiative… bon courage

    • Madrzejewski Alexis

      Bonjour Anon,

      Merci pour les précisions, concernant les quelques erreurs, mea culpa mais j’ai fait le tutoriel en live avec un peu de préparation avant et c’est difficile de repérer des erreurs comme le unknown 🙂
      Au moins je t’aurais fait rire ^^

  3. nandragorya

    Bonjour est il possible dans ce même .htaccess d’interdire au robots d’indexer cette partie du site.

    User-agent: *
    Disallow: /emailing/

    Quand je rajoute ces deux lignes tout disparait.
    Que dois-je faire?