在 Fastify 中实现多语言支持

阅读时长 4 分钟读完

随着全球化的不断发展,多语言支持已成为许多 Web 应用程序的必备功能。Fastify 是一个快速、低开销且可扩展的 Web 框架,通过一些简单的步骤可以轻松实现多语言支持。

了解 i18n

i18n,即 internationalization(国际化)的缩写,是为了便于不同国家和地区用户的使用而进行的软件本地化处理。“i18n” 取“internationalization”单词中的第一个字母“i”和最后一个字母“n”,中间用数字“18”表示被省略的字符数。

在 Web 应用程序中实现 i18n,通常有两类字符串需要进行翻译:

  • 静态文本:包括标题、按钮、和其他静态文本信息。
  • 动态文本:通常接收来自用户或外部服务的信息。

安装依赖

安装 fastify-i18n插件,它基于 i18next进行开发。

初始化 Fastify

初始化 i18n

-- -------------------- ---- -------
----- ------- - -------------------
----- ----------------- - -----------------------------------
----- --------- - -
  --- -
    ------------ -
      -------- --------
      -------- -------
    -
  --
  --- -
    ------------ -
      -------- -----
      -------- ----
    -
  -
--
--------------
  ---------- ----------
  ---- -----
  ------------ -----
  ------------- ------
  -------------- -
    ------------ -----
  -
---
------------------------------------------ -
  -------- -------
---

我们定义了两个语言环境(英语和中文),并初始化了 i18next。我们需要指定默认语言环境,以及支持的其他语言环境。这里,我们默认使用中文,同时也支持英文。keySeparator 表示使用哪个字符分隔键值数据,因为开启了 false,所以我们会使用点分隔符。

在上述代码中,我们初始化 Fastify 和 i18next,并使用 fastify-i18nextmiddleware。

添加 routes

-- -------------------- ---- -------
---------------
  ------- ------
  ---- ---------
  -------- -------- ----- ------ -
    ----- ---- - -------------- -- --------
    ------------------------- - - - - ------
  -
---

-------------------- -------- ----- -
  -- ----- -
    -----------------------
    ----------------
  -
  ------------------- --------- -- -----------------------------------
---

通过这个路由,我们可以解析 URL 查询参数中输入的名称,如果没有,则默认使用“world”。req.t('hello')是由 fastify-i18n 提供的一个翻译函数,用于访问当前语言环境下的“hello”翻译。这里,我们请求中之后调用 “hello” 字符串并输入这里的“name”参数。

运行应用程序

启动应用程序:

打开浏览器,访问 http://localhost:3000/hello 的 URL,我们看到“你好,世界”输出在页面上。

现在,您可以使用支持的其他语言环境测试该应用程序。在 URL 上添加 lng 查询参数即可,如 /hello?lng=en 将返回 Hello world,而 /hello?lng=fr 将返回一个 404 错误,因为在此示例中我们没有定义法语语言环境。

结论

使用 Fastify,您可以轻松地实现 Web 应用程序的多语言支持。fastify-i18n 插件为 i18n 提供了一个强大的工具,使得支持多语言变得更加容易和可扩展。开始构建国际化 Web 应用程序,开始访问全球用户群!

来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/66f141496fbf96019738aa9c

纠错
反馈