文章目錄

• 實現方式
• 初始版本
• 多語言版本
• 1. 頁面檔案
• 2. 配置檔案
• 3. 建立關聯
• 語法說明
• 案例1
• 帶HTML標籤寫法
• 建議寫法
• 案例2
• 帶超連結寫法
• 建議寫法

  Scratch 3.0中各類顯示文字預設是英文，如果不支援自己的語言，或者自己新開發的模組中增加多語言支援，則需要用到本文內容，Scratch 3.0中使用react-intl

實現方式

  舉個例子說明該元件的語法，如果不支援多語言的版本的程式的頁面預設是下面的寫法，如果要修改為支援多語言，則需要執行如下三步：

1. 頁面檔案：對頁面檔案的顯示內容修改為變數
2. 配置檔案：將變數和對應的值以鍵值對形式，新增到Json檔案
3. 建立關聯：將配置檔案跟到頁面檔案繫結

初始版本

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群一起交流學習。