Table of contents
Hello World
Simply change the logo and it will be the same as Hello world. By implementing this, you can basically grasp the ins and outs of this code.
desired effect
As shown below:
First prepare a logo image (svg or png with transparent background is more recommended), here is mine
Let’s look at the source first
Source code structureAs shown below:
Changing the logo is obviously UI , so locate it in the components directory.
The logo is located in the menu bar. Let’s take a look at the menu-bar.jsx file. At about line 330:
Logo comes from the attribute: this.props.logo. What is the value of this attribute? It can be passed in from the upper layer, but a default value is also specified in menu-bar.jsx, as follows:
scratchLogo is the resource file of the image, which is imported at about line 73:
OK, it’s easy to find the location to change.
The most crude method
Copy our logo image file to this directory, and modify the imported resource file name, as shown below:
If your project is running, go back to browser, you can see the effect.
A more harmonious approach
When doing secondary development, it is still recommended to concentrate our changes as much as possible in one place. If we change a little bit here and there a little bit here and there, we will make subsequent maintenance inconvenient.
Since this.props.logo is the attribute value passed in from the outside world, a better way would be to change it somewhere in the outer layer. For example, it can be modified in render-gui.jsx of the playground.
As shown below:
The effect is the same as the previous method.
If you are sharp-eyed, you should have noticed that there is an onClickLogo attribute on lines 12 and 84. This attribute specifies the behavior of clicking on the logo. The default is to jump to the scratch official website and modify it yourself.
Let’s stop here first today, bye~