HTML界面多语言切换

我在做个人网站时考虑到多语言转换的问题，最后在JS文件中将所有文字数据储存然后设置HTML中的class与key属性来达到多语言效果。当然，还有一个别的方法，就是所有有文字内容的div都用不同语言写一遍然后加上相应的class，再利用CSS隐藏或显现相应的内容。本文只介绍第一种方法。（对制作个人网站感兴趣的可以查看我的前一篇博客《利用GitHub Pages和Bootstrap创建个人网站》。）

 

首先附上一个JSFiddle的效果展示链接：https://jsfiddle.net/20zo4wg8/4/，

能看Youtube的可以看这个教程视频：https://www.youtube.com/watch?v=Tjt_u_OSh40，

 

HTML

你需要将所有想要翻译的模块部分的class中加上lang，然后自定义key。还需要有设置语言的按钮，class中添加translate，id用相应的代号。

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

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

JS

以下操作会自动检测浏览器设置的语言，首次访问时会使用该语言（该例子中只有英语或中文），如果浏览器设置的语言不是英语或中文，则默认为英语，然后会保存网页的语言在浏览器中，这样下次用户再访问你的网站时就会显示之前退出时设置的语言。

var arrLang = {
  "en": {
    "HOME": "Home",
    "ABOUT": "About Us",
    "CONTACT": "Contact Us",
  },
  "zh": {
    "HOME": "首页",
    "ABOUT": "关于我们",
    "CONTACT": "联络我们",
  }
};

// The default language is English
var lang = "en";
// Check for localStorage support
if('localStorage' in window){
   var lang = localStorage.getItem('lang') || navigator.language.slice(0, 2);
   if (!Object.keys(arrLang).includes(lang)) lang = 'en';
}

$(document).ready(function() {
  $(".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");

  // update localStorage key
  if('localStorage' in window){
    localStorage.setItem('lang', lang);
    console.log( localStorage.getItem('lang') );
  }

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

因为JS文件中用到了jQuery，所以你需要下载它（http://jquery.com/download/）然后在HTML中引入，或者直接在HTML文件中添加以下代码。

<script src="jquery-3.3.1.min.js"></script>

其中的3.3.1为目前最新版本，你可以自行修改为最新版本号。