如何使用纯html、js、jquery搭建多语言网站？

Question

我正在使用 html 构建页面。问题是如何建立多语言切换？语言翻译不是问题，我有条款。但是，我不知道如何通过菜单栏上的语言 button/dropdown 列表切换每个页面？如果有现成的示例或模板，那就更好了。提前致谢。

Answer 1

好的。作为对我的回答的编辑，请关注：

1 - 创建一个名为 language 的文件夹并向其中添加 2 个文件（es.json 和 en.json）

json 文件在结构上应该相同但在翻译上有所不同，如下所示：

en.json

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

es.json

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

2 - 创建一个包含示例 div 的 html 页面并放置 2 个指向 select 指向 js 函数的语言的链接在步骤 3 中列出。

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

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

3 - 创建 2 个 java 脚本函数到 get/set selected 语言：

<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 - 使用可变语言填充文本。

<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>

我相信这回答了问题，因为我在多个站点上实施了相同的概念。

注意：您可以使用 JQuery 中的 document.ready 以外的 onclick 事件进行即时翻译（无需重新加载）。这取决于您的情况。

Answer 2

由于您是前端新手，我想给您一个非常基本的尝试 template/example，使用 iframes 模拟 2 种不同语言的页面。这至少会给你一个关于如何做的替代方法的想法，至少直到 M. Taha 完成他在提供多语言的通用前端框架上的工作 UI.

假设 this and this are your versions of the page in English and French, respectively, you could do it like that (fiddle here):

<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>

现在，如果您构建页面的版本并将 src-s 的值替换为服务器上页面版本的路径，您就可以实现它，所有这些都在 iframe。通过一些实验（去玩 JSFiddle，它很有趣）并且可能会有所帮助，您可以从那里取得进步，并寻求使它成为正确的方式，就像 M.Taha 正在尝试的那样（例如更详细 JSON文件，使用本地存储/cookie "remember" 您之前的设置，等等）。

我的例子并不是要提供最终框架或类似的东西，但它应该更像是一个非常基本的工作示例，可以暂时实现你想要的，或者直到更好的 solution/answer 提供。

如何使用纯html、js、jquery搭建多语言网站？

how to build multiple language website using pure html, js, jquery?

html

javascript

multilingual

jquery