Comment ce site est généré
Ce site est généré à l'aide du préprocesseur m4. Cela permet d'avoir une page réduite au minimum au niveau de l'aspect, m4 se chargeant de construire chaque page pour qu'elles aient toutes le même aspect visuel. Cela permet aussi d'éviter l'emploi de cadres pour avoir en permanance le menu du site visible, ou l'emploi de PHP qui n'est pas portable et lent à exécuter.
Un exemple basique
Voici une utilisation basique de ce préprocesseur pour générer un petit site, avec un meme en-tete et pied de page. Cette version marche avec une version native de m4 (ie. que l'on peut trouver sous FreeBSD, par exemple).
Chacune des pages contient une instruction pour inclure l'en-tete, le texte de la page et une instruction pour inclure le pied de page. Voici un exemple de page :
include(tete.m4)
<h1> Vous etes dans la page Abricot</h1>
<h2> mmmmh , tu sens bon, c un shampooing aux abricots ?</h2>
include(pied.m4)
|
Ce fichier, abricot.m4, est ainsi réduit au strict minimum.
Voici le contenu du fichier tete.m4 :
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=ISO-8859-1">
<title>Site des halles de Rungis</title>
</head>
<body bgcolor="#FFFFFF">
<table>
<tr>
<td>
<a href="peche.html">Peche</a><br>
<a href="pomme.html">Pomme</a><br>
<a href="poire.html">Poire</a><br>
<a href="abricot.html">Abricot</a><br>
</td>
<td>
<!-- Fin de l'en tete -->
|
et le fichier pied.m4 :
<!-- Debut du pied de page -->
</td>
</tr>
</table>
</body>
</html>
|
Pour générer les pages HTML, il faut exécuter la commande suivante :
m4 abricot.m4 > abricot.html
|
Pour transférer les pages HTML sur le serveur Web, on peut utiliser un outil comme ncftp. Afin de ne pas devoir rentrer le mot de passe du compte FTP, on peut remplir un fichier comme le fichier .localhost.cfg par exemple :
host localhost
user mdecore
pass <secret>
|
et le protéger en lecture des utilisateurs peu scrupuleux :
$ chmod 600 .localhost.cfg
$
|
Il ne reste plus qu'à tranférer le fichier :
ncftpput -f ./.localhost.cfg $HOME/public_html abricot.html
|
L'emploi d'un Makefile peut automatiser les tâches de génération de page HTML et transfert sur le serveur FTP :
#
# Liste des suffixes pour les regles non standard
#
.SUFFIXES: .m4 .html .put
#
# Tous les fichiers sources
#
SRC = index.m4 poire.m4 pomme.m4 abricot.m4 peche.m4
#
# Les regles non standard
#
#
# Liste des fichiers de destination : prendre le prefixe de
# chaque fichier source et substituer l'exetention .m4 par
# .html
#
DEST = $SRC:.m4=.html
#
# Liste des fichiers de transfert : prendre le prefixe de
# chaque fichier source et substituer l'exetention .m4
# par .put
#
PUT = $SRC:.m4=.put
all : $DEST
transfert : $PUT
clean :
rm -f $DEST $(PUT)
.m4.html:
m4 $< > $@
.html.put:
ncftpput -f ./.localhost.cfg $HOME/public_html $<
touch $@
|
On n'a plus dès lors qu'à éditer les fichier .m4 et à taper make pour construire des pages HTML ayant toutes le même aspect visuel et les mettre en ligne.
Un exemple un peu plus sofistiqué
Pour ce site, c'est le même principe que précédemment qui est employé, avec quelque petits ajouts pour traiter deux versions (une en français, une en anglais), avoir toutes les pages avec un titre, avoir la date de compilation de la page en bas, etc.
La version de m4 utilisée ici est la version GNU, disponible en standart sous GNU/Linux, et téléchargable pour les autres systèmes (gm4 sour FreeBSD, par exemple). Pour les Makefile, c'est aussi la version de make qui sera utilisée (gmake sous FreeBSD, par exemple).
Cette version a largement été inspirée de la doc de John Perr sur http://fr.linuxfocus.org/Francais/September1999/article111.html.
Voici un exemple de fichier source, le fichier index-fr.m4 :
TITRE(Bienvenue sur la page perso de Mathieu DECORE)
ENTETE(Bienvenue sur la page perso de Mathieu DECORE)
<p>La page d'accueil de tarsier
PIED
|
Le même fichier en version anglaise, index-en.m4, donne :
TITRE(Welcome on Mathieu DECORE's home page)
ENTETE(Welcome on Mathieu DECORE's home page)
<p>This is my page...
PIED
|
Voici le fichier de look, look.m4, qui sera passé au préprocesseur m4 :
divert(-1)
Fichier contenant les definitions des macros
divert(0)
changequote({,})
ifdef({LANG},,{define({LANG},{fr})})
include({lang-}LANG{.m4})
ifdef({_BASE_URL_},,{define({_BASE_URL_},
http://mdecore.free.fr/linux)})
define({_ANNEE_},esyscmd(date +%Y)) dnl ANNEE=date +%Y
define({_DATE_},esyscmd(date +%d/%m/%y))
define({_USER_},esyscmd(echo $USER))
define({_HOSTNAME_},esyscmd(hostname --fqdn))
define({TITRE},{define(_TITRE_, $1)})
define({ENTETE},{
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>$1</title>
<meta http-equiv="Content-Type"
content="text/html; charset=ISO-8859-1">
<meta name="generator" content="m4">
<LINK REL="STYLESHEET" HREF="_BASE_URL_/look.css">
</head>
<body bgcolor="#FFFFFF">
<!-- Fichier généré par m4 le _DATE_ par _USER_ sur
_HOSTNAME_ -->
<table width="100%" border="0">
<tr><td align="center" colspan="2">
<h1>_TITRE_</h1>
<tr><td align="left" valign="top" width="15%">
<a href="./index-fr.html">_FRANCAIS_</a><br><br>
<a href="./index-en.html">_ANGLAIS_</a><br>
<a href="_BASE_URL_/doc/index-LANG.html">_DOC_</a><br>
<a href="_BASE_URL_/prog/index-LANG.html">_PROG_</a><br>
<a href="_BASE_URL_/prog/link-LANG.html">_LINK_</a><br>
<a href="_BASE_URL_/divers-LANG.html">_DIVERS_</a><br>
<a href="_BASE_URL_/comment-LANG.html">_COMMENT_</a><br><br>
<a href="_BASE_URL_/index-LANG.html">_HOME_</a><br>
<p>
<a href="http://validator.w3.org/check/referer">
<img border="0"
src="http://www.w3.org/Icons/valid-html401"
alt="Valid HTML 4.01!" height="31" width="88"></a>
</p>
<p>
<a href="http://jigsaw.w3.org/css-validator/">
<img style="border:0;width:88px;height:31px"
src="http://jigsaw.w3.org/css-validator/images/vcss"
alt="Valid CSS!"></a>
</p>
<P>
<A HREF="http://www.hertgen.com/anybrowser/" >
<IMG SRC="_BASE_URL_/ab-white.gif"
ALT="Best Viewed With Any Browser" BORDER="0"></A>
</P>
<td align="left">
})
define({PIED},{
</table>
<hr size="0">
<font size="-1">
<em>_MOI_<br>
_MAJ_
esyscmd(date +%d/%m/%y)
- ©
<a href="mailto:mdecore@linux-france.org">
mdecore@linux-france.org</a>
_ANNEE_
</em></font>
</body>
</html>
})
|
Pour plus de détails sur la signification de ces instructions, voir la documentation citée précedemment.
Les fichiers lang-fr.m4 et lang-en.m4, inclus par look.m4, contiennent les textes du menus dans chacune de leur langue respective. Le fichier lang-fr.m4 contient :
define({_ANGLAIS_},{Anglais})
define({_FRANCAIS_},{Français})
define({_DOC_},{Documentations})
define({_PROG_},{Programmes})
define({_DIVERS_},{Divers})
define({_LINK_},{Liens})
define({_COMMENT_},{Comment ce site est généré})
define({_HOME_},{Retour à la page principale})
define({_MOI_},{Page maintenue par Mathieu DECORE})
define({_MAJ_},{Dernière mise à jour :})
|
et le fichier lang-en.m4 contient :
define({_ANGLAIS_},{English})
define({_FRANCAIS_},{French})
define({_DOC_},{Documentations (in French)})
define({_PROG_},{Software})
define({_DIVERS_},{Misc})
define({_COMMENT_},{How this site is generated})
define({_LINK_},{Links})
define({_HOME_},{Home page})
define({_MOI_},{Page maintained by Mathieu DECORE})
define({_MAJ_},{Last update :})
|
Une feuille de style est utilisée, look.css, en partie recopiée de la feuille de style générée par LaTeX2HTML (pour pouvoir ensuite utiliser la même feuille de style pour tous les fichiers HTML, y compris ceux générés par LaTeX2HTML) :
BODY {color: black; background: white}
/*
* Ce qui suit vient de la feuille de style utilisee par les
* document generes pas LaTeX2HTML
*/
.MATH { font-family: "Century Schoolbook", serif; }
.MATH I { font-family: "Century Schoolbook", serif;
font-style: italic }
.BOLDMATH { font-family: "Century Schoolbook", serif;
font-weight: bold }
/* implement both fixed-size and relative sizes */
SMALL.XTINY { font-size : xx-small }
SMALL.TINY { font-size : x-small }
SMALL.SCRIPTSIZE { font-size : smaller }
SMALL.FOOTNOTESIZE { font-size : small }
SMALL.SMALL { }
BIG.LARGE { }
BIG.XLARGE { font-size : large }
BIG.XXLARGE { font-size : x-large }
BIG.HUGE { font-size : larger }
BIG.XHUGE { font-size : xx-large }
/* heading styles */
H1 { }
H2 { }
H3 { }
H4 { }
H5 { }
/* mathematics styles */
DIV.displaymath { } /* math displays */
TD.eqno { } /* equation-number cells */
/* document-specific styles come next */
|
Enfin, un Makefile permet de compiler les pages HTML ou de les transférer sur le serveur FTP :
#
# Le preprocesseur utilise
#
M4=gm4
#
# Liste des fichiers (sans l'extension -fr.html)
#
FICHIERS=index
#
# Liste des fichiers a generer (rajout des extensions
# -fr.html, -en.html)
#
FICHIERS_HTML=$FICHIERS:=-fr.html $FICHIERS:=-en.html \
doc/index-fr.html prog/index-fr.html \
prog/monLinux/index-fr.html comment-fr.html
#BASE_URL=http://localhost/~mdecore
#BASE_URL=http://www.linux-france.org/~mdecore/html
BASE_URL=$(shell pwd)
BASE_URL=http://mdecore.free.fr/linux
all : $(FICHIERS_HTML) look.m4 lang-en.m4 lang-fr.m4 #transfert
%-fr.html : %-fr.m4
$(M4) -D_BASE_URL_=$(BASE_URL) -DLANG=fr look.m4 $< > $@
ln -sf index-fr.html index.html
# ncftpput -f $$HOME/.free.cfg /linux/`dirname $@` $@
%-en.html : %-en.m4
$(M4) -D_BASE_URL_=$(BASE_URL) -DLANG=en look.m4 $< > $@
transfert : $(FICHIERS_HTML)
ncftpput -R -f $$HOME/.free.cfg /linux *
clean :
rm -f $(FICHIERS_HTML) index.html
|
Les scripts utilisés
Plusieurs scripts shell sont utilisée pour effectuer un traitement post-m4.
css.sh
todocbook.sh
generepage-prog.sh
sh2html
ftp.sh : transfert par ftp des fichiers. L'idée de ce script m'est venue en essayant de transférer le contenu complet de mon site sur un serveur FTP. Voici les temps que j'ai obtenus avec ncftp :
$ time -p ncftpput -R -f $HOME/.free.cfg /linux *
real 2517.40
user 0.43
sys 1.58
$
|
soit plus de 40 minutes, pour un site faisant environ 9 Mo :
$ du -ksh public_html/
9M public_html
$
|
J'ai alors écrit un script qui parcourt récursivement un répertoire et écrit les commandes à passer au ferveur FTP pour y copier un fichier ou y créer un répertoire. Une fois terminé, le contenu de ce fichier est passé à la commande ftp qui se charge de transférer tout le site. Le temps alors mis est surprenant :
$ time -p ftp.sh -f ~/.free /linux *
real 151.39
user 0.62
sys 5.80
$
|
soit 2 mn 30 !
Les liens utiles
Une fois le site mis en ligne, il faut vérifier que le code HTML est valide et qu'aucun lien n'est défectueux. Pour cela on peut s'aider du validateur du w3c http://validator.w3.org/, et du validateur de feuilles de styles http://jigsaw.w3.org/css-validator/. Pour les liens défectueux, rendez-vous à cette adresse : http://linkchecker.stacken.kth.se/.
Page maintenue par Mathieu DECORE
Dernière mise à jour :
25/03/06
- ©
mdecore@linux-france.org
2006