Accueil > Web > Site web statique avec internationalisation

Site web statique avec internationalisation

J’ai eu récemment le besoin de faire un site statique (HTML / CSS / JavaScript), tout en gérant l’internationalisation.

Une des méthodes employée dans ce cas consiste à créer une URL par langue, avec une page HTML par langue. Je ne trouve pas cette méthode appropriée, car cela signifie maintenir un même « template » de page sur plusieurs fichiers (1 par langue).

 

La méthode que j’emploie ici utilise le JavaScript:

  • Un fichier JavaScript par langue, pour tous les textes à traduire au format classique « clef:valeur » (Format JSON)
  • Une bibliothèque JavaScript qui effectue la traduction en utilisant les fichiers précédents (et gérant les « arguments » pour la traduction)

Exemple de code

Tout d’abord le format des fichiers de langue:

var label_fr = {
« key.text »: »Mon texte traduit »,
« all.rights.reserved »: »Tous droits réservés. {0} {1} Version {2} »
};

var label_en = {
« key.text »: »My text translated »,
« all.rights.reserved »: »All rights reserved. {0} {1} Version {2} »
};

 

Avec pour la 2ème clef, 3 arguments: {0} / {1} / {2}.

 

Cote HTML, les parties contenant du texte à traduire auront ce format:

<div>
<p data-lang= »key.text »></p>
<p data-lang= »all.rights.reserved;2012;Nicolas Herault;1.0.0″></p>
</div>

Vous remarquerez que le 2ème texte traduit comporte 4 parties séparées par des « ; » :

  • La première partie correspond à la clef du texte à traduire.
  • Les 3 parties suivantes sont les arguments du texte à traduire.

 

Ensuite, il ne vous reste plus qu’à créer des liens pour indiquer quelle langue on souhaite voir s’afficher :

<ul>
<li><a href= »javascript:changeLocal(‘fr’) »>Fr</a></li>
<li><a href= »javascript:changeLocal(‘en’) »>En</a></li>
</ul>

 

Et à la fin de votre fichier HTML:

 

<script type= »text/javascript »>
 
// Creation de la local, francais par defaut.
var i18n = new I18n();
changeLocal(‘fr’);
 
// Gestion du changement de la local.
function changeLocal(local) {
if (local == ‘fr’) {
i18n.load(labels_fr);
} else if (local == ‘en’) {
i18n.load(labels_en);
}
 
$(« *[data-lang] »).each(function (i) {
var arrayTrad = $(this).attr(« data-lang »).split(« ; »);
this.innerHTML = i18n.translate.apply(i18n, arrayTrad);
});
}
</script>

 

Vous pouvez télécharger le code source complet:

http://blog.viseo-bt.com/wp-content/uploads/2013/07/Site-web-statique-avec-internationalisation.zip

 

J’ai rajouté plusieurs choses dans celui-ci:

  • Une gestion des menus et de l’affichage des différentes parties du site.
  • Une gestion des onglets avec JQueryUI.

 

Ce code servira de base à un futur article sur l’optimisation d’un site coté client.

 

Nicolas Hérault

Categories: Web Tags: , , ,