添加链接
link管理
链接快照平台
  • 输入网页链接,自动生成快照
  • 标签化管理网页链接
相关文章推荐
从容的木耳  ·  sdrangel@groups.io | ...·  5 月前    · 
心软的小虾米  ·  France in drone ...·  7 月前    · 
老实的香槟  ·  mongosqld - BI Connector·  7 月前    · 

Scratch 3.0中各类显示文本默认是英文,如果不支持自己的语言,或者自己新开发的模块中增加多语言支持,则需要用到本文内容,Scratch 3.0中使用react-intl组件进行字符格式化的,这个组件是雅虎团队提供的。

举个例子说明该组件的语法,如果不支持多语言的版本的程序的页面默认是下面的写法,如果要修改为支持多语言,则需要执行如下三步:

  1. 页面文件:对页面文件的显示内容修改为变量
  2. 配置文件:将变量和对应的值以键值对形式,添加到Json文件
  3. 建立关联:将配置文件跟到页面文件绑定
  4. var React = require('react');
    var HitchhikersGalaxyGuide = React.createClass({
        render: function () {
            return (
                <p className=”box-content”>
                    文本内容。
    

    多语言版本

    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’ />
    

    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写在页面文件里,而不是配置文件中,举例说明:

    带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>
    

    带超链接写法

    // 配置文件: l10n.json
    "info.suoxdLink": "返回博客主页: 
    //页面文件 .jsx:
    <FormattedHTMLMessage id="info.suoxdLink"/>
    
    // 配置文件: l10n.json
    "info.suoxdLinkText": "返回博客主页:{suoxdLink}"
    //页面文件 .jsx:
    <FormattedMessage 
        id='info.suoxdLinkText'
        values={{
            suoxdLink: (
                    suoxd123