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

Question

我是 node.js 的新手，我想将我的应用程序国际化。我从 i18next-express-middleware github along with 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>

节点.js/Express

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，所以如果您知道通过后端向客户端提供翻译服务的更好方法，请随时提出 it/provide 概念验证。

Answer 1

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

在客户端只需更改位置并设置语言：

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

这将重新加载页面，将 lng 设置为 de - 服务器将检测到 lng 并以正确的语言呈现您的模板（在您的模板中使用 t 助手）。

如果您喜欢在客户端进行所有翻译，请按照 i18next 上的示例进行操作（如果进行客户端翻译，我强烈建议您使用一种框架集成，而不是通过设置 innerHTML -> [=12 手动完成所有繁重的工作） =]).

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

How to take user input and change language with i18next-express-middleware?

javascript

internationalization

node.js

express

i18next