Chibi-nah::blog

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

Archives

Fancy index, version nginx

Publié le : dim. 15 mai 2022

Tags : #fancy index, #nginx

Introduction

Nous avions vu précédemment comment utiliser fancy-index avec Apache httpd. Voyons maintenant comment procéder avec nginx.

Tout d'abord, nginx ne supporte pas nativement1 les fichiers .htaccess. Le paramétrage de fancy index se fait donc dans le paramétrage du site ou du vhost.

Note

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

Sans Fancy Index

En utilisant la directive autoindex on, la liste des fichiers apparaît alors.

Configuration de nginx :

server {
    listen 80;
    listen [::]:80;
    charset UTF-8;

    location / {
        root /srv/demo/nginx;
        autoindex on;
    }
}

Avec Fancy Index

Note

Penser à installer le module http-fancyindex. Sous Debian et dérivées, c'est le paquet libnginx-mod-http-fancyindex

Avis

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

Note

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

Remplaçons autoindex par fancyindex.

Configuration de nginx :

server {
    listen 80;
    listen [::]:80;
    charset UTF-8;

    location / {
        root /srv/demo/nginx;
        fancyindex on;
    }
}

Résultat ?

Le style a effectivement changé, et c'est nettement plus flagrant ici comparé à Apache httpd.

Options de Fancy Index

Pour la liste de toutes les options, se référer à la page de documentation officielle sur le site nginx :

https://www.nginx.com/resources/wiki/modules/fancy_index/

Bon, comparé à Apache httpd, la liste des options est réduite.

Les options sont :

  • fancyindex (on|off) : activation/désactivation de fancy index ;
  • fancyindex_css_href uri : uri = chemin vers le fichier .css ;
  • fancyindex_exact_size (on|off) : affichage précis ou arrondie (au ko, Mo ou Go) de la taille des fichiers ;
  • fancyindex_footer uri : chemin vers le fichier .html (cela peut être une URL externe) contenant la partie basse de la page (pied de page) ;
  • fancyindex_header : chemin vers le fichier .html (cela peut être une URL externe) contenant la partie haute de la page (entête de page) ;
  • fancyindex_ignore fichier1 fichier2 … : liste de fichiers à ne pas afficher dans la liste. Si nginx a été compilé avec le support des expressions régulières (PCRE), il est alors possible d'utiliser des regex pour spécifier la liste des fichiers à ignorer ;
  • fancyindex_localtime (on|off) : affichage de l'heure locale ou UTC.

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 du copier/coller de l'article Fancy index (Apache httpd) :)

L'une des différences avec Apache httpd, il n'y a pas d'icônes d'affichées avec nginx. Il n'y a pas non plus de directive ou de paramètre pour spécifier des icônes.

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

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

#list .link a::before{
    content:"";
    padding: 12px;
    background: url('icons/text.svg') left center no-repeat;
}

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

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

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

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

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

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

Note

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

Ajouter dans la configuration du site, le paramètre fancyindex_css_href "style.css";. Le fichier devrait ressembler à ceci :

server {
    listen 80;
    listen [::]:80;
    charset UTF-8;

    location / {
        root /srv/demo/nginx;
        fancyindex on;
        fancyindex_css_href "style.css";
    }
}

Résultat ?

Changer complètement le style et la présentation

Pour les personnes ayant lu l'article fancy index (avec Apache httpd), ce qui suit ne sera pas une surprise. Cela fonctionne quasiment de la même manière. Du coup, je n'entrerai pas dans les détails.

Organisation des fichiers :

Démo 4 $ 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

La seule différence ici, c'est l'absence de fichier .htaccess.

Le contenu des fichiers .head.html et .footer.html est identique à la version Apache httpd, excepté un saut de ligne via <br /> après l'image ajouté dans .head.html.

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 .style.css contient quelques modifications. En effet, il faut ajouter les icônes pour nginx :

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;
}

/* Icons */

#list .link a::before{
    content:"";
    padding: 12px;
    background: url('.icons/text.svg') left center no-repeat;
}

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

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

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

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

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

#list 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;
    }
}

Ajouter dans la configuration du site les paramètres fancyindex_header et fancyindex_footer. Le fichier devrait ressembler à ceci :

server {
    listen 80;
    listen [::]:80;
    charset UTF-8;

    location / {
        root /srv/demo/nginx;
        fancyindex on;
        fancyindex_css_href ".style.css";
        fancyindex_header ".head.html";
        fancyindex_footer ".footer.html";
    }
}

La présentation est toutefois un peu différente de celle obtenue avec Apache httpd.

Thème clair

Thème sombre

Conclusion

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

--

  1. Peut être que c'est supporté via un module… flemme de chercher ↩