html语言
刚刚无意间从SwaggerUI汉化上发现一个简单将Html页面多语言化的方法。
具体操作很简单,只需引一下JS文件,具体代码如下
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<script src="http://libs.baidu.com/jquery/1.8.1/jquery.min.js"></script>
<script src="./zh-cn.bilingualism.js"></script>
<body>
<h3>Test</h3>
<a href="#" data-sw-translate>Show/Hide</a>
<h6 data-sw-translate>Show/Hide</h6>
<h6 data-sw-translate>Hello World</h6>
</body>
</html>
JavaScript:
'use strict';
/**
* Html页面多语言化。
*
* 在Html页面中只需先引用一个JQuery文件:
* 例如:<script src="http://libs.baidu.com/jquery/1.8.1/jquery.min.js"></script>
*
* 在引用本JS文件
* 例如:<script src="./zh-cn.bilingualism.js"></script>
*
* 如果你想多语言化一个Html页面,你应该做两件事:
* 1. 在HTML标签中,加入 data-sw-translate="" 标记
* 例如:<h6 data-sw-translate="">Hello World</h6>
* 2. 然后在下面的 window.SwaggerTranslator.learn 中添加中英文对应关系
* 添加: "Hello World": "你好,世界",
*/
window.SwaggerTranslator = {
_words: [],
translate: function () {
var $this = this;
$('[data-sw-translate]').each(function () {
$(this).html($this._tryTranslate($(this).html()));
$(this).val($this._tryTranslate($(this).val()));
$(this).attr('title', $this._tryTranslate($(this).attr('title')));
});
},
_tryTranslate: function (word) {
return this._words[$.trim(word)] !== undefined ? this._words[$.trim(word)] : word;
},
learn: function (wordsMap) {
this._words = wordsMap;
}
};
/* jshint quotmark: double */
window.SwaggerTranslator.learn({
"Warning: Deprecated": "警告:已过时",
"Implementation Notes": "实现备注",
"Response Class": "响应类",
"Status": "状态",
"Parameters": "参数",
"Parameter": "参数",
"Value": "值",
"Description": "描述",
"Parameter Type": "参数类型",
"Data Type": "数据类型",
"Response Messages": "响应消息",
"HTTP Status Code": "HTTP状态码",
"Reason": "原因",
"Response Model": "响应模型",
"Request URL": "请求URL",
"Response Body": "响应体",
"Response Code": "响应码",
"Response Headers": "响应头",
"Hide Response": "隐藏响应",
"Headers": "头",
"Try it out!": "试一下!",
"Show/Hide": "显示/隐藏",
"List Operations": "显示操作",
"Expand Operations": "展开操作",
"Raw": "原始",
"can't parse JSON. Raw result": "无法解析JSON. 原始结果",
"Model Schema": "模型架构",
"Model": "模型",
"apply": "应用",
"Username": "用户名",
"Password": "密码",
"Terms of service": "服务条款",
"Created by": "创建者",
"See more at": "查看更多:",
"Contact the developer": "联系开发者",
"api version": "api版本",
"Response Content Type": "响应Content Type",
"fetching resource": "正在获取资源",
"fetching resource list": "正在获取资源列表",
"Explore": "浏览",
"Show Swagger Petstore Example Apis": "显示 Swagger Petstore 示例 Apis",
"Can't read from server. It may not have the appropriate access-control-origin settings.": "无法从服务器读取。可能没有正确设置access-control-origin。",
"Please specify the protocol for": "请指定协议:",
"Can't read swagger JSON from": "无法读取swagger JSON于",
"Finished Loading Resource Information. Rendering Swagger UI": "已加载资源信息。正在渲染Swagger UI",
"Unable to read api": "无法读取api",
"from path": "从路径",
"server returned": "服务器返回",
"Hello World": "你好,世界"
});
$(function () {
window.SwaggerTranslator.translate();
});