如何使用i18next-express-middleware获取用户输入和更改语言?

时间:2017-08-22 21:48:38

标签: javascript node.js express internationalization i18next

我是node.js的新手,我希望将我的应用程序国际化。我开始使用i18next-express-middleware github的模板和i18next website。我希望用户单击该按钮并让服务器获取.json文件并将翻译提供给用户。以下是我的代码:

HTML

<script src="https://unpkg.com/i18next/i18next.js"></script>
<div style="height: 100px">
  <button onclick="i18next.changeLanguage('en')">
  english
  </button>
  <button onclick="i18next.changeLanguage('de')">
  german
  </button>
  <div id="output" />
 </div>

的Node.js /快速

const express = require('express');
const i18next = require('i18next');
const i18nextMiddleware = require('i18next-express-middleware');
const Backend = require('i18next-node-fs-backend');

const app = express();
const port = process.env.PORT || 8080;

i18next
  .use(Backend)
  //.use(i18nextMiddleware.LanguageDetector)
  .init({
backend: {
   loadPath: '/translate/i18next-express-middleware-master/examples/basic/locales/{{lng}}/{{ns}}.json',
   addPath: '/translate/i18next-express-middleware-master/examples/basic/locales/{{lng}}/{{ns}}.missing.json'
},
fallbackLng: 'en',
preload: ['en', 'de'],
saveMissing: true
});
app.use(i18nextMiddleware.handle(i18next));

app.get('/', (req, res) => {
  res.send(req.t('home.title'));
});

app.listen(port, (err) => {
  console.log(`Server is listening on port ${port}`);
});

我已经找到了有关如何与客户选择语言进行沟通的文档,但我根本不知道你是怎么做的。我错过了一个关键组件吗?在文档中,他们讨论了如何设置语言,但从不讨论如何使用用户输入并将其选择反映在用户收到的HTML中。任何指导都将不胜感激。

P.S。我没有和i18next express结婚,所以如果你知道通过后端向客户提供翻译的更好方法,请随时提出建议/提供概念证明。

1 个答案:

答案 0 :(得分:0)

使用express我希望您希望在服务器端进行翻译。因此,您需要在服务器端触发更改语言。为此,您可以使用i18next-express-middleware附带的语言检测器:https://github.com/i18next/i18next-express-middleware#language-detection

在客户端上只需进行位置更改设置语言:

<button onclick="function() { window.location = '/?lng=de'; }">

这将重新加载页面设置lng到de-server将检测到lng并以正确的语言呈现模板(使用模板中的t帮助器)。

如果您喜欢在客户端上进行所有翻译,请按照i18next上的示例进行操作(如果进行客户端翻译,我强烈建议使用其中一个框架集成,而不是通过设置innerHTML手动完成所有繁重工作 - &gt; {{3} })。