javascript - 如何在 expressJS 中保持不断变化的语言状态

Question

我正在开发一个使用 nodeJs、handlebars 和 expressJs 框架的项目。我使用 i18n-express 添加更改语言功能模块。当我们要更改语言时，此模块会在 url 的末尾添加查询字符串。现在的问题是，当我将一页移动到另一页时，查询字符串被删除并丢失了他的状态。那么我怎样才能保持语言状态？如果用户选择法语，那么所有页面都以法语打开。这就是我要的。

代码:

var i18n =  require("i18n-express");

app.use(i18n({
  translationsPath: path.join(__dirname, 'lang'), // <--- use here. Specify translations files path.
  siteLangs: ["ar","en","cn","fr","ge","he","hu","it","ja","ko","es","ru"],
  cookieLangName : 'ulang',
  textsVarName: 'translation'  
}));

更改语言的链接

<a href="#!" id="{{icon}}" onclick=" return changeLanguage(this)"></a>

Onclick 功能更改语言

function changeLanguage(event){
   $('#languages img').attr('src','/images/flag-icons/'+event.id+'.png');
   var url = window.location.href;
   url = url.split("?")[0];
   url += '?clang='+event.id;
   window.location.href = url;
   localStorage.setItem("clang", '?clang='+event.id); //event.id returns locale name such as en, ar, sp, fr etc.
   //console.log(url);
}

Answer 1

我推荐你Lingua for ExpressJS

基本上，Lingua 是 Express.js 的中间件，它可以帮助您轻松地国际化您的 web 应用程序。它确定用户代理的语言并将 i18n 资源推送到您的 View 。

$ npm install -s lingua

var express = require('express'),
    lingua  = require('lingua');

// Express app configuration code and lingua init.
app.configure(function() {

app.set('views', __dirname + '/views');
app.set('view engine', 'ejs');

// Lingua configuration
app.use(lingua(app, {
    defaultLocale: 'en',
    path: __dirname + '/i18n'
}));

app.use(express.bodyParser());
app.use(express.methodOverride());
app.use(express.static(__dirname + '/public'));
app.use(app.router);

语言文件

'./i18n/en.json' and './i18n/de-de.json').

// en.json
    {
        "title": "Hello World",
        "content": {
            "description": "A little description."
        }
    }

// de-de.json
    {
        "title": "Hallo Welt",
        "content": {
            "description": "Eine kleine Beschreibung."
        }
    }

您可以通过以下方式在您的页面上轻松实现它:

<h1><%= lingua.title %></h1> <!-- out: <h1>Hello World</h1> -->
<p><%= lingua.content.description %></h1> <!-- out: <p>A little description.</p> -->