当前位置：网站首页>[thingsboard] how to replace the homepage logo

[thingsboard] how to replace the homepage logo

2022-07-05 04:12:00 【Rabbit Xiaoyun】

Reference tutorial ：https://my.oschina.net/sukf/blog/3108354

One 、 Design a new... According to the following dimensions LOGO
a. logo.png ----- 128x128,
b. thingsboard.ico ----- 320x320
c. logo_title_white.svg ----- 1536x318 SVG 32-bit
（ After the personal test of this proportion, it is found that there is a problem , Later changed to 153*36, But exist logo The case of offset , Additional modifications are required scss The contents of the document , There are supplementary notes at the end of the article ）
d. logo_white.svg ----- 320x320 SVG 32-bit

Replace them with the following paths
a. thingsboard-2.4\img\logo.png
b. thingsboard-2.4\ui\src\thingsboard.ico
c. thingsboard-2.4\ui\src\svg\logo_title_white.svg
d. thingsboard-2.4\ui\src\svg\logo_white.svg

Two 、 Modify the content

1. Modify the file separately thingsboard-2.4\ui\webpack.config.prod.js and webpack.config.dev.js Two documents
Search for HtmlWebpackPlugin Find the location in the figure below
for example ：
The original title ：Thingsboard >>> Change it to >>> new title ：XXX
Insert picture description here
2. Modify file thingsboard-2.4\ui\src\app\app.run.js
Search element keywords pageTitle Find the location in the figure below

for example ：
The original title ：Thingsboard >>> Change it to >>> new title ：XXXX

3. rename thingsboard.ico （ The original file name can also be used to save trouble Just overwrite the picture file ）

original file name ：thingsboard.ico >>> Change it to >>> New file name ：hsiot.ico

1） Rename file thingsboard.ico >>> hsiot.ico

thingsboard-2.4\ui\src\thingsboard.ico

2） Modify file content thingsboard.ico >>> hsiot.ico
Insert picture description here

3、 ... and 、 REPACK

mvn clean package

（ It's a slow process , If you want to try again and again , Can be replaced by UI Hot compilation , For details, refer to the article on hot compilation configuration
https://blog.csdn.net/liuli283/article/details/93479955）

Supplementary information ：
1. Step 6 of the original tutorial replaces thingsboard.jar
thingsboard\lib\thingsboard.jar（ I didn't understand this step , Not doing it will not affect the effect , You can ignore ）
2. Because it is found that logo_title_white.svg Press 1536x318 The scale cannot be displayed normally , Change it to 153*36, But exist logo The case of offset , Therefore, the style modification is attached scss Steps for .
（1） Global search tb-logo-title
Find these three files （ You can just modify ui\src\app\layout\home.scss But you need to recompile and clean up the cache, otherwise there may be problems , It's best to manually modify three files directly ）：
Insert picture description here
（2） Modify as needed logo Offset style .（ If the following reference css The display effect of the code does not meet the actual needs , It can be found in the browser F12, Pre adjust the style to get the right css Modify the code again ）
I successfully adjusted the offset code as follows （ On the left is before modification and on the right is after modification ）：
Insert picture description here
md-icon.tb-logo-title{
width:600px;
height:40px;
margin-left:-180px;
}