docs(i18n): 优化正式文档

refactor/i18n
贤心 2025-09-08 00:07:55 +08:00
parent 6f0d751648
commit 6c270b4c38
4 changed files with 774 additions and 954 deletions

File diff suppressed because it is too large Load Diff

View File

@ -104,7 +104,7 @@ i18n.set({
asc: '升序',
desc: '降序'
},
noData: '无数据',
noData: '无数据',
tools:{
filter: {
title: '筛选列'
@ -124,14 +124,14 @@ i18n.set({
xhrError: '请求异常,错误提示:{msg}'
},
transfer: {
noData: '无数据',
noData: '无数据',
noMatch: '无匹配数据',
title: ['列表一', '列表二'],
searchPlaceholder: '关键词搜索'
},
tree: {
defaultNodeName: '未命名',
noData: '无数据',
noData: '无数据',
deleteNodePrompt: '确认删除"{name}"节点吗?'
},
upload: {
@ -144,7 +144,7 @@ i18n.set({
validateMessages: {
fileExtensionError: '选择的{fileType}中包含不支持的格式',
filesOverLengthLimit: '同时最多只能上传: {length} 个文件',
currentFilesLength: '当前已经选择了: {length} 个文件',
currentFilesLength: '当前已经选择了: {length} 个文件',
fileOverSizeLimit: '文件大小不能超过 {size}'
},
chooseText: '{length} 个文件'
@ -158,6 +158,7 @@ i18n.set({
justNow: '刚刚'
},
toDateString: {
// https://www.unicode.org/cldr/charts/47/supplemental/day_periods.html
meridiem: function(hours, minutes){
var hm = hours * 100 + minutes;
if (hm < 500) {

View File

@ -5,13 +5,15 @@ toc: true
# 国际化 <sup>2.12+</sup>
> `i18n` 是 2.12 版本新增的国际化模块,用于实现各组件消息文本的多语言支持。
> `i18n` 是 2.12 版本新增的国际化模块,用于为 Layui 各组件实现多语言支持。
<h2 id="examples" lay-toc="{anchor: null}" style="margin-bottom: 0;">示例</h2>
<h2 id="examples" lay-toc="{}" style="margin-bottom: 0;">完整演示</h2>
为了避免语言包冗长而影响示例源代码的查看,此处仅演示「简体中文 / English / 繁體中文」三种语言环境,您可以点击该示例头部的「切换语言」选择框查看不同语言环境中的 Layui 组件显示效果。
<div class="ws-docs-showcase"></div>
<pre class="layui-code" lay-options="{preview: 'iframe', text: {preview: '完整演示'}, style: 'height: 560px;', layout: ['preview', 'code'], tools: ['full','window']}">
<pre class="layui-code" lay-options="{preview: 'iframe', text: {preview: 'Preview'}, style: 'height: 560px;', layout: ['preview', 'code'], tools: ['full','window']}">
<textarea>
{{- d.include("/i18n/detail/demo.md") }}
</textarea>
@ -22,8 +24,7 @@ toc: true
| API | 描述 |
| --- | --- |
| var i18n = layui.i18n | 获得 `i18n` 模块。|
| [i18n.set(options)](#set) | 设置语言包及默认语言。|
| [i18n.$t(options)](#translation) | 从国际化消息中获取翻译后的内容。 |
| [i18n.set(options)](#set) | 设置语言环境及语言包。|
<h3 id="set" lay-toc="{level: 2}">配置方式</h3>
@ -52,15 +53,15 @@ layui.use(function() {
🔔 请注意:如果您的页面有用到 Layui 组件的自动渲染(如 table 模板配置渲染方式),因为执行顺序的问题,组件在自动渲染时可能无法读取到 `i18n.set()` 的配置信息,此时建议采用下述 `LAYUI_GLOBAL.i18n` 全局配置。
#### 2. 通过 `LAYUI_GLOBAL.i18n` 全局配置
#### 2. 通过 `LAYUI_GLOBAL.i18n` 全局配置(推荐)
由于 i18n 配置与组件渲染存在执行顺序问题,为了确保 i18n 配置始终在组件渲染之前生效,更推荐采用该全局配置方式。
```html
<script>
// 全局配置应放在 layui.js 引入之前的位置
window.LAYUI_GLOBAL = {
// 选项同 i18n.set(options)
i18n: {
i18n: { // 选项同 i18n.set(options)
locale: 'zh-CN', // 当前语言环境
messages: { // 扩展其他语言包
'en': {},
@ -102,8 +103,12 @@ i18n.set({
});
```
为了节省时间,您可以使用「**第三方提供并维护**的 Layui 多语言 AI 翻译工具」直接生成不同语言的消息文本,如:
| 翻译工具 | 提供者 |
| --- | --- |
| <a href="https://gitee.com/mail_osc/translate/tree/master/extend/layui-i18n-object-translate" target="_blank">https://gitee.com/mail_osc/translate/tree/master/extend/layui-i18n-object-translate</a> | <a href="https://github.com/xnx3" target="_blank">@xnx3</a> |
## 💖 心语
待写
i18n 模块是在众多开发者强烈的需求呼声中,由 Layui 核心 Contributor [@Sight-wcg](https://github.com/Sight-wcg) 完成,该模块通过简练的设计,为 Layui 组件实现了多语言的无缝接入并且兼容了一些原本自带简单多语言或消息配置的组件Layui 2.x 版本也因此具备国际化能力。