Scratch 3.0源码之多语言实现_scratch3.0源码_放羊郎的博客

相关文章推荐

聪明伶俐的李子 · 从react-routerv5源码探析前端路 ...· 1 年前 ·

温文尔雅的大白菜 · javascript - ...· 1 年前 ·

谈吐大方的猕猴桃 · Generative AI Models ...· 1 年前 ·

发怒的打火机 · 数据处理 | ...· 1 年前 ·

另类的电脑桌 · 请问如何使用ggplot2画出平滑曲线（不是 ...· 1 年前 ·

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

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

页面文件：对页面文件的显示内容修改为变量
配置文件：将变量和对应的值以键值对形式，添加到Json文件
建立关联：将配置文件跟到页面文件绑定

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": "返回博客主页： <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
参考自：https://github.com/LLK/scratch-www/wiki/Localization-Guide 
欢迎感兴趣的朋友，加QQ群一起交流学习。
 
                    文章目录实现方式初始版本多语言版本1. 页面文件2. 配置文件3. 建立关联语法说明案例1带HTML标签写法建议写法案例2带超链接写法建议写法  Scratch 3.0中各类显示文本默认是英文，如果不支持自己的语言，或者自己新开发的模块中增加多语言支持，则需要用到本文内容，Scratch 3.0中使用react-intl组件进行字符格式化的，这个组件是雅虎团队提供的。实现方式  举个例子说...
				scratch3.0趣味小游戏合集，良心资料，适合小朋友自学。新颖、有趣的游戏制作可以激发孩子的学习兴趣。本人在授课的过程中收集整理了50案例！！都能正常测试，内容包含三国、丧尸生存、丧尸生存2、击败倭寇、击退大作战、厉害了我的国、取款机、口算、守株待兔、密室探险、密室逃脱1.0、小小消防员、小熊挖黄金、小猫超级玛丽、小猫非凡的大冒险、小蝌蚪找妈妈、小马过河、小黄人吃豆豆、忍者 无敌版、想入飞飞、我的世界、扔炸弹、挖矿历险记、星际移民、未来图书馆-知识迷宫、母亲节、水果忍者、潜艇大战、火柴人大冒险、火箭赛车（完整结局版）、特斯拉与爱迪生、猫抓老鼠、王者荣耀 钟馗VS孙悟空、瓢虫吃水果、生化危机、看我七十二变、石头剪刀纸、碗豆战机、神秘的虫洞、经典坦克大战、群英战曹、贪吃蛇、贴春联，看烟花、赛车大战、跳一跳正式版、迷你战争、送给妈妈的礼物、通过这条线、里约大冒险、马里奥