Comment localiser une page de site HTML simple dans mon cas?

Je ne développe aucune application de service Web contenant côté client et côté du serveur arrière (comme java EE ou Ruby on Rails).

Au lieu de cela, je développe simplement une page de site HTML, sur cette page, il y a deux images de drapeau (USA et Chine) qui sont utilisées comme sélection de langue de la page pour les utilisateurs.

Je me demande, pour ce développement de page Web unique (sans système backend), existe-t-il un moyen efficace de mettre en œuvre la localisation de la page (qui affiche la page dans une langue différente) en fonction de la sélection du drapeau de l'utilisateur?

Vous pouvez utiliser l'attribut HTML lang standard:

 <span lang="en">Scale</span><span lang="de">Maßstab</span>

Et puis vous pouvez cacher et afficher les éléments correspondants:

 function select_language(language) { $("[lang]").each(function () { if ($(this).attr("lang") == language) $(this).show(); else $(this).hide(); }); }

J'utilise une sélection simple:

 <select onchange="select_language(this.options[this.selectedIndex].value)"> <option value="en" selected>English</option> <option value="de">Deutsch</option> </select>

Voici un moyen de contourner ceci:

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Localise</title> </head> <body> <a href="#china" onclick="showthis('contentchina')">China flag</a>| <a href="#usa" onclick="showthis('contentusa')">USA flag</a> <div id="contentchina" style="display:none"> Lorem ipsum dolor sit amet... </div> <div id="contentusa" style="display:none"> Duis aute irure dolor... </div> <script> function showthis(nation){ document.getElementById(nation).style.display="block"; return false; } </script> </body> </html>

Réponse facile: non, utiliser un backend est la manière la plus simple et la plus simple d'accomplir cela. Le code Backend est conçu pour le contenu dynamique, c'est ce que vous voulez.

Réponse difficile: c'est une façon de le faire sans diviser vos pages en deux répertoires. Le problème est que vous devrez utiliser Javascript pour générer le contenu de votre page, et c'est généralement une mauvaise idée . Mais vous pouvez utiliser une bibliothèque javascript MVC, plus des appels ajax vers des dossiers de contenu qui tirent le texte (vous devriez toujours avoir deux répertoires pour l'anglais et le chinois, mais ils ne contiendraient que du contenu, pas du HTML). La chose est, il existe de multiples problèmes potentiels avec cette méthode qu'il vaut la peine d'utiliser si vous savez que vos utilisateurs auront un navigateur moderne avec javascript activé.

Je suggère de rechercher un moteur de modèle pour ce problème. Pour moi, ce n'est pas exactement un backend mais plus une zone grise. Quelque chose comme Moustache OU smarty serait parfait pour vous.

Autrement dit, je suis d'accord avec les autres affiches que cela n'est pas raisonnable pour le client.

Vous pouvez utiliser JavaScript pour lire la langue de l'utilisateur et afficher le bon drapeau / contenu:

HTML:

 <img id="myFlag" src="flag_default.png"/>

Et quelques jQuery (puisque vous avez marqué votre question avec jQuery):

 var supportedLangs = ['de', 'en', 'cn']; var userLang = navigator.language; if($.inArray(userLang, supportedLangs) >= 0){ $('myFlag').attr('src', 'flag_' + userLang + '.png'); }

Hjsfiddle

Votre page Web doit comprendre quel encodage il devrait utiliser lors du rendu des caractères chinois:

  <! -- NOTICE THE "charset=UTF-8" !!!! --> <head> <meta content="text/html; charset=UTF-8" http-equiv="content-type"/> </head>

Oui, c'est possible. Voici un moyen

Structurez-vous HTML comme ceci dans vos dossiers

 /root /Chinese /English-American index.html

Le dossier racine contiendrait votre page avec la sélection de la langue et le chinois et l'anglais-américain contiendront vos pages spécifiques à la langue.

Maintenant, sur index.html, il suffit de diriger l'utilisateur vers le dossier de langue correct et tous les liens feront référence au dossier de langue correct

Si vous souhaitez que votre page soit compatible avec les moteurs de recherche, vous devez mettre la version statique dans le HTML. Vous pouvez les placer dans deux div et lorsque l'utilisateur clique sur un drapeau, vous affichez la bonne div .

Vous pouvez également utiliser un modèle comme Moustache pour rendre le contenu avec JavaScript. Ensuite, vous pouvez écrire votre contenu non localisé en tant que modèle et créer un contenu localisé comme variable.

En général, JS générant le code pour vous n'est pas bon. Mais, j'ai fait un POC pour le même usage en utilisant underscore.js . Le framework possède une fonction "_template" qui nous aide à remplacer toutes les clés du fichier HTML. La fonction accepte la paire de valeurs clés au format JSON.

Sur la base de la langue sélectionnée, chargez le fichier JSON correspondant, puis passez-le à la fonction _template. Cela remplacera toutes les clés.

J'ai lu la réponse de ceving , puis j'écris des langues de la bibliothèque JS.js pour faire cela.

Je modifie la séquence de <title> s 'avec différentes langues, donc ça marche si vous voulez changer de lang dans le titre de la page.

Ecrivez un HTML comme ceci:

 <html> <head> <title lang="en">Test Page</title> <title lang="zh-cmn-Hans">测试页面</title> <title lang="ja">テストページ</title> <title lang="miaw">miaw miaw miaw</title> </head> <body> <div lang="en" style="display:block;">Why does the sun rise? Why does the moon shine?</div> <div lang="zh-cmn-Hans">太阳为什么会升起？月亮为什么会发光？</div> <div lang="ja" style="display:inline">太陽はなんで昇る?月はなぜ輝く？</div> <div lang="miaw" style="display:inline">miaw miaw miaw miaw miaw miaw miaw miaw miaw miaw miaw miaw miaw</div> </body> </html> <script src="https://raw.githubusercontent.com/MuromiU/JS/master/src/languages.js"></script>

Usage:

 Languages.select(lang);

Plus de détails: github readme