初步的网页国际化支持

1. 添加 jquery i18n js 依赖和入口
2. 在登录界面添加语言切换功能
This commit is contained in:
mofeng-git 2024-08-09 22:49:41 +08:00
parent 4fc188dbc8
commit 4a6fbce485
12 changed files with 97 additions and 10 deletions

View File

@ -56,5 +56,10 @@ html(lang="en")
| import {main} from "#{js_dir}/#{main_js}.js";
| main();
script(src=`${js_dir}/i18n/jquery-3.7.1.min.js`)
script(src=`${js_dir}/i18n/jquery.i18n.min.js`)
script(src=`${js_dir}/i18n/i18n.js`)
body(class=body_class)
block body

View File

@ -43,6 +43,9 @@
<script type="module">import {main} from "/share/js/index/main.js";
main();
</script>
<script src="/share/js/i18n/jquery-3.7.1.min.js"></script>
<script src="/share/js/i18n/jquery.i18n.min.js"></script>
<script src="/share/js/i18n/i18n.js"></script>
</head>
<body>
<div class="start-box">

View File

@ -40,6 +40,9 @@
<script type="module">import {main} from "/share/js/ipmi/main.js";
main();
</script>
<script src="/share/js/i18n/jquery-3.7.1.min.js"></script>
<script src="/share/js/i18n/jquery.i18n.min.js"></script>
<script src="/share/js/i18n/i18n.js"></script>
</head>
<body>
<div class="start-box">

View File

@ -55,6 +55,9 @@
<script type="module">import {main} from "/share/js/kvm/main.js";
main();
</script>
<script src="/share/js/i18n/jquery-3.7.1.min.js"></script>
<script src="/share/js/i18n/jquery.i18n.min.js"></script>
<script src="/share/js/i18n/i18n.js"></script>
</head>
<body class="body-no-select">
<ul id="navbar">

View File

@ -42,6 +42,9 @@
<script type="module">import {main} from "/share/js/login/main.js";
main();
</script>
<script src="/share/js/i18n/jquery-3.7.1.min.js"></script>
<script src="/share/js/i18n/jquery.i18n.min.js"></script>
<script src="/share/js/i18n/i18n.js"></script>
</head>
<body>
<form action="javascript:void(0)">
@ -49,21 +52,21 @@
<div id="login">
<table>
<tr>
<td>Username:&nbsp;</td>
<td i18n="username">Username:&nbsp;</td>
<td>
<input type="text" id="user-input" autocapitalize="off">
</td>
</tr>
<tr>
<td>Password:&nbsp;</td>
<td i18n="password">Password:&nbsp;</td>
<td>
<input type="password" id="passwd-input" autocapitalize="off">
</td>
</tr>
<tr>
<td>2FA code:&nbsp;</td>
<td i18n="2fa_code">2FA code:&nbsp;</td>
<td>
<input type="text" id="code-input" placeholder="if enabled">
<input type="text" id="code-input" placeholder="if enabled" i18n="if_enabled">
</td>
</tr>
<tr>
@ -71,10 +74,19 @@
<hr>
</td>
</tr>
<tr>
<td i18n="select_language">Select language:&nbsp;</td>
<td>
<select id="selectLanguage">
<option class="english" value="en" i18n="english">英语 </option>
<option class="chinese" value="ch" selected="selected" i18n="chinese">简体中文</option>
</select>
</td>
</tr>
<tr>
<td></td>
<td>
<button class="key" id="login-button">Login</button>
<button class="key" id="login-button" i18n="login">Login</button>
</td>
</tr>
</table>

View File

@ -11,20 +11,26 @@ block body
div(id="login")
table
tr
td Username:&nbsp;
td(i18n="username") Username:&nbsp;
td #[input(type="text" id="user-input" autocapitalize="off")]
tr
td Password:&nbsp;
td(i18n="password") Password:&nbsp;
td #[input(type="password" id="passwd-input" autocapitalize="off")]
tr
td 2FA code:&nbsp;
td #[input(type="text" id="code-input" placeholder="if enabled")]
td(i18n="2fa_code") 2FA code:&nbsp;
td #[input(type="text" id="code-input" placeholder="if enabled" i18n="if_enabled")]
tr
td(colspan=2)
hr
tr
td(i18n="select_language") Select language:&nbsp;
td
td #[button(id="login-button" class="key") Login]
select(id="selectLanguage")
option(value='en' class="english" i18n="english") 英语
option(value='ch', selected="selected" class="chinese" i18n="chinese") 简体中文
tr
td
td #[button(id="login-button" class="key" i18n="login") Login]
ul(class="footer")
li(class="footer-left")

View File

@ -0,0 +1,10 @@
{
"username": "用户名:&nbsp;",
"password": "密码:&nbsp;",
"2fa_code": "2FA 验证码:&nbsp;",
"if_enabled": "如果有",
"login": "登录",
"select_language": "选择语言:&nbsp;",
"chinese": "简体中文",
"english": "英语"
}

View File

@ -0,0 +1,10 @@
{
"username": "Username:&nbsp;",
"password": "Password:&nbsp;",
"2fa_code": "2FA code:&nbsp;",
"if_enabled": "if enabled",
"login": "Login",
"select_language": "Select language:&nbsp;",
"chinese": "Simplified Chinese",
"english": "English"
}

29
web/share/js/i18n/i18n.js Normal file
View File

@ -0,0 +1,29 @@
$(document).ready(function() {
/*默认语言*/
var defaultLang = "cn";
$("[i18n]").i18n({
defaultLang: defaultLang,
filePath: "/share/i18n/",
filePrefix: "i18n_",
fileSuffix: "",
forever: true,
callback: function() {
console.log("i18n is ready.");
}
});
/*切换为中文 - 按钮*/
$(".chinese").click(function() {
$("[i18n]").i18n({
defaultLang: "cn",
filePath: "/share/i18n/"
});
});
/*切换为英文 - 按钮*/
$(".english").click(function() {
$("[i18n]").i18n({
defaultLang: "en",
filePath: "/share/i18n/"
});
});
});

2
web/share/js/i18n/jquery-3.7.1.min.js vendored Normal file

File diff suppressed because one or more lines are too long

1
web/share/js/i18n/jquery.i18n.min.js vendored Normal file
View File

@ -0,0 +1 @@
(function($){$.fn.extend({i18n:function(options){var defaults={lang:"",defaultLang:"",filePath:"/i18n/",filePrefix:"i18n_",fileSuffix:"",forever:true,callback:function(){}};function getCookie(name){var arr=document.cookie.split('; ');for(var i=0;i<arr.length;i++){var arr1=arr[i].split('=');if(arr1[0]==name){return arr1[1]}}return''};function setCookie(name,value,myDay){var oDate=new Date();oDate.setDate(oDate.getDate()+myDay);document.cookie=name+'='+value+'; expires='+oDate};var options=$.extend(defaults,options);if(getCookie('i18n_lang')!=""&&getCookie('i18n_lang')!="undefined"&&getCookie('i18n_lang')!=null){defaults.defaultLang=getCookie('i18n_lang')}else if(options.lang==""&&defaults.defaultLang==""){throw"defaultLang must not be null !"};if(options.lang!=null&&options.lang!=""){if(options.forever){setCookie('i18n_lang',options.lang)}else{$.removeCookie("i18n_lang")}}else{options.lang=defaults.defaultLang};var i=this;$.getJSON(options.filePath+options.filePrefix+options.lang+options.fileSuffix+".json",function(data){var i18nLang={};if(data!=null){i18nLang=data}$(i).each(function(i){var i18nOnly=$(this).attr("i18n-only");if($(this).val()!=null&&$(this).val()!=""){if(i18nOnly==null||i18nOnly==undefined||i18nOnly==""||i18nOnly=="value"){$(this).val(i18nLang[$(this).attr("i18n")])}}if($(this).html()!=null&&$(this).html()!=""){if(i18nOnly==null||i18nOnly==undefined||i18nOnly==""||i18nOnly=="html"){$(this).html(i18nLang[$(this).attr("i18n")])}}if($(this).attr('placeholder')!=null&&$(this).attr('placeholder')!=""){if(i18nOnly==null||i18nOnly==undefined||i18nOnly==""||i18nOnly=="placeholder"){$(this).attr('placeholder',i18nLang[$(this).attr("i18n")])}}});options.callback()})}})})(jQuery);

View File

@ -40,6 +40,9 @@
<script type="module">import {main} from "/share/js/vnc/main.js";
main();
</script>
<script src="/share/js/i18n/jquery-3.7.1.min.js"></script>
<script src="/share/js/i18n/jquery.i18n.min.js"></script>
<script src="/share/js/i18n/i18n.js"></script>
</head>
<body>
<div class="start-box">