替换thingsboard的图标、logo的方法

时间:2024-04-05 17:04:02

参考教程:https://my.oschina.net/sukf/blog/3108354

一、按如下尺寸设计新的LOGO
a. logo.png ----- 128x128,
b. thingsboard.ico ----- 320x320
c. logo_title_white.svg ----- 1536x318 SVG 32-bit
(这个比例亲测后发现有问题,后来改为153*36,但是存在logo偏移的情况,需要另外修改scss文件内容,文章末尾有补充说明)
d. logo_white.svg ----- 320x320 SVG 32-bit

分别替换到以下路径
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

二、修改内容

1.分别修改文件 thingsboard-2.4\ui\webpack.config.prod.js 和 webpack.config.dev.js两个文件
搜索 HtmlWebpackPlugin 找到下图的位置
例如:
原标题:Thingsboard >>> 改为 >>> 新标题:工蜂物联
替换thingsboard的图标、logo的方法
2.修改文件 thingsboard-2.4\ui\src\app\app.run.js
搜素关键字pageTitle找到下图的位置
替换thingsboard的图标、logo的方法
例如:
原标题:Thingsboard >>> 改为 >>> 新标题:工蜂物联
替换thingsboard的图标、logo的方法
3.重命名thingsboard.ico (图省事也可以沿用原文件名 只要覆盖图片文件即可)

原文件名:thingsboard.ico >>> 改为 >>> 新文件名:hsiot.ico

1)重命名文件 thingsboard.ico >>> hsiot.ico

thingsboard-2.4\ui\src\thingsboard.ico

2)修改文件内容 thingsboard.ico >>> hsiot.ico
替换thingsboard的图标、logo的方法

三、 重新打包

mvn clean package

(这个过程很慢,如果要反复尝试,可以换成UI热编译,详情参考热编译配置的文章
https://blog.csdn.net/liuli283/article/details/93479955

补充情况:
1.原教程中第六步替换thingsboard.jar
thingsboard\lib\thingsboard.jar(这一步没有看懂,没做也不影响效果,可以忽略)
2.由于在实际修改的时候发现logo_title_white.svg按1536x318比例无法正常显示,改为153*36,但是存在logo偏移的情况,因此附上样式修改scss的步骤。
(1)全局搜索tb-logo-title
找到这三个文件(可以只修改ui\src\app\layout\home.scss但是需要重新编译和清理缓存否则可能会有问题,最好直接手动修改三个文件):
替换thingsboard的图标、logo的方法
(2)按实际需要修改logo偏移样式。(如果以下参考css代码的显示效果不符合实际需要,可以在浏览器F12,预调整样式获取合适的css代码再作修改)替换thingsboard的图标、logo的方法
本人成功调整偏移的代码如下(左侧是修改前右侧是修改后):
替换thingsboard的图标、logo的方法
md-icon.tb-logo-title{
width:600px;
height:40px;
margin-left:-180px;
}

最后推荐svg的在线编辑网页:

http://tools.jb51.net/static/api/svg/index.html(最为规范,兼容性最好)
https://www.zhangxinxu.com/sp/svg/