scratch3.0自定义logo
2019-09-11 23:25:17长沙做网站林大大次
本文将把scratch3.0的logo替换为我自己的logo。
最终效果图：
scratch3.0是基于react的一个项目。整个项目就像一颗大树，顺着入口进去总能找到你要找的地方。
本次我们需要替换的是logo，那么我们就先找到logo这个dom。项目入口文件是src/playground/index.jsx。这个文件里面导入了render-gui.jsx，在render-gui.jsx我们就可以看到整个项目了，如下图所示：
后面所有的二次开发几乎所有都需要从这个地方进去慢慢展开。如果进入url是默认的话，那么这个simulateScratchDesktop的bool值则为false，这里的三目最终结果就是后面的那部分了。
通过WrappedGui我们可以找到src/containers/gui.jsx文件。gui.jsx文件是在containers目录下，那么这个containers是什么呢？顾名思义，containers就是一些容器，正是这些一个个容器融合在一起最终组成了整个scratch项目。而这里的gui.jsx正是那个最大的容器，它包含了其他的容器。
我们进入gui.jsx中会发现属于样式的代码就那么几行，其中引入了GUIComponent这个component（组件），而这个组件是在src/components/gui/gui.jsx这里。那么containers下面的容器和components下面的组件它们有什么关系呢？纵观整个scratch项目会发现，components下面是抽象出来的一个个的组件供容器引用，而容器给组件提供了数据。
进入src/components/gui/gui.jsx文件，可以看到很多样式，仔细看就会发现它分别对应了界面的一部分，而其中的MenuBar则对应了顶部的这个菜单栏。代码如下：
我们进入到MenuBar这个dom，可以找到src/components/menu-bar.jsx，说明这个MenuBar也是个组件，要用的话需要传相应的参数进去。我们可以看到上图gui在引用的时候确实也传了很多参数进去。
现在我们看到menu-bar的样式，下面是部分截图：
通过分析样式我们可以知道上图的324行-332行就是描述的我们项目左上角的logo。那么接下来就需要修改它了。既然找到它那么就有无数种办法来修改它，这里只说两种方式：
第一种是暴力一点儿的方式，我们把我们的logo文件先拷贝到src/components/menu-bar/目录下面。然后在menu-bar.jsx文件引入这个文件，如下图：
然后在333行引入，如下图：
开发环境的话保存后我们即可看到效果图。
第二种方式优雅一点儿，333行代码本来src=this.props.logo，从这个代码可以发现是从传入menu-bar这个组件的参数中获取了logo这个属性，也就是说谁引入menu-bar谁就可以定义这个logo，这确实是一种低耦合的方式。前面我们说到gui引入menu-bar传入了很多参数，其中就有logo，但是这个logo在gui里也好像没初始化。menu-bar它设置了允许传入了哪些参数，我们回过头再看看menu-bar对传入参数的要求，在menu-bar的699行-758行规定了传入参数及其类型，在menu-bar的760行-763设置了一些默认参数，可以看到这里就有logo的默认参数，是scratchLogo，而scratchLogo是在menu-bar引入一个svg，所以我们可以替换这个svg或者修改这个默认值，最终也可以替换 logo
。
废话有点儿多了，一个简单的替换logo居然写了这么多没用的，抱拳！
【注】严微转载林大大的博客
最终效果图：
scratch3.0是基于react的一个项目。整个项目就像一颗大树，顺着入口进去总能找到你要找的地方。
本次我们需要替换的是logo，那么我们就先找到logo这个dom。项目入口文件是src/playground/index.jsx。这个文件里面导入了render-gui.jsx，在render-gui.jsx我们就可以看到整个项目了，如下图所示：
后面所有的二次开发几乎所有都需要从这个地方进去慢慢展开。如果进入url是默认的话，那么这个simulateScratchDesktop的bool值则为false，这里的三目最终结果就是后面的那部分了。
通过WrappedGui我们可以找到src/containers/gui.jsx文件。gui.jsx文件是在containers目录下，那么这个containers是什么呢？顾名思义，containers就是一些容器，正是这些一个个容器融合在一起最终组成了整个scratch项目。而这里的gui.jsx正是那个最大的容器，它包含了其他的容器。
我们进入gui.jsx中会发现属于样式的代码就那么几行，其中引入了GUIComponent这个component（组件），而这个组件是在src/components/gui/gui.jsx这里。那么containers下面的容器和components下面的组件它们有什么关系呢？纵观整个scratch项目会发现，components下面是抽象出来的一个个的组件供容器引用，而容器给组件提供了数据。
进入src/components/gui/gui.jsx文件，可以看到很多样式，仔细看就会发现它分别对应了界面的一部分，而其中的MenuBar则对应了顶部的这个菜单栏。代码如下：
我们进入到MenuBar这个dom，可以找到src/components/menu-bar.jsx，说明这个MenuBar也是个组件，要用的话需要传相应的参数进去。我们可以看到上图gui在引用的时候确实也传了很多参数进去。
现在我们看到menu-bar的样式，下面是部分截图：
通过分析样式我们可以知道上图的324行-332行就是描述的我们项目左上角的logo。那么接下来就需要修改它了。既然找到它那么就有无数种办法来修改它，这里只说两种方式：
第一种是暴力一点儿的方式，我们把我们的logo文件先拷贝到src/components/menu-bar/目录下面。然后在menu-bar.jsx文件引入这个文件，如下图：
然后在333行引入，如下图：
开发环境的话保存后我们即可看到效果图。
第二种方式优雅一点儿，333行代码本来src=this.props.logo，从这个代码可以发现是从传入menu-bar这个组件的参数中获取了logo这个属性，也就是说谁引入menu-bar谁就可以定义这个logo，这确实是一种低耦合的方式。前面我们说到gui引入menu-bar传入了很多参数，其中就有logo，但是这个logo在gui里也好像没初始化。menu-bar它设置了允许传入了哪些参数，我们回过头再看看menu-bar对传入参数的要求，在menu-bar的699行-758行规定了传入参数及其类型，在menu-bar的760行-763设置了一些默认参数，可以看到这里就有logo的默认参数，是scratchLogo，而scratchLogo是在menu-bar引入一个svg，所以我们可以替换这个svg或者修改这个默认值，最终也可以替换 logo
。
废话有点儿多了，一个简单的替换logo居然写了这么多没用的，抱拳！
【注】严微转载林大大的博客
