Nodejs下网站多语言界面怎么设计？

Nodejs下网站多语言界面怎么设计？

14 回复

Nodejs下网站多语言界面怎么设计？

在现代Web应用中，支持多种语言是一个常见的需求。Node.js提供了多种方法来实现多语言界面，其中最常见的是使用i18n（国际化）库。本文将介绍如何在Node.js项目中实现多语言支持，并提供一个简单的示例。

1. 安装必要的依赖

首先，我们需要安装一个i18n库。常用的库有i18n和express-i18next。这里我们以i18n为例：

npm install i18n

2. 初始化i18n配置

在你的Node.js项目中创建一个配置文件i18n.js，用于初始化i18n模块：

const i18n = require('i18n');

// 设置默认语言
i18n.configure({
    locales: ['en', 'zh-CN'],
    defaultLocale: 'en',
    directory: __dirname + '/locales',
    updateFiles: false,
    objectNotation: true,
    register: global,
});

module.exports = i18n;

3. 创建翻译文件

在项目的根目录下创建一个locales文件夹，并为每种语言创建一个JSON文件。例如，en.json和zh-CN.json：

locales/en.json:

{
    "welcome": "Welcome to our website!",
    "greeting": "Hello, {{name}}!"
}

locales/zh-CN.json:

{
    "welcome": "欢迎来到我们的网站！",
    "greeting": "你好，{{name}}！"
}

4. 在路由或中间件中使用i18n

在你的Express应用中，你可以通过中间件或路由来使用i18n。例如，在中间件中设置当前语言：

const express = require('express');
const i18n = require('./i18n');

const app = express();

app.use(i18n.init);

app.get('/', (req, res) => {
    res.send(req.__('welcome'));
});

app.get('/greet/:name', (req, res) => {
    res.send(req.__('greeting', { name: req.params.name }));
});

app.listen(3000, () => {
    console.log('Server is running on port 3000');
});

5. 使用模板引擎

如果你使用模板引擎（如EJS），你可以在模板中直接使用翻译函数：

<!-- views/index.ejs -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title><%= __('welcome') %></title>
</head>
<body>
    <h1><%= __('welcome') %></h1>
    <p><%- __('greeting', { name: 'John' }) %></p>
</body>
</html>

总结

通过以上步骤，你可以在Node.js项目中轻松实现多语言支持。关键在于正确配置i18n库、创建翻译文件以及在路由或模板中使用翻译函数。这样，用户可以根据自己的语言偏好访问网站的不同版本。


比如要发布一个商品~ 1）使用中文的时候显示的是中文描述 2）使用english的时候是显示的英文描述

界面的中英文怎么切换呢？是写2套页面吗？

一套页面，语言文件放到json中，可以用jade临时渲染，也可以提前渲染为两套html，然后加快速度，但写的时候只有一套，楼主搜索一下node.js 模板

谢谢您的帮助！ 可以给一现成的例子，并加以说明一下吗？ 感谢！

我现在的模板是使用的ejs 这个模板是否也支持您说的那种功能？ 谢谢

各位大侠~ 还请赐教啊~ 急

所有模版里的语言部分用map和数字表示。比如这样。

cn = { hello:“你好”， bye:“再见” }; en = { hello:“hello”, bye:“bye” };

var lang = cn; //只要在这里进行字典切换就ok了。

然后在模版里要输入 你好， 就用lang[‘hello’]来输入。

切换语种，之需要切换lang的配置字典就ok了。。。。

不建议用数字字典，写多了你也不知道啥意思。。。几对应几了。

用英文好一些。。

不过用数字其实也行 找编辑神吗的 给你们翻译吧，多少语言种类 就做多少套文案的字典就行了。

如果有多个用户呢？

怎么样才能不相互影响。

有没有大侠比较全面的解释一下

多个用户当然存在用户自己的配置里了啦。

就是表里多个字段，登陆后根据字段匹配语种。

如果可以中在cookie里一个，不登陆也用之前选择过的语种，如果是首次登陆，一般是根据IP猜一下位置，再选择适合的语言。

参见twitter和facebook，你用美国代理的跳转或者香港的，日本的代理，第一次进入的语种都会不一样。。。

jQuery的作者近期发布了

jQuery的作者近期发布了多语种支持的模块： https://github.com/jeresig/i18n-node-2

在Node.js中实现网站的多语言界面可以通过多种方式来完成。一个常见的方法是使用国际化库如i18next或react-i18next（如果你使用React）。这些库提供了一个简单的接口来处理不同语言环境下的文本翻译。

示例代码

首先，安装必要的库：

npm install i18next i18next-http-backend i18next-browser-languagedetector

接下来，创建一个配置文件i18n.js：

const i18next = require('i18next');
const Backend = require('i18next-http-backend');
const LanguageDetector = require('i18next-browser-languagedetector');

i18next
  .use(Backend)
  .use(LanguageDetector)
  .init({
    fallbackLng: 'en', // 默认语言
    debug: true,

    // 资源加载路径
    backend: {
      loadPath: '/locales/{{lng}}/translation.json',
    },

    // 检测语言的选项
    detection: {
      order: ['querystring', 'cookie'],
      caches: ['cookie'],
    },
  });

module.exports = i18next;

接着，在每个页面或组件中引入并使用这个配置文件：

const i18next = require('./i18n');

// 使用翻译
console.log(i18next.t('greeting'));

// 设置语言
i18next.changeLanguage('zh');

确保你已经准备好了相应的翻译文件，例如：

locales/
  en/
    translation.json
  zh/
    translation.json

其中translation.json文件内容如下：

en/translation.json

{
  "greeting": "Hello",
  "farewell": "Goodbye"
}

zh/translation.json

{
  "greeting": "你好",
  "farewell": "再见"
}

解释

  • i18next: 这个库负责管理不同语言环境下的翻译。
  • i18next-http-backend: 这个插件允许从服务器加载翻译资源。
  • i18next-browser-languagedetector: 自动检测用户的语言偏好。
  • i18next.t(): 这个函数用于获取翻译文本。
  • i18next.changeLanguage(): 这个方法可以动态地更改当前的语言设置。

通过这种方式，你可以轻松地为你的网站添加多语言支持。

回到顶部