Scratch 3.0原始碼 之 多語言實現
阿新 • • 發佈:2018-12-23
文章目錄
Scratch 3.0中各類顯示文字預設是英文,如果不支援自己的語言,或者自己新開發的模組中增加多語言支援,則需要用到本文內容,Scratch 3.0中使用react-intl
實現方式
舉個例子說明該元件的語法,如果不支援多語言的版本的程式的頁面預設是下面的寫法,如果要修改為支援多語言,則需要執行如下三步:
- 頁面檔案:對頁面檔案的顯示內容修改為變數
- 配置檔案:將變數和對應的值以鍵值對形式,新增到Json檔案
- 建立關聯:將配置檔案跟到頁面檔案繫結
初始版本
var React = require('react'); var HitchhikersGalaxyGuide = React.createClass({ render: function () { return ( <p className=”box-content”> 文字內容。 </p> ); } });
多語言版本
1. 頁面檔案
var React = require('react'); var FormattedMessage = require('react-intl').FormattedMessage; var HitchhikersGalaxyGuide = React.createClass({ render: function () { return ( <p className=”box-content”> <FormattedMessage id: ’info.msgContentDemo’ /> </p> ); } });
2. 配置檔案
在翻譯的模版檔案中新增如下Key-Value內容,其中Key需要跟頁面中新增的內容完全一致(本例為info.msgContentDemo),模版檔名為“l10n.json”(首字母為小寫L),其中檔案可以根據某個頁面私有和所有頁面公有,兩種不同方式放在不同位置:
- /src/l10n.json,所有頁面都可以呼叫
- /src/views/[頁面檔名]/l10n.json,只有該檔案可以使用
如果頁面檔案robot.jsx,且配置檔案只是為該頁面檔案私有,這配置檔案將和該頁面檔案放在同一個目錄,即:/src/views/robot/l10n.json。
{
"info.msgContentDemo": "文字內容。",
}
3. 建立關聯
使用Transifex 工具對頁面檔案和配置檔案進行繫結,如果已經安裝該工具則可以直接通過命令列進行繫結,以前面robot.jsx舉例,命令列輸入:
tx set --source -r scratch-website.robot-l10njson -l en --type KEYVALUEJSON src/views/robot/l10n.json
但如果沒有安裝Transifex也沒關係,可以直接修改另一個配置檔案,因為繫結的結果也就是在該配置檔案中增加一行。
[scratch-website.robot-l10njson]
source_file = src/views/robot/l10n.json
source_lang = en
type = KEYVALUEJSON
語法說明
對於文字中有HTML的情況,最好將HTML寫在頁面檔案裡,而不是配置檔案中,舉例說明:
案例1
帶HTML標籤寫法
// 配置檔案: l10n.json
"info.timeQuote": "<span class='some-class'>時間</span>,是一切財富中最寶貴的財富。"
// 頁面檔案 .jsx:
<FormattedHTMLMessage id='info.timeQuote'/>
建議寫法
// 配置檔案: l10n.json
"info.timeQuote": "時間",
"info.timeQuotedesc" : "{timeQuoteName},是一切財富中最寶貴的財富。"
//頁面檔案 .jsx:
<FormattedMessage
id="info.timeQuotedesc"
values={{
timeQuoteName: (
<span className='some-class'>
<FormattedMessage id="info.timeQuote" />
</span>
)
}}
/>
案例2
帶超連結寫法
// 配置檔案: l10n.json
"info.suoxdLink": "返回部落格主頁: <a href='https://blog.csdn.net/suoxd123'>suoxd123</a>"
//頁面檔案 .jsx:
<FormattedHTMLMessage id="info.suoxdLink"/>
建議寫法
// 配置檔案: l10n.json
"info.suoxdLinkText": "返回部落格主頁:{suoxdLink}"
//頁面檔案 .jsx:
<FormattedMessage
id='info.suoxdLinkText'
values={{
suoxdLink: (
<a href='https://blog.csdn.net/suoxd123'>
suoxd123
</a>
)
}}
/>
參考自:https://github.com/LLK/scratch-www/wiki/Localization-Guide
歡迎感興趣的朋友,加QQ群一起交流學習。