Chibi-nah::blog

Des geekeries, de la MAO, de tout et de rien…

Archives

Fancy index, version lighttpd

Publié le : jeu. 19 mai 2022

Tags : #fancy index, #lighttpd

Introduction

Après les listings de fichiers customisés avec Apache httpd et nginx, qu'en est-il de lighttpd ?

Note

Le site web fonctionnant avec Apache, il n'y aura pas de démos non plus.

Avec lighttpd, le module permettant d'afficher la liste des fichiers est mod_dirlisting. Ce module gère non seulement la génération de la liste des fichiers mais propose également quelques modifications possibles côté affichage. Cependant, le côté personnalisable étant assez limité (dixit la doc), la doc officielle recommande d'utiliser plutôt php ou python pour avoir plus de possibilités au niveau modifications/personnalisation/customisation… nous verrons ici que mod_dirlisting est amplement suffisant.

https://redmine.lighttpd.net/projects/lighttpd/wiki/Docs_ModDirlisting

Sans Fancy Index

Dans la configuration du vhost, il suffit d'ajouter dir-listing.activate = "enable".

Simple et sobre.

Configuration de lighttpd :

$HTTP["host"] =~ "localhost" {
    server.document-root = "/srv/demo/lighttpd"
    dir-listing.encoding = "utf-8"
    dir-listing.activate = "enable"
}

Avis

Redémarrer le service lighttpd après chaque modification du fichier de configuration.

Note

Ici, le fichier de configuration du site est /etc/lighttpd/conf-enabled/001-demo.conf

Avec Fancy Index

Alors, là, ça va être très différent de Apache httpd et nginx. En effet, il n'y a pas de paramètre pour activer Fancy Index. En fait, c'est « déjà » activé par défaut. Par contre, si on désactive dir-listing.auto-layout, voici ce que l'on obtient :

$HTTP["host"] =~ "localhost" {
    server.document-root = "/srv/demo/lighttpd"
    dir-listing.encoding = "utf-8"
    dir-listing.activate = "enable"
    dir-listing.auto-layout = "disable"
}

En fait, désactiver auto-layout permet de définir soi-même son code html

Options d'affichage

La liste étant assez longue, on ne va pas tout énumérer. Se référer à la page de documentation officielle sur le site de lighttpd :

https://redmine.lighttpd.net/projects/lighttpd/wiki/Docs_ModDirlisting

On va se contenter de l'essentiel :

  • dir-listing.activate : activer le listing des fichiers et répertoires.
  • dir-listing.hide-dotfiles : masquer les fichiers commençant par un point. Activé par défaut.
  • dir-listing.external-css : spécifie une feuille de style à charger.
  • dir-listing.encoding : encodage des fichiers par défaut. Dans les exemples plus haut, j'ai indiqué utf-8.
  • dir-listing.show-readme : permet d'afficher le contenu de README.txt après le listing. À noter : on peut spécifier un fichier autre que README.txt
  • dir-listing.hide-readme-file : masque le fichier README.txt. Désactivé par défaut.
  • dir-listing.show-header : permet d'afficher le contenu de HEADER.txt avant le listing. À noter : on peut spécifier un fichier autre que HEADER.txt
  • dir-listing.hide-header-file : masque le fichier HEADER.txt. Désactivé par défaut.
  • dir-listing.set-footer : permet d'afficher une chaîne de caractères. Par défaut, c'est "<PACKAGE_NAME>/<PACKAGE_VERSION>", ce qui affiche lighttpd/1.4.64.
  • dir-listing.encode-header : permet d'afficher tel-quel (sans interpréter) le code html présent dans HEADER.txt. Pour rendre interprétable par le navigateur web le code HTML écrit, il faut passer ce paramètre à disable.
  • dir-listing.encode-readme : permet d'afficher tel-quel (sans interpréter) le code html présent dans README.txt. Pour rendre interprétable par le navigateur web le code HTML écrit, il faut passer ce paramètre à disable.
  • dir-listing.auto-layout : permet de désactiver le template html par défaut de lighttpd. Cela permet d'utiliser du contenu html complet pour header et readme.

Ajouter des icônes

Les icônes utilisées ici pour l'exemple proviennent du thème Red Dot Black Plasma https://github.com/L4ki/Red-Dot-Black-Plasma-Themes

Créer un répertoire icons, faire une petite sélection d'icônes, les appeler

  • archive.svg
  • cue.svg
  • flac.svg
  • folder.svg
  • image.svg
  • ogg.svg
  • text.svg
  • up.svg

Oui, c'est encore du copier/coller de l'article Fancy index (Apache httpd) :)

L'une des différences avec Apache httpd, et c'est commun avec nginx, il n'y a pas d'icônes d'affichées avec lighttpd. Il n'y a pas non plus de directive ou de paramètre pour spécifier des icônes (copier-coller depuis l'article fancy index avec nginx).

Pas grave, on va les ajouter dynamiquement, via une feuille de style :)

Créer un fichier style.css, avec ce contenu :

/* style par défaut de lighttpd */

a, a:active {
    text-decoration: none;
    color: blue;
}

a:visited {
    color: #48468F;
}

a:hover, a:focus {
    text-decoration: underline;
    color: red;
}

body {
    background-color: #F5F5F5;
}

h2 {
    margin-bottom: 12px;
}

table {
    margin-left: 12px;
}

th, td {
    font: 90% monospace;
    text-align: left;
}

th {
    font-weight: bold;
    padding-right: 14px;
    padding-bottom: 3px;
}

td {
    padding-right: 14px;
}

td.s, th.s {
    text-align: right;
}
div.list {
    background-color: white;
    border-top: 1px solid #646464;
    border-bottom: 1px solid #646464;
    padding-top: 10px;
    padding-bottom: 14px;
}

div.foot {
    font: 90% monospace;
    color: #787878;
    padding-top: 4px;
}

/* icônes */
a::before{
    content:"";
    padding: 12px;
    background: url('icons/text.svg') left center no-repeat;
}

a[href$="/"]::before {
    background: url('icons/folder.svg') left center no-repeat;
}

a[href^=".."]::before {
    background: url('icons/up.svg') left center no-repeat;
}

a[href$=".cue"]::before {
    background: url('icons/cue.svg') left center no-repeat;
}

a[href$=".ogg"]::before {
    background: url('icons/ogg.svg') left center no-repeat;
}

a[href$=".flac"]::before {
    background: url('icons/flac.svg') left center no-repeat;
}

a[href$=".zip"]::before {
    background: url('icons/archive.svg') left center no-repeat;
}

C'est long ? Normal. En plus des icônes, j'ai copié-collé la feuille de style par défaut de lighttpd, pour garder le même style d'affichage que celui par défaut.

Note

On peut ajouter d'autres icônes et extensions, ou utiliser des règles css différentes.

Dans la configuration du site, ajouter dir-listing.external-css = "style.css", comme ceci :

$HTTP["host"] =~ "localhost" {
    server.document-root = "/srv/demo/lighttpd"
    dir-listing.encoding = "utf-8"
    dir-listing.activate = "enable"
    dir-listing.auto-layout = "enable"
    dir-listing.external-css = "style.css"
}

Résultat ?

On a gardé l'aspect visuel par défaut de lighttpd, tout en ajoutant dynamiquement les icônes voulues.

HEADER et README

Avant de passer à la section où on change complètement l'affichage, on va regarder ces deux éléments que sont README.txt et HEADER.txt

Créons deux fichiers, un s'appelant HEADER.txt et l'autre README.txt.

Dans HEADER.txt, mettons simplement :

Je suis HEADER.txt

Et dans README.txt :

Je suis README.txt

Modifions la configuration du site, en ajoutant les lignes concernant readme et header :

$HTTP["host"] =~ "localhost" {
    server.document-root = "/srv/demo/lighttpd"
    dir-listing.encoding = "utf-8"
    dir-listing.activate = "enable"
    dir-listing.show-readme = "enable"
    dir-listing.hide-readme-file = "enable"
    dir-listing.show-header = "enable"
    dir-listing.hide-header-file = "enable"
}

Et enfin, voyons le résultat :

Je suis HEADER.txt est bien affiché au dessus, et Je suis README.txt est bien affiché en dessous du listing.

Note

Pour simplifier cet exemple, je n'ai pas utilisé la feuille de style.

Changer complètement le style et la présentation

On commence à avoir l'habitude, c'est la 3e fois que je fais cette manip.

L'organisation des fichiers est identique à celle dans l'article de nginx.

Organisation des fichiers :

Démo 5 $ tree -a
.
├── .cover.jpg
├── .footer.html
├── .head.html
├── .icons
│   ├── archive.svg
│   ├── cue.svg
│   ├── flac.svg
│   ├── folder.svg
│   ├── image.svg
│   ├── ogg.svg
│   ├── text.svg
│   └── up.svg
├── .style.css
├── Ys2EMIDI.zip
├── Ys2-SC8820.cue
├── Ys2-SC8820.flac
└── Ys2-SC8820.ogg

1 directory, 16 files

Le contenu des fichiers .head.html et .footer.html est identique à la version nginx.

Contenu du fichier .head.html :

<!DOCTYPE html>
<html lang="fr">
    <head>
        <meta charset="utf-8" />
        <link rel="stylesheet" type="text/css" href=".style.css">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>ys2</title>
    </head>
    <body>
        <p>Ys II Eternal (MIDI) - SC-88Pro - SC-8820</p>
        <img src=".cover.jpg" />
        <br />

Contenu du fichier .footer.html :

        <p>Ys2-SC8820.cue + flac : Version SC-88Pro enregistrée avec un Roland SC-8820. L'ensemble des pistes est dans un seul fichier flac, d'où la nécessité d'utiliser le fichier .cue comme TOC.</p>
        <p>Ys2-SC8820.ogg : Pareil que la version flac, mais réencodé/compressé en ogg/vorbis. Il faudra modifier le fichier .cue pour indiquer que le fichier audio est le fichier .ogg et non .flac</p>
        <p>À noter : les nom des titres correspondent aux noms indiqués dans program.txt et ne correspondent pas forcément aux titres des albums.</p>
        <p>Ys2EMIDI.zip : contient l'ensemble de l'OST au format MIDI. Nécessite un Roland Sound Canvas SC-88, SC-88Pro, SC-8820, SC-8850 ou SC-D70</p>
    </body>
</html>

la feuille de style contient les modifications spécifiques au formatage de lighttpd pour les icônes et le tableau.

html {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif; }

body {
    color: #4a4a4a;
    background-color: #e9e9e9;
}
a {
    text-decoration: none;
    color: #2c8898;
}

a:hover {
    color: #982c61;
    text-decoration: none;
border-bottom: 2px solid #4a4a4a;
}

img {
    height: auto;
    max-width: 100%;
    margin-top: 0px;
}


/* lighttpd */
table {
    margin-left: 12px;
}

th, td {
    text-align: left;
}

th {
    font-weight: bold;
    padding-right: 14px;
    padding-bottom: 3px;
}

td {
    padding-right: 14px;
}

td.s, th.s {
    text-align: right;
}

/* icônes */
a::before{
    content:"";
    padding: 12px;
    background: url('.icons/text.svg') left center no-repeat;
}

a[href$="/"]::before {
    background: url('.icons/folder.svg') left center no-repeat;
}

a[href^=".."]::before {
    background: url('.icons/up.svg') left center no-repeat;
}

a[href$=".cue"]::before {
    background: url('.icons/cue.svg') left center no-repeat;
}

a[href$=".ogg"]::before {
    background: url('.icons/ogg.svg') left center no-repeat;
}

a[href$=".flac"]::before {
    background: url('.icons/flac.svg') left center no-repeat;
}

a[href$=".zip"]::before {
    background: url('.icons/archive.svg') left center no-repeat;
}

/* dark theme */
@media (prefers-color-scheme: dark) {
    body, h1, h2, h3, h4, h5, h6 {
        color: #d9d8dc;
        background-color: #222222;
    }

a {
        color: #eb99a1;
    }
    a:hover {
        color: #DA4453;
        border-bottom: 2px solid #d9d8dc;
    }
}

Éditons le fichier de configuration pour indiquer d'utiliser les fichiers .footer.html et .head.html.

$HTTP["host"] =~ "localhost" {
    server.document-root = "/srv/demo/lighttpd"
    dir-listing.encoding = "utf-8"
    dir-listing.activate = "enable"
    dir-listing.show-readme = ".footer.html"
    dir-listing.show-header = ".head.html"
}

Un redémarrage de lighttpd plus tard, et … oups ! Il y a un problème.

Au lieu d'interpréter le code html de Header et de Footer, le navigateur a affiché le contenu.

Pour rappel, dans la liste des paramètres évoqués plus tôt, il y avait ceux-là :

  • dir-listing.encode-header : permet d'afficher tel-quel (sans interpréter) le code html présent dans HEADER.txt. Pour rendre interprétable par le navigateur web le code HTML écrit, il faut passer ce paramètre à disable.
  • dir-listing.encode-readme : permet d'afficher tel-quel (sans interpréter) le code html présent dans README.txt. Pour rendre interprétable par le navigateur web le code HTML écrit, il faut passer ce paramètre à disable.
  • dir-listing.auto-layout : permet de désactiver le template html par défaut de lighttpd. Cela permet d'utiliser du contenu html complet pour header et readme.

Corrigeons le fichier de configuration.

$HTTP["host"] =~ "localhost" {
    server.document-root = "/srv/demo/lighttpd"
    dir-listing.encoding = "utf-8"
    dir-listing.activate = "enable"
    dir-listing.show-readme = ".footer.html"
    dir-listing.show-header = ".head.html"
    dir-listing.auto-layout = "disable"
    dir-listing.encode-header = "disable"
    dir-listing.encode-readme = "disable"
}

Une fois corrigé, l'affichage est celui attendu, même si légèrement différent de Apache httpd et nginx.

Thème clair

Thème sombre

Conclusion

Tout comme avec Apache httpd et nginx, on peut modifier complètement la présentation d'un listing de fichiers avec lighttpd.