使用基于jQuery和JSON的方法构建多语言网站 [英] Build multiple language website using jQuery and JSON based methods

问题描述

我正在尝试为一个网站实现多语言.我更喜欢使用客户端脚本在English和Traditional Chinese之间更改语言.

I'm trying to implement a Multi-language for one website. I prefer to use client script for changing the language between English and Traditional Chinese.

例如:

创建客户端脚本以获取/设置所选语言:

Create a client script to get/set the selected language:

$(document).ready(function() {
  // The default language is English
  var lang = "en-gb";
  $(".lang").each(function(index, element) {
    $(this).text(arrLang[lang][$(this).attr("key")]);
  });
});

// get/set the selected language
$(".translate").click(function() {
  var lang = $(this).attr("id");

  $(".lang").each(function(index, element) {
    $(this).text(arrLang[lang][$(this).attr("key")]);
  });
});

然后，将多种语言字典构建为JSON结构:

Then, build multiple languages dictionary to JSON structure:

var arrLang = {
    "en-gb": {
        "HOME": "Home",
        "ABOUT": "About Us",
        "CONTACT": "Contact Us",
    },
    "zh-tw": {
        "HOME": "首頁",
        "ABOUT": "關於我們",
        "CONTACT": "聯絡我們",
    }
};  

这是我的HTML页面:

Here's my HTML page:

<button class="translate" id="en-gb">English</button>
<button class="translate" id="zh-tw">Chinese</button>

<ul>
    <li class="lang" key="HOME"></li>
    <li class="lang" key="ABOUT"></li>
    <li class="lang" key="CONTACT"></li>
</ul>

部分代码如下所示:

var arrLang = {
  "en-gb": {
    "HOME": "Home",
    "ABOUT": "About Us",
    "CONTACT": "Contact Us",
  },
  "zh-tw": {
    "HOME": "首頁",
    "ABOUT": "關於我們",
    "CONTACT": "聯絡我們",
  }
};

$(document).ready(function() {
  // The default language is English
  var lang = "en-gb";
  $(".lang").each(function(index, element) {
    $(this).text(arrLang[lang][$(this).attr("key")]);
  });
});

// get/set the selected language
$(".translate").click(function() {
  var lang = $(this).attr("id");

  $(".lang").each(function(index, element) {
    $(this).text(arrLang[lang][$(this).attr("key")]);
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button class="translate" id="en-gb">English</button>
<button class="translate" id="zh-tw">Chinese</button>

<ul>
  <li class="lang" key="HOME"></li>
  <li class="lang" key="ABOUT"></li>
  <li class="lang" key="CONTACT"></li>
</ul>

但是，当我刷新页面或导航到另一页面时，它会恢复为原始语言. 即使刷新页面，也可以保留所选语言吗?

However, When I refresh the page or navigate to another page it returns to the original language. Is there any way to keep the selected language even by refreshing the page?

谢谢！

推荐答案

您可以使用

You can save the user's selected language with window.localStorage and read it when you load the page:

// save, in your .translate click handler
localStorage.setItem('lang', $(this).attr('id'));

// load, on DOMContentLoaded
var lang = localStorage.getItem('lang') || 'en-gb';

如果用户未选择语言，则localStorage.getItem('lang')将返回null，并且lang将被设置为默认语言'en-gb'.

If the user hasn't selected a language, localStorage.getItem('lang') will return null and lang will be set to your default, 'en-gb'.

但是为什么您的默认语言是英语?浏览器知道它(可能是用户)喜欢哪种语言.您可以使用 navigator.language .当然，这可能类似于zh-SG之类的东西，它不在您的语言列表中，但应该(可能吗?)以中文呈现该页面.要解决此问题，您可以仅获取语言代码的前两个字符，并将其用作字符串列表中的键:

But why should your default be English? The browser knows what language it (and presumably, the user) prefers. You can access the browser's preferred language with navigator.language. Of course, that could be something like zh-SG which isn't in your language list, but should (probably?) render the page in Chinese. To handle this behavior, you can grab just the first two characters of the language code and use that as the key in your strings list:

var arrLang = {
    "en": {
        "HOME": "Home",
        "ABOUT": "About Us",
        "CONTACT": "Contact Us",
    },
    "zh": {
        "HOME": "首頁",
        "ABOUT": "關於我們",
        "CONTACT": "聯絡我們",
    }
};

var lang = localStorage.getItem('lang') || navigator.language.slice(0, 2);

(您还需要截断翻译按钮的ID.)

(You'll need to truncate the IDs of your translate buttons, as well.)

当然，浏览器的语言可能是pt-BR，因此请确保也进行检查:

Of course, the browser's language could be pt-BR, so make sure to check for that too:

var lang = localStorage.getItem('lang') || navigator.language.slice(0, 2);
if (!Object.keys(arrLang).includes(lang)) lang = 'en';

这篇关于使用基于jQuery和JSON的方法构建多语言网站的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！