layui/docs/i18n/index.md

title, toc

title	toc
国际化 i18n	true

国际化 ^2.12+

i18n 是 2.12 版本新增的国际化模块，用于为 Layui 各组件实现多语言支持。

完整演示

为了避免语言包配置冗长而影响示例源代码的查看，此处只演示「简体中文 / English / 繁體中文」语言环境，你可以点击该示例头部的「切换语言」选择框查看 Layui 组件在不同语言环境中的显示效果。

  {{- d.include("/i18n/detail/demo.md") }}
  

API

API	描述
var i18n = layui.i18n	获得 i18n 模块。
i18n.set(options)	设置语言环境及语言包。

配置方式

i18n 支持两种配置方式，你可以根据实际应用场景选择任一方式。

1. 通过 i18n.set() 方法配置

i18n.set(options)

• 参数 options : 基础属性选项。#详见语言包选项

layui.use(function() {
  var i18n = layui.i18n;

  // 设置语言
  i18n.set({
    locale: 'zh-CN', // 当前语言环境。zh-CN 为内置简体中文语言包
    messages: { // 扩展其他语言包
      'en': {},
      'zh-HK': {},
    }
  });
});

🔔 请注意：如果你的页面有用到 Layui 组件的自动渲染（如 table 模板配置渲染方式），因为执行顺序的问题，组件在自动渲染时可能无法读取到 i18n.set() 的配置信息，此时建议采用下述 LAYUI_GLOBAL.i18n 全局配置。

2. 通过 LAYUI_GLOBAL.i18n 全局配置（推荐）

由于 i18n 配置与组件渲染存在执行顺序问题，为了确保 i18n 配置始终在组件渲染之前生效，更推荐采用该全局配置方式。

<script>
  // 全局配置应放在 layui.js 引入之前的位置
  window.LAYUI_GLOBAL = {
    i18n: { // 选项同 i18n.set(options)
      locale: 'zh-CN', // 当前语言环境
      messages: { // 扩展其他语言包
        'en': {},
        'zh-HK': {},
      }
    }
  };
</script>
<script src="/layui/layui.js"></script>

语言包选项

i18n 默认采用简体中文（zh-CN）语言环境，以下为各组件消息文本对应的选项：

{{- d.include("/i18n/detail/options.md") }}

基于上述选项，还可以扩展更多语言包，如：

i18n.set({
  locale: 'en', // 当前语言环境
  messages: { // 扩展更多语言包
    'en': { // 通用英语
      code: {
        copy: 'Copy Code',
        copied: 'Copied',
        // ……
      },
      // ……
    },
    'fr': {}, // 通用法语
    'zh-HK': {}, // 繁体中文
    // …… // 更多语言
  }
});

为了节省时间，也可以借助「第三方提供并维护的 Layui 多语言 AI 翻译工具」直接生成不同语言的消息文本，如：

翻译工具	提供者
https://gitee.com/mail_osc/translate/tree/master/extend/layui-i18n-object-translate	@xnx3

💖 心语

i18n 模块是在众多开发者强烈的需求呼声中，由 Layui 核心 Contributor @Sight-wcg 完成，该模块通过简练的设计，为 Layui 组件实现了多语言的无缝接入，并且兼容了一些原本自带简单多语言或消息配置的组件，Layui 2.x 版本也因此具备国际化能力。