translate-go v2.0.4
TranslateGO
純前端多語系輔助工具
NPM
DEMO
Toolbar DEMO
前言
本身是Java後端開發工程師,碰過一些多語系的架構設計,老實說真的很麻煩,很多前後端程式都必須依賴原開發專案多語架構下去開發,就連原本沒有多語系的專案要導入多語系,也需要大改,於是開發這個純前端的多語套件,只要 translate-go.js 加上自行翻譯的語言包,就可以讓專案有多語的功能!
目的
利用TranslateGO快速搜尋需要被翻譯的文字,再利用TranslateGO ToolBar快速製作多語系JS檔、TS檔。
翻譯範圍
- Text
- Input placeholder
一. 安裝
在自己的網站需要翻譯的頁面,增加以下程式碼:
JavaScript
直接下載,放進專案目錄。
一般使用
<script type="text/javascript" src="js/translate-go.min.js"></script>
<script type="text/javascript">
// 預設使用語系
TranslateModule.translateConfig.defaultLanguage = 'zh-TW';
var translateGO = TranslateModule.getTranslateGO();
// 開始監聽
translateGO.start();
</script>
開發模式
<script type="text/javascript" src="js/translate-toolbar.js"></script>
<script type="text/javascript">
// 預設使用語系
TranslateModule.translateConfig.defaultLanguage = 'zh-TW';
// 取得TranslateGO
var translateGO = TranslateModule.getTranslateGO();
// 開始監聽
translateGO.start();
// 產生translate-toolbar element
let toolbar = docuemnt.createElement('translate-toolbar');
document.body.appendChild(toolbar);
</script>
Angular TypeScript
安裝
npm install translate-go@latest
一般使用
任意開始 *.ts ex: app.module.ts
import { getTranslateGO,translateConfig } from 'translate-go';
// 預設使用語系
translateConfig.defaultLanguage = 'zh-TW';
let translateGO = getTranslateGO();
// 開始監聽
translateGO.start();
開發模式
angular.json
{
"architect": {
"build": {
"scripts": [{
"input": "node_modules/translate-go/lib/translate-toolbar.js"
}]
}
}
}
切記正式環境設定要移除 scripts
{
"configurations": {
"production": {
"scripts": []
}
}
}
任意開始 *.ts ex: app.module.ts
import { getTranslateGO,translateConfig } from 'translate-go';
// 預設使用語系
translateConfig.defaultLanguage = 'zh-TW';
// 取得TranslateGO
let translateGO = getTranslateGO();
// 開始監聽
translateGO.start();
// 產生translate-toolbar element
document.body.appendChild(docuemnt.createElement('translate-toolbar'));
二. 翻譯工具列
在開發模式下,左下角會出現工具列,利用該工具編輯翻譯檔
▶ Start:
- 開始監聽DOM insert、modify和remove事件並翻譯。
● Stop:
- 關閉開發模式,停止蒐集無法翻譯的資料。
- 停止監聽DOM insert、modify和remove事件。
- 還原成原本未翻譯的值
✎ Tool:
- 開啟編輯翻譯資料頁面。
語系:
- 列出目前有的翻譯資料語系,切換可轉換語系。
❱ 展開:
- 列出目前有的翻譯資料語系,切換可轉換語系。
✖ 縮小:
- 列出目前有的翻譯資料語系,切換可轉換語系。
三. 加載翻譯檔案
加載已產生的翻譯資料,反覆搜尋是否有遺漏的。
JavaScript
<script type="text/javascript" src="js/translate-go.min.js"></script>
<script type="text/javascript">
// 預設使用語系
translateConfig.defaultLanguage = 'zh-TW';
// 取得TranslateGO
var translateGO = TranslateModule.getTranslateGO();
// 載入翻譯資料
translateGO.load('zh-TW',{"Test":"測試"});
// 開始監聽
translateGO.start();
// 其他使用方式
var testText = translateGO.get('{Test}');// return '測試';
</script>
TypeScript
import { getTranslateGO,translateConfig } from 'translate-go';
// 預設使用語系
translateConfig.defaultLanguage = 'zh-TW';
// 取得TranslateGO
let translateGO = getTranslateGO();
// 載入翻譯資料
translateGO.load('zh-TW',{"Test":"測試"});
// 開始監聽
translateGO.start();
// 其他使用方式
var testText = translateGO.get('{Test}');// return '測試';
四. 開始使用:
HTML
<div>{Test}</div> <!--or --> <div translateKey="{Test}"></div>
input placeholder
<input placeholder="{Test}">
input submit
<input type="submit" value="{Test}">
不需要翻譯的區塊
<div notTranslate> <div> <!--... --> </div> </div>
Arguments
```html
TranslateGO 功能:
translate
直接翻譯語言包裡有的文字。
translateGO.translate('zh-TW');
start
監聽所有DOM增加、減少和改變的事件,動態翻譯文字。
translateGO.start();
stop
停止監聽DOM insert、modify和remove事件。
translateGO.stop();
load
重新載入翻譯資料,如果沒有傳入翻譯資料,則自動載入當前 window._translateGO開頭的翻譯資料
translateGO.load("zh-TW",{"key":"text"});
get
取得當前語系的文字。
translateGO.get('{Test}');//return '測試';
getLanguage
取得當前語系。
translateGO.getLanguage();//return 'zh-TW';
addEventListener
監聽事件 TranslateEvent
sourceLoaded:
在 translateGO.load 時觸發。
languageChanged:
在 translateGO.translate 時,而且語系有改變,才觸發。
setLanguageMapping
增加對應表,讓 zh 也能使用 zh-TW 的翻譯資源。
translateGO.setLanguageMapping({ "zh":"zh-TW" });
9 months ago
9 months ago
9 months ago
1 year ago
2 years ago
2 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago