mirror of https://github.com/layui/layui
docs(i18n): 优化正式文档
贤心
parent
6f0d751648
commit
6c270b4c38
|
|
@ -3,8 +3,6 @@
|
||||||
<head>
|
<head>
|
||||||
<meta charset="utf-8">
|
<meta charset="utf-8">
|
||||||
<title>i18n 演示 - Layui</title>
|
<title>i18n 演示 - Layui</title>
|
||||||
<meta name="renderer" content="webkit">
|
|
||||||
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||||
<link href="{{= d.layui[2].cdn.css }}" rel="stylesheet">
|
<link href="{{= d.layui[2].cdn.css }}" rel="stylesheet">
|
||||||
</head>
|
</head>
|
||||||
|
|
@ -20,7 +18,6 @@
|
||||||
<select id="change-locale" lay-filter="change-locale">
|
<select id="change-locale" lay-filter="change-locale">
|
||||||
<option value="zh-CN">简体中文</option>
|
<option value="zh-CN">简体中文</option>
|
||||||
<option value="en">English</option>
|
<option value="en">English</option>
|
||||||
<option value="fr">Français</option>
|
|
||||||
<option value="zh-HK">繁體中文</option>
|
<option value="zh-HK">繁體中文</option>
|
||||||
</select>
|
</select>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -193,7 +190,7 @@
|
||||||
</template>!}}
|
</template>!}}
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
// 组件语言包配置
|
// 配置 Layui 组件语言包
|
||||||
window.LAYUI_GLOBAL = {
|
window.LAYUI_GLOBAL = {
|
||||||
i18n: {
|
i18n: {
|
||||||
locale: localStorage.getItem('layui-i18n-local-test') || 'zh-CN', // 当前语言环境
|
locale: localStorage.getItem('layui-i18n-local-test') || 'zh-CN', // 当前语言环境
|
||||||
|
|
@ -360,171 +357,6 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
// Français
|
|
||||||
'fr': {
|
|
||||||
code: {
|
|
||||||
copy: 'Copier le code',
|
|
||||||
copied: 'Copié',
|
|
||||||
copyError: 'Échec de la copie',
|
|
||||||
maximize: 'Afficher en plein écran',
|
|
||||||
restore: 'Restaurer l’affichage',
|
|
||||||
preview: 'Aperçu dans une nouvelle fenêtre'
|
|
||||||
},
|
|
||||||
colorpicker: {
|
|
||||||
clear: 'Effacer',
|
|
||||||
confirm: 'OK'
|
|
||||||
},
|
|
||||||
dropdown: {
|
|
||||||
noData: 'Aucune donnée disponible'
|
|
||||||
},
|
|
||||||
flow: {
|
|
||||||
loadMore: 'Charger plus',
|
|
||||||
noMore: 'Plus de données'
|
|
||||||
},
|
|
||||||
form: {
|
|
||||||
select: {
|
|
||||||
noData: 'Aucune donnée disponible',
|
|
||||||
noMatch: 'Aucune correspondance',
|
|
||||||
placeholder: 'Veuillez sélectionner'
|
|
||||||
},
|
|
||||||
validateMessages: {
|
|
||||||
required: 'Ce champ est obligatoire',
|
|
||||||
phone: 'Numéro de téléphone invalide',
|
|
||||||
email: 'Adresse e-mail invalide',
|
|
||||||
url: 'URL invalide',
|
|
||||||
number: 'Uniquement des chiffres',
|
|
||||||
date: 'Format de date invalide',
|
|
||||||
identity: 'Numéro d’identification invalide'
|
|
||||||
},
|
|
||||||
verifyErrorPromptTitle: 'Avertissement'
|
|
||||||
},
|
|
||||||
laydate: {
|
|
||||||
months: ['Janv', 'Févr', 'Mars', 'Avr', 'Mai', 'Juin', 'Juil', 'Août', 'Sept', 'Oct', 'Nov', 'Déc'],
|
|
||||||
weeks: ['Di', 'Lu', 'Ma', 'Me', 'Je', 'Ve', 'Sa'],
|
|
||||||
time: ['Heure', 'Minute', 'Seconde'],
|
|
||||||
literal: {
|
|
||||||
year: ''
|
|
||||||
},
|
|
||||||
selectDate: 'Sélec. date',
|
|
||||||
selectTime: 'Sélec. heure',
|
|
||||||
startTime: 'Heure de début',
|
|
||||||
endTime: 'Heure de fin',
|
|
||||||
// Recommandé en version abrégée en raison de l’espace limité du composant
|
|
||||||
tools: {
|
|
||||||
confirm: 'OK',
|
|
||||||
clear: 'Eff.',
|
|
||||||
now: 'Ajd.',
|
|
||||||
reset: 'Réinit.'
|
|
||||||
},
|
|
||||||
rangeOrderPrompt: 'L’heure de fin ne peut pas être antérieure à l’heure de début\nVeuillez recommencer',
|
|
||||||
invalidDatePrompt: 'Date ou heure hors plage valide\n',
|
|
||||||
formatErrorPrompt: 'Format de date invalide\nLe format attendu est :\n{format}\n',
|
|
||||||
autoResetPrompt: 'Il a été réinitialisé pour vous',
|
|
||||||
preview: 'Résultat sélectionné actuel'
|
|
||||||
},
|
|
||||||
layer: {
|
|
||||||
confirm: 'Confirmer',
|
|
||||||
cancel: 'Annuler',
|
|
||||||
defaultTitle: 'Information',
|
|
||||||
prompt: {
|
|
||||||
InputLengthPrompt: 'Maximum {length} caractères'
|
|
||||||
},
|
|
||||||
photos: {
|
|
||||||
noData: 'Aucune image',
|
|
||||||
tools: {
|
|
||||||
rotate: 'Faire pivoter',
|
|
||||||
scaleX: 'Inverser horizontalement',
|
|
||||||
zoomIn: 'Agrandir',
|
|
||||||
zoomOut: 'Réduire',
|
|
||||||
reset: 'Réinitialiser',
|
|
||||||
close: 'Fermer'
|
|
||||||
},
|
|
||||||
viewPicture: 'Voir l’image originale',
|
|
||||||
urlError: {
|
|
||||||
prompt: 'L’adresse de l’image est invalide,\nContinuer avec la suivante ?',
|
|
||||||
confirm: 'Suivante',
|
|
||||||
cancel: 'Annuler'
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
laypage: {
|
|
||||||
prev: 'Page précédente',
|
|
||||||
next: 'Page suivante',
|
|
||||||
first: 'Première',
|
|
||||||
last: 'Dernière',
|
|
||||||
total: 'Total {total} éléments',
|
|
||||||
pagesize: 'éléments/page',
|
|
||||||
goto: 'Aller à',
|
|
||||||
page: 'page',
|
|
||||||
confirm: 'Confirmer'
|
|
||||||
},
|
|
||||||
table: {
|
|
||||||
sort: {
|
|
||||||
asc: 'Croissant',
|
|
||||||
desc: 'Décroissant'
|
|
||||||
},
|
|
||||||
noData: 'Aucune donnée',
|
|
||||||
tools: {
|
|
||||||
filter: {
|
|
||||||
title: 'Filtrer les colonnes'
|
|
||||||
},
|
|
||||||
export: {
|
|
||||||
title: 'Exporter',
|
|
||||||
noDataPrompt: 'Aucune donnée à exporter',
|
|
||||||
compatPrompt: 'L’exportation n’est pas supportée par IE, veuillez utiliser Chrome ou un autre navigateur moderne',
|
|
||||||
csvText: 'Exporter au format CSV'
|
|
||||||
},
|
|
||||||
print: {
|
|
||||||
title: 'Imprimer',
|
|
||||||
noDataPrompt: 'Aucune donnée à imprimer'
|
|
||||||
}
|
|
||||||
},
|
|
||||||
dataFormatError: 'Les données retournées sont invalides. Le code de réussite attendu est : "{statusName}": {statusCode}',
|
|
||||||
xhrError: 'Erreur de requête : {msg}'
|
|
||||||
},
|
|
||||||
transfer: {
|
|
||||||
noData: 'Aucune donnée',
|
|
||||||
noMatch: 'Aucune correspondance',
|
|
||||||
title: ['Liste 1', 'Liste 2'],
|
|
||||||
searchPlaceholder: 'Recherche par mot-clé'
|
|
||||||
},
|
|
||||||
tree: {
|
|
||||||
defaultNodeName: 'Sans nom',
|
|
||||||
noData: 'Aucune donnée',
|
|
||||||
deleteNodePrompt: 'Confirmer la suppression du nœud "{name}" ?'
|
|
||||||
},
|
|
||||||
upload: {
|
|
||||||
fileType: {
|
|
||||||
file: 'Fichier',
|
|
||||||
image: 'Image',
|
|
||||||
video: 'Vidéo',
|
|
||||||
audio: 'Audio'
|
|
||||||
},
|
|
||||||
validateMessages: {
|
|
||||||
fileExtensionError: 'Le {fileType} sélectionné contient un format non supporté',
|
|
||||||
filesOverLengthLimit: 'Nombre maximum de fichiers : {length}',
|
|
||||||
currentFilesLength: 'Vous avez sélectionné {length} fichiers',
|
|
||||||
fileOverSizeLimit: 'La taille du fichier ne doit pas dépasser {size}'
|
|
||||||
},
|
|
||||||
chooseText: '{length} fichiers'
|
|
||||||
},
|
|
||||||
util: {
|
|
||||||
timeAgo: {
|
|
||||||
days: 'il y a {days} jours',
|
|
||||||
hours: 'il y a {hours} heures',
|
|
||||||
minutes: 'il y a {minutes} minutes',
|
|
||||||
future: 'Futur',
|
|
||||||
justNow: 'À l’instant'
|
|
||||||
},
|
|
||||||
toDateString: {
|
|
||||||
meridiem: function(hours, minutes){
|
|
||||||
return hours < 12 ? 'AM' : 'PM';
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
// 繁體中文
|
// 繁體中文
|
||||||
'zh-HK': {
|
'zh-HK': {
|
||||||
code: {
|
code: {
|
||||||
|
|
@ -703,6 +535,7 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<script src="{{= d.layui[2].cdn.js }}"></script>
|
<script src="{{= d.layui[2].cdn.js }}"></script>
|
||||||
<script>
|
<script>
|
||||||
layui.use(async function () {
|
layui.use(async function () {
|
||||||
|
|
@ -712,7 +545,10 @@
|
||||||
table, transfer, tree, upload, util
|
table, transfer, tree, upload, util
|
||||||
} = layui;
|
} = layui;
|
||||||
|
|
||||||
// 业务 i18n 配置
|
/**
|
||||||
|
* 业务 i18n 配置
|
||||||
|
* 说明：此处仅为了让演示的「页面内容」与「Layui 组件」语言保持一致。实际使用时通常只需指定 Layui 组件语言环境，而页面内容的语言建议由您的项目本身进行管理。
|
||||||
|
*/
|
||||||
i18n.set({
|
i18n.set({
|
||||||
messages: {
|
messages: {
|
||||||
'zh-CN': {
|
'zh-CN': {
|
||||||
|
|
@ -753,25 +589,6 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
'fr': {
|
|
||||||
custom: {
|
|
||||||
switchLanguage: 'Changer la langue',
|
|
||||||
readme: {
|
|
||||||
description: 'layui.i18n.$t est une méthode privée (non documentée), utilisée ici uniquement à des fins de démonstration.',
|
|
||||||
hello: 'Bonjour',
|
|
||||||
},
|
|
||||||
form: {
|
|
||||||
required: 'Requis',
|
|
||||||
phone: 'Téléphone',
|
|
||||||
email: 'Email',
|
|
||||||
date: 'Date',
|
|
||||||
select: 'Sélection',
|
|
||||||
submit: 'Soumettre maintenant',
|
|
||||||
reset: 'Réinitialiser',
|
|
||||||
placeholder: 'Veuillez entrer'
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
'zh-HK': {
|
'zh-HK': {
|
||||||
custom: {
|
custom: {
|
||||||
switchLanguage: '切換語言',
|
switchLanguage: '切換語言',
|
||||||
|
|
@ -879,7 +696,7 @@
|
||||||
{
|
{
|
||||||
"alt": "error",
|
"alt": "error",
|
||||||
"pid": 3,
|
"pid": 3,
|
||||||
"src": "错误提示演示",
|
"src": "",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"alt": "universe",
|
"alt": "universe",
|
||||||
|
|
@ -927,7 +744,6 @@
|
||||||
// tree
|
// tree
|
||||||
tree.render({
|
tree.render({
|
||||||
elem: '#demo-tree',
|
elem: '#demo-tree',
|
||||||
//data: [],
|
|
||||||
data: [{ title: 'Item 1', id: 1, children: [{ title: 'Item 1-1', id: 2 }] }],
|
data: [{ title: 'Item 1', id: 1, children: [{ title: 'Item 1-1', id: 2 }] }],
|
||||||
edit: ['add', 'update', 'del']
|
edit: ['add', 'update', 'del']
|
||||||
});
|
});
|
||||||
|
|
@ -938,9 +754,7 @@
|
||||||
url: '', // 实际使用时改成您自己的上传接口即可。
|
url: '', // 实际使用时改成您自己的上传接口即可。
|
||||||
multiple: true,
|
multiple: true,
|
||||||
accept: 'file',
|
accept: 'file',
|
||||||
//exts: 'zip',
|
number: 1
|
||||||
number: 1,
|
|
||||||
//size: 60,
|
|
||||||
});
|
});
|
||||||
|
|
||||||
// util
|
// util
|
||||||
|
|
|
||||||
|
|
@ -104,7 +104,7 @@ i18n.set({
|
||||||
asc: '升序',
|
asc: '升序',
|
||||||
desc: '降序'
|
desc: '降序'
|
||||||
},
|
},
|
||||||
noData: '无数据',
|
noData: '暂无数据',
|
||||||
tools:{
|
tools:{
|
||||||
filter: {
|
filter: {
|
||||||
title: '筛选列'
|
title: '筛选列'
|
||||||
|
|
@ -124,14 +124,14 @@ i18n.set({
|
||||||
xhrError: '请求异常，错误提示：{msg}'
|
xhrError: '请求异常，错误提示：{msg}'
|
||||||
},
|
},
|
||||||
transfer: {
|
transfer: {
|
||||||
noData: '无数据',
|
noData: '暂无数据',
|
||||||
noMatch: '无匹配数据',
|
noMatch: '无匹配数据',
|
||||||
title: ['列表一', '列表二'],
|
title: ['列表一', '列表二'],
|
||||||
searchPlaceholder: '关键词搜索'
|
searchPlaceholder: '关键词搜索'
|
||||||
},
|
},
|
||||||
tree: {
|
tree: {
|
||||||
defaultNodeName: '未命名',
|
defaultNodeName: '未命名',
|
||||||
noData: '无数据',
|
noData: '暂无数据',
|
||||||
deleteNodePrompt: '确认删除"{name}"节点吗？'
|
deleteNodePrompt: '确认删除"{name}"节点吗？'
|
||||||
},
|
},
|
||||||
upload: {
|
upload: {
|
||||||
|
|
@ -144,7 +144,7 @@ i18n.set({
|
||||||
validateMessages: {
|
validateMessages: {
|
||||||
fileExtensionError: '选择的{fileType}中包含不支持的格式',
|
fileExtensionError: '选择的{fileType}中包含不支持的格式',
|
||||||
filesOverLengthLimit: '同时最多只能上传: {length} 个文件',
|
filesOverLengthLimit: '同时最多只能上传: {length} 个文件',
|
||||||
currentFilesLength: '您当前已经选择了: {length} 个文件',
|
currentFilesLength: '当前已经选择了: {length} 个文件',
|
||||||
fileOverSizeLimit: '文件大小不能超过 {size}'
|
fileOverSizeLimit: '文件大小不能超过 {size}'
|
||||||
},
|
},
|
||||||
chooseText: '{length} 个文件'
|
chooseText: '{length} 个文件'
|
||||||
|
|
@ -158,6 +158,7 @@ i18n.set({
|
||||||
justNow: '刚刚'
|
justNow: '刚刚'
|
||||||
},
|
},
|
||||||
toDateString: {
|
toDateString: {
|
||||||
|
// https://www.unicode.org/cldr/charts/47/supplemental/day_periods.html
|
||||||
meridiem: function(hours, minutes){
|
meridiem: function(hours, minutes){
|
||||||
var hm = hours * 100 + minutes;
|
var hm = hours * 100 + minutes;
|
||||||
if (hm < 500) {
|
if (hm < 500) {
|
||||||
|
|
|
||||||
|
|
@ -5,13 +5,15 @@ toc: true
|
||||||
|
|
||||||
# 国际化 <sup>2.12+</sup>
|
# 国际化 <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>
|
<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>
|
<textarea>
|
||||||
{{- d.include("/i18n/detail/demo.md") }}
|
{{- d.include("/i18n/detail/demo.md") }}
|
||||||
</textarea>
|
</textarea>
|
||||||
|
|
@ -22,8 +24,7 @@ toc: true
|
||||||
| API | 描述 |
|
| API | 描述 |
|
||||||
| --- | --- |
|
| --- | --- |
|
||||||
| var i18n = layui.i18n | 获得 `i18n` 模块。|
|
| var i18n = layui.i18n | 获得 `i18n` 模块。|
|
||||||
| [i18n.set(options)](#set) | 设置语言包及默认语言。|
|
| [i18n.set(options)](#set) | 设置语言环境及语言包。|
|
||||||
| [i18n.$t(options)](#translation) | 从国际化消息中获取翻译后的内容。 |
|
|
||||||
|
|
||||||
<h3 id="set" lay-toc="{level: 2}">配置方式</h3>
|
<h3 id="set" lay-toc="{level: 2}">配置方式</h3>
|
||||||
|
|
||||||
|
|
@ -52,15 +53,15 @@ layui.use(function() {
|
||||||
|
|
||||||
🔔 请注意：如果您的页面有用到 Layui 组件的自动渲染（如 table 模板配置渲染方式），因为执行顺序的问题，组件在自动渲染时可能无法读取到 `i18n.set()` 的配置信息，此时建议采用下述 `LAYUI_GLOBAL.i18n` 全局配置。
|
🔔 请注意：如果您的页面有用到 Layui 组件的自动渲染（如 table 模板配置渲染方式），因为执行顺序的问题，组件在自动渲染时可能无法读取到 `i18n.set()` 的配置信息，此时建议采用下述 `LAYUI_GLOBAL.i18n` 全局配置。
|
||||||
|
|
||||||
#### 2. 通过 `LAYUI_GLOBAL.i18n` 全局配置
|
#### 2. 通过 `LAYUI_GLOBAL.i18n` 全局配置（推荐）
|
||||||
|
|
||||||
由于 i18n 配置与组件渲染存在执行顺序问题，为了确保 i18n 配置始终在组件渲染之前生效，更推荐采用该全局配置方式。
|
由于 i18n 配置与组件渲染存在执行顺序问题，为了确保 i18n 配置始终在组件渲染之前生效，更推荐采用该全局配置方式。
|
||||||
|
|
||||||
```html
|
```html
|
||||||
<script>
|
<script>
|
||||||
|
// 全局配置应放在 layui.js 引入之前的位置
|
||||||
window.LAYUI_GLOBAL = {
|
window.LAYUI_GLOBAL = {
|
||||||
// 选项同 i18n.set(options)
|
i18n: { // 选项同 i18n.set(options)
|
||||||
i18n: {
|
|
||||||
locale: 'zh-CN', // 当前语言环境
|
locale: 'zh-CN', // 当前语言环境
|
||||||
messages: { // 扩展其他语言包
|
messages: { // 扩展其他语言包
|
||||||
'en': {},
|
'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 版本也因此具备国际化能力。
|
||||||
|
|
||||||
|
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue