mirror of https://github.com/layui/layui
docs(i18n): 优化正式文档
贤心
parent
6f0d751648
commit
6c270b4c38
|
|
@ -3,8 +3,6 @@
|
|||
<head>
|
||||
<meta charset="utf-8">
|
||||
<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">
|
||||
<link href="{{= d.layui[2].cdn.css }}" rel="stylesheet">
|
||||
</head>
|
||||
|
|
@ -20,7 +18,6 @@
|
|||
<select id="change-locale" lay-filter="change-locale">
|
||||
<option value="zh-CN">简体中文</option>
|
||||
<option value="en">English</option>
|
||||
<option value="fr">Français</option>
|
||||
<option value="zh-HK">繁體中文</option>
|
||||
</select>
|
||||
</div>
|
||||
|
|
@ -193,7 +190,7 @@
|
|||
</template>!}}
|
||||
|
||||
<script>
|
||||
// 组件语言包配置
|
||||
// 配置 Layui 组件语言包
|
||||
window.LAYUI_GLOBAL = {
|
||||
i18n: {
|
||||
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': {
|
||||
code: {
|
||||
|
|
@ -703,6 +535,7 @@
|
|||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<script src="{{= d.layui[2].cdn.js }}"></script>
|
||||
<script>
|
||||
layui.use(async function () {
|
||||
|
|
@ -712,7 +545,10 @@
|
|||
table, transfer, tree, upload, util
|
||||
} = layui;
|
||||
|
||||
// 业务 i18n 配置
|
||||
/**
|
||||
* 业务 i18n 配置
|
||||
* 说明：此处仅为了让演示的「页面内容」与「Layui 组件」语言保持一致。实际使用时通常只需指定 Layui 组件语言环境，而页面内容的语言建议由您的项目本身进行管理。
|
||||
*/
|
||||
i18n.set({
|
||||
messages: {
|
||||
'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': {
|
||||
custom: {
|
||||
switchLanguage: '切換語言',
|
||||
|
|
@ -879,7 +696,7 @@
|
|||
{
|
||||
"alt": "error",
|
||||
"pid": 3,
|
||||
"src": "错误提示演示",
|
||||
"src": "",
|
||||
},
|
||||
{
|
||||
"alt": "universe",
|
||||
|
|
@ -927,7 +744,6 @@
|
|||
// tree
|
||||
tree.render({
|
||||
elem: '#demo-tree',
|
||||
//data: [],
|
||||
data: [{ title: 'Item 1', id: 1, children: [{ title: 'Item 1-1', id: 2 }] }],
|
||||
edit: ['add', 'update', 'del']
|
||||
});
|
||||
|
|
@ -938,9 +754,7 @@
|
|||
url: '', // 实际使用时改成您自己的上传接口即可。
|
||||
multiple: true,
|
||||
accept: 'file',
|
||||
//exts: 'zip',
|
||||
number: 1,
|
||||
//size: 60,
|
||||
number: 1
|
||||
});
|
||||
|
||||
// util
|
||||
|
|
|
|||
|
|
@ -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) {
|
||||
|
|
|
|||
|
|
@ -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 版本也因此具备国际化能力。
|
||||
|
|
|
|||
Loading…
Reference in New Issue