Table des matières
Service banner.chapril.org
lamp
et celle du service doit être explicite.
Enfin les pages Web générées par le reverse proxy du service n’impliquent pas la même procédure que les autres pages.
À fin d'apporter une personnalisation homogène des services Chapril, une bannière mutualisée a été mise en place.
Son intégration dans les sites des services passe par NGinx en insérant du code au passage.
Au début, les fichiers de la bannière étaient dans le site SPIP du Chapril puis ils ont été déplacés dans le site Web de démonstration : https://banner.chapril.org.
Dépôt Git
Dans la VM lamp
le répertoire /var/www/banner.chapril.org/
est versionné par Git.
Le dépôt distant se situe dans la forge de l’April à l’adresse https://forge.april.org/Chapril/banner.chapril.org.
Ce dépôt abrite deux versions distinctes :
- La version 1 dans
Chapril-banner/v1/
, faite au début juste pour qu'il y ait quelque chose ; - La version 2 actuelle dans
Chapril-banner/v2/
.
Intégration v1 dans NGinx
Deux objectifs :
- rendre disponibles les fichiers utiles à la bannière ;
- modifier le code HTML des pages servies par NGinx.
Fichier prédéfinis
Fichier de configuration pour rendre disponible les fichiers utiles à la bannière :
- /etc/nginx/chapril-banner-location
location /Chapril-banner { proxy_set_header Host banner.chapril.org; proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; proxy_set_header X-Forwarded-Proto $scheme; proxy_pass http://lamp.cluster.chapril.org; }
Fichier de configuration pour modifier le code HTML des pages servies :
- /etc/nginx/chapril-banner
set $banner_head ' <link rel="stylesheet" type="text/css" href="/Chapril-banner/v1/chapril-banner.css" />'; set $banner_body ' <!-- CHAPRIL BANNER --> <header id="chapril-banner"> <div id="chapril-banner-zone"> <div id="chapril-banner-logo"> <a href="https://www.chapril.org/"><img src="/Chapril-banner/v1/chapril-logo-small.png" alt="Logo Chapril" /></a> </div> <div id="chapril-banner-menu"> <ul> <li><a href="https://www.chapril.org/">Accueil Chapril</a></li> <li><a href="https://www.chapril.org/services.html">Services libres</a></li> <li><a href="https://pouet.april.org/@aprilorg">Nous suivre</a></li> <li><a href="https://www.chapril.org/cgu.html">CGU</a></li> <li><a href="https://www.chapril.org/a-propos.html">Mentions légales</a></li> <li><a href="https://www.chapril.org/contact.html">Nous contacter</a></li> </ul> </div> <div id="chapril-banner-aprillogo"> <a href="https://www.april.org/"><img src="/Chapril-banner/v1/april-logo-small.png" alt="Logo April" /></a> </div> </div> </header>'; subs_filter '</head>' ' $banner_head </head>'; subs_filter '</body>' ' $banner_body </body>'; sub_filter_once on;
Inclusion des fichiers prédéfinis
Si le nom de domaine du site ciblé est foo.chapril.org
des directives sont à inclure dans son fichier de configuration /etc/nginx/sites-enabled/foo.chapril.org
:
#[…] include /etc/nginx/sexy-chapril; include /etc/nginx/acme-challenge; include /etc/nginx/chapril-banner-location; #[…] location / { include /etc/nginx/chapril-banner; #[…] }
Fichiers de la bannière
Fichiers de la bannière v1 :
cd /var/www/banner.chapril.org/Chapril-banner/v1/ ll
total 24 -rw-r--r-- 1 root root 3574 oct. 14 01:19 april-logo-small.png -rw-r--r-- 1 root root 1960 oct. 14 01:51 chapril-banner.css -rw-r--r-- 1 root root 2345 oct. 14 01:28 chapril-favicon.png -rw-r--r-- 1 root root 2096 oct. 14 00:50 chapril-logo-small.png -rw-r--r-- 1 root root 1477 oct. 14 01:24 test.xhtml
Intégration v2 dans un site statique
Intégrer manuellement la bannière dans une page Web consiste à inclure quelque lignes de code et à copier deux fichiers.
Pour ça le répertoire Chapril-banner/v2/
doit être récupéré.
Le dépôt banner.chapril.org
dans la forge de l’April contient un exemplaire de ce répertoire.
On y compte trois fichiers :
index.html
pour intégrer la bannière dans la page Web ;chapril-banner.css
pour le style de la bannière ;chapril-banner-logo.png
pour le logotype du Chapril.
Dans le fichier HTML de la page d’accueil on inclut ces lignes de code :
<html lang="fr"> <head> <!--Avant tout style--> <link rel="stylesheet" type="text/css" href="chapril-banner.css"/> <!--Autres styles--> </head> <body> <header> <nav> <!--Balise à substituer !--> </nav> </header> <!--Reste du contenu--> </body> </html>
La balise <nav>
doit être substituée par celle écrite dans le fichier Chapril-banner/v2/index.html
.
Puis l’URL associée au logotype doit être ajustée comme suit :
<img alt="" src="chapril-banner-logo.png"/>
Ainsi la bannière est insérée comme un en-tête de navigation avant le début du contenu.
Les fichiers Chapril-banner/v2/chapril-banner.css
et Chapril-banner/v2/chapril-banner-logo.png
sont à copier à la racine du site statique.