文章目录

实现方式
- 初始版本
- 多语言版本
- - 1. 页面文件
  - 2. 配置文件
  - 3. 建立关联
语法说明
- 案例1
- - 带HTML标签写法
  - 建议写法
- 案例2
- - 带超链接写法
  - 建议写法

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”><FormattedMessageid: ’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群一起交流学习。

Scratch 3.0源码之多语言实现相关推荐

【易语言模块】MP3信息标签解析V1.0[源码]分享
最近下载了许多MP3歌曲,好多歌曲的信息不是乱码就是空白,在车载播放器中显示不正常,一个个修改起来很麻烦,就想做一个简便的信息修改器. 在网上找了好久,没有特别合适的mp3标签信息的模块,有一个m ...
《MapReduce 2.0源码分析与编程实战》一第1章 HBase介绍
本节书摘来异步社区<MapReduce 2.0源码分析与编程实战>一书中的第1章,作者: 王晓华责编: 陈冀康,更多章节内容可以访问云栖社区"异步社区"公众号查看. ...
c语言即时通讯软件源码,即时通讯软件源码-基于c语言即时通讯软件代码实现
我不知道哪种语言无关紧要.开源,我不知道该用什么. 即时通讯软件源代码为JAVA语言对于即时通讯软件源代码最好是用C语言编写的,想学一下,感谢您即时通讯软件有什么. includewinscock2 ...
从 Android 6.0 源码的角度剖析 Binder 工作原理 | CSDN 博文精选
在从Android 6.0源码的角度剖析Activity的启动过程一文(https://blog.csdn.net/AndrExpert/article/details/81488503)中,我们了解 ...
Android4.0源码目录结构详解
Android4.0源码目录结构详解 Android4.0与2.1目录差不多 alsa这块,注意external/tinyalsa下有: include/tinyalsa/asoundlib.h mi ...
SRS4.0源码分析-CMake
本文采用的 SRS 版本是 4.0-b8 , 下载地址:github <SRS4.0源码分析-调试环境搭建> 讲了 SRS 在 Clion 里面的调试,本文主要讲解 srs-4.0-b8\ ...
SRS4.0源码分析-序言
<SRS4.0源码分析>专栏,会从 configure(配置),makefile(编译规则),main (入口函数), 带你一步一步了解 SRS 的主干代码逻辑. 这里分享一个本人阅读开源 ...
Tomcat7.0源码分析——请求原理分析（上）
前言谈起Tomcat的诞生,最早可以追溯到1995年.近20年来,Tomcat始终是使用最广泛的Web服务器,由于其使用Java语言开发,所以广为Java程序员所熟悉.很多早期的J2EE项目,由程序 ...
Android 8.0学习（32）---Android 8.0源码目录结构详解
Android 8.0源码目录结构详解 android的移植按如下流程: (1)android linux 内核的普通驱动移植,让内核可以在目标平台上运行起来. (2)正确挂载文件系统 ...

Scratch 3.0源码之多语言实现

文章目录

实现方式

初始版本

多语言版本

1. 页面文件

2. 配置文件

3. 建立关联

语法说明

案例1

带HTML标签写法

建议写法

案例2

带超链接写法

建议写法

Scratch 3.0源码之多语言实现相关推荐

最新文章

热门文章

Scratch 3.0源码 之 多语言实现

文章目录

实现方式

初始版本

多语言版本

1. 页面文件

2. 配置文件

3. 建立关联

语法说明

案例1

带HTML标签写法

建议写法

案例2

带超链接写法

建议写法

Scratch 3.0源码 之 多语言实现相关推荐

最新文章

热门文章

Scratch 3.0源码之多语言实现

Scratch 3.0源码之多语言实现相关推荐