Angular 官方提供的套件以及教學:Angular Internalization (i18n)
文章裡一大堆,簡單整理如下:
- 安裝:ng add @angular/localize
- 這個步驟會幫你在 polyfills.ts 裡加入必要的 import
- 使用,這部份分為 HTML 跟程式
- HTML,在需要多國語言的標籤加入 i18n 的屬性
- <span i18n>Hello world</span>
- <span i18n=“@@span_hello”>Hello world</span> ,用 i18n=“@@span_hello” 的好處是,產出的翻譯檔裡不會是一個隨意的數字,而是一個對開發者來說比較明確的名稱。
- <input i18n-placeholder> 這個是有些屬性本身需要多國語言的,就在前面加上 “i18n-“
- 程式,字串前方加上 $localize ,並且改用 back quote,例如:$localize`hello world`
- HTML,在需要多國語言的標籤加入 i18n 的屬性
- 萃取,用 ng xi18n –output-path src/i18n 就可以把 HTML 裡有標 i18n 的字串萃取到 src/i18n/messages.xlf 裡
- 翻譯,先把上個步驟取得的 messages.xlf 複製為 messages.zh_Hant.xlf ,再去編輯。這邊提供一個簡易的網頁工具 – tiny-translator,在處理上會方便很多。開啟以後,要先建立專案,然後上傳 .xlf 檔案,接著就可以進行翻譯了。翻譯好,再下載下來即可。
- 合併,程式開發中難免會有增刪,每次用 xi18n 基本上都是重新萃取一次,等於是又要再搞一次合併的功夫,這太累。tiny-translator 的作者有提供另外一個工具 – xliffmerge
- 安裝:npm install -g ngx-i18nsupport
- 在 package.json 的 scripts 裡加入 “extract-i18n”: “ng xi18n –output-path src/i18n && xliffmerge –profile xliffmerge.json en de” ,裡面的 en, de 等 locale 請依照自己的需求作調整
- 新增 xliffmerge.json ,這個檔案請參考後面。
- 使用 npm run extract-i18n 就可以自動萃取字串並且作合併了。
- 專案的建置,主要是修改 angular.json,有三個部分:
- projects / your_project_name 加入 “i18n”: {“sourceLocale”: “en”, “locales”: {“de”: “src/i18n/messages.de.xlf”}}
- projects / your_project_name / architect / build / configurations 裡加入 “de”: {“localize”: [“de”]}
- projects / your_project_name / architect / serve / configurations 裡加入 “de”: {“browserTarget”: “ng-hosting:build:de”}
- 要執行 ng build / ng serve 時,就可以用
- ng build –configuration=production,de
- ng serve –configuration=de
- 補充一個我覺得很重要的部分,就是一個語言要建置一次,所以一般的佈署會是這樣的,建置好 zh ,放在 zh/ 目錄下,建置好 de,放在 de/ 目錄下,然後在 nginx/apache 的設定裡去依照 header 的 language 去導向到對應的目錄去。這篇 Deploying an i18n Angular app with angular-cli 的後面有教怎麼去設定 apache / nginx。
看到這邊,你可能會想,那程式裡標上 $localize 的字串呢?嗯,ng xi18n 並不會把這些字串萃取出來 (issue),所以這部份得自己手動處理 😣
P.S. 用 ngx-i18nsupport 的 tooling 可以把上面講的簡化掉,像是加入 npm package、在 package.json 加入 extract-i18n 、在 angular.json 加入設定等等,一次就搞定了,我是已經用了才看到這個 tooling ,有點相見恨晚。
// xliffmerge.json { "xliffmergeOptions": { "srcDir": "src/i18n", "genDir": "src/i18n", "i18nFile": "messages.xlf", "i18nBaseFile": "messages", "i18nFormat": "xlf", "encoding": "UTF-8", "defaultLanguage": "en", "languages": ["en", "de"], "removeUnusedIds": true, "supportNgxTranslate": false, "ngxTranslateExtractionPattern": "@@|ngx-translate", "useSourceAsTarget": true, "targetPraefix": "", "targetSuffix": "", "beautifyOutput": false, "preserveOrder": true, "allowIdChange": false, "autotranslate": false, "apikey": "", "apikeyfile": "", "verbose": false, "quiet": false } }
沒有留言:
張貼留言