Scratch 3.0源码 之 多语言实现

---

  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.youkuaiyun.com/suoxd123'>suoxd123</a>"

//页面文件 .jsx:
<FormattedHTMLMessage id="info.suoxdLink"/>

建议写法

// 配置文件： l10n.json
"info.suoxdLinkText": "返回博客主页：{suoxdLink}"

//页面文件 .jsx:
<FormattedMessage 
    id='info.suoxdLinkText'
    values={{
        suoxdLink: (
            <a href='https://blog.youkuaiyun.com/suoxd123'>
                suoxd123
            </a>
        )
    }}
/>

参考自：https://github.com/LLK/scratch-www/wiki/Localization-Guide

---

欢迎感兴趣的朋友，加QQ群一起交流学习。