Html頁面簡單的多語言化
阿新 • • 發佈：2019-01-03
剛剛無意間從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(); });