当前位置:网站首页>【thingsboard】替换首页logo的方法
【thingsboard】替换首页logo的方法
2022-07-05 04:06:00 【兔小昀】
参考教程: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 >>> 改为 >>> 新标题:XXX
2.修改文件 thingsboard-2.4\ui\src\app\app.run.js
搜素关键字pageTitle找到下图的位置
例如:
原标题:Thingsboard >>> 改为 >>> 新标题:XXXX
3.重命名thingsboard.ico (图省事也可以沿用原文件名 只要覆盖图片文件即可)
原文件名:thingsboard.ico >>> 改为 >>> 新文件名:hsiot.ico
1)重命名文件 thingsboard.ico >>> hsiot.ico
thingsboard-2.4\ui\src\thingsboard.ico
2)修改文件内容 thingsboard.ico >>> hsiot.ico
三、 重新打包
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但是需要重新编译和清理缓存否则可能会有问题,最好直接手动修改三个文件):
(2)按实际需要修改logo偏移样式。(如果以下参考css代码的显示效果不符合实际需要,可以在浏览器F12,预调整样式获取合适的css代码再作修改)
本人成功调整偏移的代码如下(左侧是修改前右侧是修改后):
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/
边栏推荐
- Is "golden nine and silver ten" the best time to find a job? Not necessarily
- Seven join join queries of MySQL
- error Couldn‘t find a package. JSON file in "your path“
- 10种寻址方式之间的区别
- “金九银十”是找工作的最佳时期吗?那倒未必
- Deflocculant aminoiodotide eye drops
- Scheduling system of kubernetes cluster
- CTF stegano practice stegano 9
- Differences among 10 addressing modes
- Summary of scene design
猜你喜欢
我就一写代码的,王总整天和我谈格局...
UI automation test farewell to manual download of browser driver
error Couldn‘t find a package. JSON file in "your path“
How is the entered query SQL statement executed?
ActiveReportsJS 3.1 VS ActiveReportsJS 3.0
How to realize real-time audio and video chat function
C language course setting: cinema ticket selling management system
[wp]bmzclub writeup of several questions
【虚幻引擎UE】打包报错出现!FindPin错误的解决办法
UI自動化測試從此告別手動下載瀏覽器驅動
随机推荐
【虚幻引擎UE】实现测绘三脚架展开动画制作
Kwai, Tiktok, video number, battle content payment
一文带你了解BI的前世今身与企业数字化转型的关系
[wp][introduction] brush weak type questions
Threejs Internet of things, 3D visualization of farms (I)
Why is there a reincarnation of 60 years instead of 120 years in the tiangan dizhi chronology
UI automation test farewell to manual download of browser driver
What is test development? Why do so many companies hire test developers now?
【虚幻引擎UE】实现背景模糊下近景旋转操作物体的方法及踩坑记录
快手、抖音、视频号交战内容付费
官宣!第三届云原生编程挑战赛正式启动!
Rome chain analysis
Open graph protocol
Pyqt5 displays file names and pictures
Threejs clicks the scene object to obtain object information, and threejs uses raycaster to pick up object information
EasyCVR平台出现WebRTC协议视频播放不了是什么原因?
为什么百度、阿里这些大厂宁愿花25K招聘应届生,也不愿涨薪5K留住老员工?
【虚幻引擎UE】打包报错出现!FindPin错误的解决办法
如何实现实时音视频聊天功能
How to use jedis of redis