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

Question

我是 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/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 中。任何指导将不胜感激。

附：我没有与 i18next express 结婚，所以如果您知道通过后端为客户提供翻译服务的更好方法，请随时提出建议/提供概念证明。

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 -> https://www.i18next.com/supported-frameworks.html 手动完成所有繁重的工作）。