web-dev-qa-db-fra.com

comment construire un site Web en plusieurs langues en utilisant du HTML pur, js, jquery?

j'utilise html pour construire des pages. Le problème est de savoir comment créer un commutateur de langues multiples? La traduction de la langue n'est pas un problème, j'ai les termes. Cependant, je ne sais pas comment basculer entre chaque page via le bouton de langue/liste déroulante dans la barre de menu? S'il existe un exemple ou un modèle existant, ce serait encore mieux. Merci d'avance.

javascriptjqueryhtmlmultilingual
7
Laodao

d'accord. en tant que modification de ma réponse, veuillez suivre:

1 - créez un dossier appelé langue et ajoutez-y 2 fichiers (es.json et en.json)

Les fichiers json doivent être de structure identique mais de traduction différente comme ci-dessous:

en.json

{ 
    "date": "Date", 
    "save": "Save",
    "cancel": "Cancel" 
}

es.json

{ 
    "date": "Fecha", 
    "save": "Salvar",
    "cancel": "Cancelar" 
}

2 - Créez une page html contenant un échantillon div et mettez 2 liens pour sélectionner la langue pointant vers la fonction js listée à l'étape 3.

<a href="#" onclick="setLanguage('en')">English</a> 
<a href="#" onclick="setLanguage('es')">Spanish</a>

<div id="div1"></div>

- Créez 2 Java fonctions de script pour obtenir/définir la langue sélectionnée:

<script>
var language; 
function getLanguage() {
(localStorage.getItem('language') == null) ? setLanguage('en') : false;
$.ajax({ 
url:  '/language/' +  localStorage.getItem('language') + '.json', 
dataType: 'json', async: false, dataType: 'json', 
success: function (lang) { language = lang } });
}

function setLanguage(lang) {
localStorage.setItem('language', lang);
}
</script>

4 - Utilisez la langue des variables pour remplir le texte.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script>

    $(document).ready(function(){
    $('#div1').text(language.date);
    });

    </script>

Je crois que cela répond à la question car j'ai le même concept mis en œuvre sur plusieurs sites.

Remarque: Vous pouvez faire une traduction instantanée (sans rechargement) simplement en utilisant un événement onclick autre que document.ready à partir de JQuery. Cela dépend de votre scénario.

23
M. Waheed

Puisque vous êtes nouveau dans le front-end, j'ai pensé à vous donner un modèle/exemple de travail d'une tentative très basique de simuler une page dans 2 langues différentes en utilisant iframes . Cela vous donnera au moins une idée d'une manière alternative sur la façon de le faire, au moins jusqu'à ce que M. Taha termine son travail sur le cadre frontal général qui fournit une interface utilisateur multilingue.

En supposant this et this sont vos versions de la page en anglais et en français, respectivement, vous pouvez le faire comme ça (violon ici ):

<html>
<body>
<select id="langselector" onchange="loadlang()">
  <option value="en">English</option>
  <option value="fr">French</option>
</select>
<p></p>
<iframe id="contents" src="https://jsfiddle.net/q2nw8o35/" width="1366" height="768" scrolling="yes">
  <p>Your browser does not support iframes.</p>
</iframe>
<script>
function loadlang()
  {
  var lng = document.getElementById("langselector").value;
  var cnt = document.getElementById("contents");
  switch (lng)
    {
    case "en":
      cnt.src = "https://jsfiddle.net/q2nw8o35/";
    break;
    case "fr":
      cnt.src = "https://jsfiddle.net/jmn8c9tj/";
    break;
    }
  }
</script>
</body>
</html>

Maintenant, si vous construisez les versions de votre page et remplacez simplement les valeurs des src- par le chemin vers vos versions de page sur le serveur, vous pouvez y arriver, le tout dans un iframe . Avec un peu d'expérimentation (allez jouer sur JSFiddle, c'est amusant) et peut-être de l'aide, vous pouvez progresser à partir de là, et chercher à le faire dans le bon sens, comme M.Taha essaie de le faire (par exemple des fichiers JSON plus élaborés, en utilisant le stockage local/cookies pour "mémoriser" vos paramètres précédents, etc.).

Mon exemple n'est pas destiné à fournir un cadre final ou autre, mais il devrait être considéré davantage comme un exemple de travail très basique qui peut atteindre ce que vous vouliez pour le moment, ou jusqu'à ce qu'une meilleure solution/réponse soit fournie.

5
Yin Cognyto