多语言站点:基于HTTP接受语言的显示模式

Question

我正在建设一个主要面向讲普通话的观众的自助网站。但是，有一些用户想用英语浏览网站。我将有两个版本的网站，一个在主域: xyz.net和另一个作为子域在en.xyz.net。默认情况下，用户将查看xyz.net站点，因此我尝试在启动时设置一个模块，用于‘Accept- language ( not )包含以下内容的用户: zh、zh或zh-Hant (中文代码)。这个模式将是一个非常简短的弹出式，它的大意是：“寻找英语站点?在这里重定向：.”然后链接到另一个子域: en.xyz.net。

动态显示此模式的最佳方法是什么？

我有意决定不使用IP地址位置来决定哪些用户也要显示这个地址，因为中国和美国都会有用普通话访问该网站的用户。

Answer 1

要动态显示Modal，可以检查以下步骤：

1. 检查网页服务器中的Accept-Language标题，使用模板技术将“是否支持中文”信息保存到HTML响应中。
2. 在HTML中，将上述信息分配给全局变量(window)。
3. 加载页面后，从全局变量(window)检查上述信息。如果不支持中文，则弹出Modal。

下面是Node.js中的一个示例(使用Express框架和Nunjucks模板)：

步骤1.检查Accept-Language头并将信息保存到响应中。

function isChineseAccepted(acceptLanguages) {
  // check whether zh, zh-CN or zh-Hans etc is accepted, return true or false accordingly.
}

router.get('/sample-page', function(req, res) {
  var acceptLanguages = req.get('Accept-Language');
  var isChinese = isChineseAccepted(acceptLanguages);
  res.render('views/sample-page', {
    isChinese: isChinese
  });
});

步骤2.中的isChinese信息分配给window全局变量

<!doctype html>
<html>
<head>
...
<script type="text/javascript">
  window.isChinese = '{{isChinese}}';
</script>
</head>
<body>...</body>
</html>

步骤3.页面加载后的，从window中检查isChinese。如果是“假”就弹出Modal。

$(function() {
  if (window.isChinese === 'false') {
    // Popup Modal using Bootstrap.
  }
});