0%

使用 Javascript 来做多语言页面的转向

契机

今天,我的一个项目更新了多语言的说明文档,为了更快的帮助用户,我觉得有必要做一个自动的语言转向功能。
经过一番查询,当前很多浏览器对「navigator.language」变量有很好的支持。
藉此,我们可以使用 Javascript 来做一个语言识别并转向。

代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
setTimeout(function() {
// 在 3s 后跳转
// 修改 URL
var siteHref = window.location.href;
var siteDir = siteHref.split('/index');
if (siteDir[1]) {siteDir[0] += '/';};
// 获取浏览器语言
var navlang = navigator.language;
// 设定英语为默认语言
var langpage = 'en';
navlang = navlang.split('-')[0];
// 确认转向目标
if (navlang == 'zh'){langpage = 'zh';};
if (navlang == 'ja'){langpage = 'ja';};
// 修改 URL
window.location.href = siteDir[0] + langpage;
}, 3000);

简单分析

  • 首先这是一个通过setTimeout来延时3s后的转向。
  • 正如代码中分段注释的那样,首先,我们要对当前的URL做一个处理。简单的来讲,就是提取出最纯粹的当前网站目录。(不带有默认 index 文件)
  • 关于网址的操作,在之前的文章『网址操作及页面转向的几种方式』中可以找到。
  • 最后,我们先设定默认语言为英语,以帮助非支持语言的阅读者。接着,通过「navigator.language」来获取浏览器语言,并且用字符串分割功能去除国家信息,将相应语言的值写在默认语言中。
  • 根据URL规则将新的网址覆盖到用户的浏览器。

总结

这是一个比较小的功能,但在某些情况下却非常实用。
特别是像我这样采用 Hexo 的网站,不像PHP这样能有比较简便的方法,对于 HTML 来说,采用 Javascript 做一些功能,真的是特别方便。