TranslateGO

純前端多語系輔助工具

npm網址：https://www.npmjs.com/package/translate-go

git網址：https://github.com/babyblue94520/translate-go

DEMO：https://babyblue94520.github.io/translate-go/dist/

前言

本身是Java後端開發工程師，碰過一些多語系的架構設計，老實說真的很麻煩，很多前後端程式都必須依賴原開發專案多語架構下去開發，就連原本沒有多語系的專案要導入多語系，也需要大改，於是開發這個純前端的多語套件，只要 translate-go.js 加上自行翻譯的語言包，就可以讓專案有多語的功能！

目的

利用TranslateGO快速搜尋需要被翻譯的文字，再利用TranslateGO ToolBar快速製作多語系JS檔、TS檔。

翻譯範圍

HTMLElement的innerText
Input placeholder
window.alert
window.confirm

一. 安裝

在自己的網站需要翻譯的頁面，增加以下程式碼：

JavaScript

直接下載，放進專案目錄。

一般使用

<script type="text/javascript" src="js/translate-go.min.js"></script>
<script type="text/javascript">
	// 開發模式
	TranslateModule.TranslateConfig.dev = true;

	// 預設使用語系
	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" src="js/translate-go.min.js"></script>
<script type="text/javascript">
	// 開發模式
	TranslateModule.TranslateConfig.dev = true;
	// 預設使用語系
	TranslateModule.TranslateConfig.defaultLanguage = 'zh_TW';
	// 取得TranslateGO 
	var translateGO = TranslateModule.getTranslateGO();
	// 開始監聽
	translateGO.start();
	// 產生translate-toolbar element
	if(TranslateModule.TranslateConfig.dev){
		document.body.appendChild(docuemnt.createElement('translate-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.dev = true;
// 預設使用語系
TranslateConfig.defaultLanguage = 'zh_TW';
// 取得TranslateGO 
let translateGO = getTranslateGO();
// 開始監聽
translateGO.start();
// 產生translate-toolbar element
if(TranslateModule.TranslateConfig.dev){
	document.body.appendChild(docuemnt.createElement('translate-toolbar'));
}

二. 蒐集需要翻譯字串

在開發模式下，左下角會出現工具列，利用該工具編輯翻譯檔

語系下拉選單:
- 列出目前有的翻譯資料語系，切換可轉換語系。
Start:
- 進入開發模式，開始蒐集無法翻譯的資料。
- 開始監聽DOM insert、modify和remove事件並翻譯。
Stop:
- 關閉開發模式，停止蒐集無法翻譯的資料。
- 停止監聽DOM insert、modify和remove事件。
Refresh:
- 載入window底下__translateGO_開頭的翻譯資料到 Tool。
- 列出無法翻譯的資料到 Tool 裡。
- 將 Tool 裡編輯好的翻譯資料載入到 TranslateGO。
Tool:
- 開啟編輯翻譯資料頁面。

三. 加載部分翻譯檔案

加載已產生的翻譯資料，反覆搜尋是否有遺漏的。

JavaScript

<script type="text/javascript" src="js/translate-go.min.js"></script>
<script type="text/javascript" src="js/TranslateSourceAll.js"></script>
<script type="text/javascript">
	// 預設使用語系
	TranslateConfig.defaultLanguage = 'zh_TW';
	// 取得TranslateGO 
	var translateGO = TranslateModule.getTranslateGO();
	// 載入翻譯資料
	translateGO.reload(TranslateSourceAll);
	// or
	// 將自動載入所有在window.__translateGO_開頭的翻譯資料
	translateGO.reload();
    // 開始監聽
	translateGO.start();
</script>

TypeScript

import { getTranslateGO,TranslateConfig } from 'translate-go';
import { TranslateSourceAll } from 'ts/translate/TranslateSourceAll';

// 預設使用語系
TranslateConfig.defaultLanguage = 'zh_TW';
// 取得TranslateGO 
let translateGO = getTranslateGO();
// 載入翻譯資料
translateGO.reload(TranslateSourceAll);
// or
// 將自動載入所有在window.__translateGO_開頭的翻譯資料
translateGO.reload();
// 開始監聽
translateGO.start();

四. 開始使用:

JavaScript

<script type="text/javascript" src="js/translate-go.min.js"></script>
<script type="text/javascript" src="js/TranslateSourceAll.js"></script>
<script type="text/javascript">
	// 用英文語系最明顯，true:產生右下角的toolbar
	var translateGO = TranslateModule.getTranslateGO();
    // 加載翻譯資料
	translateGO.reload();
	// 開始監聽
	translateGO.start();
    
	// 其他使用方式
    var testText = translateGO.getText('測試');// return 'test';
    // or
    var testText = translateGO.getTextByKey('testKey');// return 'test';
    // or
    var testText = TranslateSourceAll['testKey']['zh_TW'];
</script>

TypeScript

import {  getTranslateGO,TranslateConfig } from 'translate-go';
import { TranslateSourceAll } from 'ts/translate/TranslateSourceAll';

// 預設使用語系
TranslateConfig.defaultLanguage = 'zh_TW';
// 取得TranslateGO 
let translateGO = getTranslateGO();
// 加載翻譯資料
translateGO.reload();
// 開始監聽
translateGO.start();

// 其他使用方式
let testText = translateGO.getText('測試');// return 'test';
// or
let testText = translateGO.getTextByKey('testKey');// return 'test';
// or
let testText = TranslateSourceByLang.testKey.zh_TW;

JavaScript偷懶步驟：

直接打開Chrome DevTools 貼上下面程式碼

var source = document.createElement('script');
source.src = 'https://babyblue94520.github.io/translate-go/lib/translate-toolbar.js';
source.onload = function(){
	document.body.appendChild(document.createElement('translate-toolbar'));
}
document.head.appendChild(source);

使用密技

開啟要製作翻譯資料的網站，直接打開Chrome DevTools(F12)，貼上 JavaScript偷懶步驟 執行。
左下角工具列，點擊 Start 開始蒐集需要翻譯文字
點擊 Tool ，將 未處理 中要翻譯的文字，切換群組到 All
新增所有需要的語系
點擊有資料欄位上的列出，將列出上 textarea 內的文字複製到 Google翻譯 (注:每組文字都是換行隔開)
翻譯成對象語系後，將翻譯後的資料直接複製到列出上的 textarea 並載入
Key的部分必須為英文
完成所有語系的文字翻譯後，點擊左下角工具列 Refresh ,再點擊 Tool 關閉視窗
透過工具列上的 語系下拉選單 切換當前語系
翻譯資料製作完成後，透過 Tool 內的下載功能，保存翻譯資料

TranslateGO功能以下：

translate

直接翻譯語言包裡有的文字。
```
 translateGO.translate('zh_TW');
```
start

監聽所有DOM增加、減少和改變的事件，動態翻譯文字。
```
 translateGO.start();
```
stop

停止監聽DOM insert、modify和remove事件。
```
 translateGO.stop();
```
reload

重新載入翻譯資料，如果沒有傳入翻譯資料，則自動載入當前 window.__translateGO_開頭的翻譯資料
```
 translateGO.reload({key:{""zh-TW"":"text"}});
```

getText

取得當前語系的文字。

 translateGO.getText('Test');//return '測試';

getTextByKey

依Key取得當前語系的文字。

 translateGO.getTextByKey('key');//return '測試';

getLanguage

取得當前語系。

 translateGO.getLanguage();//return 'zh-TW';

getNonTranslateText

取得無法翻譯的資料，搭配快速建立翻譯資源檔，快速建立翻譯檔。
```
 translateGO.getNonTranslateText();//return {"zh-TW":{"key":"text"}};
```

Translate Toolbar功能介紹

檔名&變數名稱前綴

合併下載 的檔案名稱和變數名稱
載入翻譯資源

點擊跳出視窗，貼上你下載的翻譯JS檔的內容並載入
載入當前翻譯資源

自動載入當前 window.__translateGO_開頭的翻譯資料
合併下載JS

將所有翻譯群組合併成一個 *.js 檔案並下載
合併下載TS

將所有翻譯群組合併成一個 *.ts 檔案並下載
檢查

檢查當前所有群組內是否有重複的Key
新增語系

為目前所有群組的翻譯資料新增語系
新增群組

將翻譯資料依類型設定群組，增加可維護性與檔案大小的切割
切換群組

將該組翻譯資料設定到指定群組裡
下載JS

將當前群組的翻譯資料，獨立下載成 檔名&變數名稱前綴 + 群組名稱.js 檔案
下載TS

將當前群組的翻譯資料，獨立下載成 檔名&變數名稱前綴 + 群組名稱.ts 檔案
刪除

刪除整個群組
新增翻譯

在當前群組下，新增一組翻譯資料
清除翻譯

清除當前群組所有翻譯資料
表格欄位上的列出

將該欄的所以文字以換行隔開，輸出在上面的 textarea
表格欄位上的載入

將該欄的 textarea 的內容，依順序更新到每個翻譯資料

相容性：

目前translate-go支持到IE9
translate-toolbar只支持chrome

其他：

就算是TS環境，也務必下載JS檔留存
設定不需要翻譯的區塊

//不做翻譯區塊
```
<div notTranslate>
	<div>
		...
	</div>
</div>
```

指定翻譯Key

<div>TestKey</div>
// or
<div translateKey="TestKey"></div>

placeholder指定翻譯Key

<input placeholder="TestKey">
// or
<input placeholderTranslateKey="TestKey">

保留部分文字不翻譯

原文

 Clare 您確定要這麼刪除 Steven 好友嗎?
 刪除 Steven 好友失敗!

翻譯資源

 // 利用 (.+) 保留中間的文字

 // en
 Deleting(.+)friends failed!
 (.+)Are you sure you want to delete(.+)friends like this?
 // zh_TW
 刪除(.+)好友失敗!
 (.+)您確定要這麼刪除(.+)好友嗎?

Cheap and reliable Node.js hosting starts at $3/month, and $1/month static HTML hosting

babyblue94520 / translate-go

Programming Languages

Labels

Projects that are alternatives of or similar to translate-go