【scratch二次开发教程 第3章】在scratch3.0中自定义品牌logo


作者:管理员
分类:scratch 二开
发布时间:2019-12-14 11:18:24
热度:1253

					【scratch二次开发教程 第3章】在scratch3.0中自定义品牌logo

写在前面
该系列文章是为具有开发能力的朋友写作的,目的是帮助他们在scratch 3.0的基础上开发一套完整的集scratch 3.0编程工具、用户社区和作品云端存储及、品牌集成于一体的scratch编程平台。如果您不是开发者,但想要拥有自己的教育平台和品牌,也欢迎学习交流和洽谈合作。
所以如果您是想学习scratch少儿编程课程,那请忽略该系列的文章。

前言
无论我们是作为线下或线上的少儿编程培训机构或平台提供方,肯定想拥有自己教育品牌,并且将其集成到我们的平台中,以达到品牌宣传的效果。现在比较流行的像网易卡搭那些平台就是在scratch开源平台的基础上,植入自己的品牌logo的。

本节课我们就一起来为我们的平台定制自己的品牌logo到scratch-gui项目中。

开始开发
在上节课我们运行起来的项目中,看到顶部menu菜单的左上角有一个scratch的logo:




我们准备把它换掉,换成我们自己的品牌logo,shala-logo.svg:


顺便介绍一下,这只小白猫是笔者的小主,她叫馬沙拉,沙拉少儿编程也是取自她的名字。另外她还有个好姐妹蓝猫馬沙包,后面有机会好好给大家介绍一下她俩。



前面我们说src中的components是是负责UI组件的样式的,很显然我们的logo的样式的设置应该就在这里。

我们在components中发现有如下两个目录:



看名字就知道它们就是与我们的menu菜单样式相关。




挨个打开看看:



第一个是css样式文件,我们不管。 打开menu.jsx,这里面定义了MenuComponent组件,样式是一个< ul >,很可能是跟menu的下拉菜单相关,不是我们想要的,不管。
再打开第二个目录: 


咦!我们看到了一个文件名为scratch-logo.svg,这不就是我们要找的logo文件么?打开看看,确实是它!



好,我们再来项目中搜索一下哪里用到这个logo文件。


嗯!只有两个地方用到了它。
看文件名字也可以猜出,第一个是用在了舞台的头部,第二个是用在了菜单栏里(就是我们前面看到的那里)。


现在我们先将我们自己的logo文件加入项目中,放到与scratch-logo.svg相同的目录中。



然后分别替换stage-header.jsx和menu-bar.jsx中的引用。






重新编译项目,刷新浏览器,看到我们的logo成功被替换了:





这样,我们就完成的logo的自定义。
以后使用我们平台的孩子们、第三方机构或是学校都会看到我们醒目而惹眼的品牌logo啦!通过这样的线上线下传播,相信会大大提升我们的品牌知名度,达到独树一帜的效果!