ThingsBoard3.9.1前端定制化开发/Logo/样式/颜色

已于 2025-05-09 11:02:33 修改
阅读量887 收藏 30
点赞数 30
CC 4.0 BY-SA版权
分类专栏： ThingsBoard 文章标签： 前端 javascript iot thingsboard
于 2025-05-08 11:37:52 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/hssjf/article/details/147771482

        最近在整理thingsboard课程，基于最新thingsboard版本3.9.1/4.0，欢迎大家收藏、关注我，提问，在评论区留言，我争取把最新、最准、最好的课程，呈现在各位亦师亦友的csdn广大读者面前。

目录

1. 定制开发

1.1前端技术栈说明

1.2修改Logo图标

1.3修改界面样式/颜色

1. 定制开发

1.1前端技术栈说明

ThingsBoard3.9.1前端采用Angular 18框架，并结合Material Design风格的UI组件库。
框架：
Angular 18+（基于@angular/cli脚手架搭建）
TypeScript（强类型 JavaScript 超集，ThingsBoard把模块化/

了解本专栏 订阅专栏 解锁全文 超级会员免费看
前端使用二开Thingsboard一、二、三事(五)-仪表板(一)
weixin_43163457的博客
02-21 349
以项目实战为基础，逐步介绍前端在thingsboard系统二次开发中的一些注意事项以及一些thingsboard一些页面功能讲解，为前端人员开发使用thingsboard提供一种可靠思路，打造一个完美的物联网系统。
ThingsBoard定制化开发界面+后台
hssjf的专栏
11-10 978
ThingsBoard 本地环境搭建和源码编译安装。thingsboard编译安装步骤。通过规则链调整json数据格式。官方github站点。
thingsboard-部件库开发 之 rpc-部件开发
weixin_37676863的博客
06-17 3253
thingsboard 部分的知识网上也不是很多 对于类似于我这样的一些同学来说 看官方api简直是欲生欲死。 正好最近也有项目，一边开发一遍写博，留作日志，同时也供大家参考。 因为也是入门级别，所以有些地方可能有错误，欢迎大家指出。 另外，有结交朋友的可以加我个人QQ：1038371990.备注csdn-thingsboard 话不多说，今天讲讲一个部件的开发。-rpc部件。 ...
ThingsBoard（4）（二次开发篇1）（TODO）
最新发布
fanged的专栏
06-13 1535
特性描述前后端完全分离可独立部署，方便对接第三方系统或替换 UI通信方式REST API + WebSocket，支持高并发与实时性易于二次开发可自定义仪表盘组件、后台业务逻辑、集成机器学习模型、接入外部系统等接口开放文档Swagger UI如果你希望：自定义前端组件（桥梁 3D 模型 + 传感器位置展示）开发自己的 API 或规则链节点将 ML 模型分析接入 ThingsBoard 决策流程我可以为你提供具体的操作示例或开发指南。是否继续？
ThingsBoard學習記錄---針對前端（持續更新）
邓邓今天加油了吗
08-12 1813
ThingsBoard學習記錄---針對前端（持續更新）
ThingsBoard前端项目的安装与启动
weixin_41394875的博客
12-15 2105
本文介绍在Windows环境，ThingsBoard前端项目的安装部署与如何配置后台服务启动。
ThingsBoard 前端项目内置部件开发
weixin_41394875的博客
04-26 831
本文介绍如何在 ThingsBoard 前端项目中开发内置的菜单导航部件。
Thingsboard前端二次开发学习
xiaoming_Super的博客
01-05 1356
目录解析
ThingsBoard3.9.1/4.0教程目录说明
hssjf的专栏
05-07 942
基于thingsboard3.9.1/4.x最新版本，讲述thingsboard基本概念，功能介绍，二次开发，源码分析，项目案例，数据库，消息队列等。
ThingsBoard 拆分前后端
东方势力的博客
04-20 1806
(1)进入ThingsBoard 将ui-ngx 剪切至另一个文件夹单独运行，删除ui-ngx中的多余配置，例如pom.xml (2) 全局搜索ui-ngx 关键字，删除或注释掉相关配置 XXX\thingsboard\application\pom.xml 文件中的ui-ngx注释知道 1： 2： 3： 然后单独运行： yarn start :运行成功 然后启动后台代码：就可以了。 感谢下面人的分享： 我参考了：6-ThingsBoard 拆分前后端 - 简书(1...
前端使用二开Thingsboard一、二、三事(二)-设备
weixin_43163457的博客
02-18 290
登录Thingsboard后，进入的第一个页面便是首页，首页展示分为两部分，默认展示的是快捷入口模块点击模块便可进入相应的侧边栏页面，默认显示模块个数与侧边栏展示列一般相同，展示内容可在代码中进行删减，具体操作在上一章中已做介绍，此处不再累述，除了默认展示外，还可根据用户需求制作数据展示首页，如下图：怎么制作数据展示页面是个复杂的过程(二次开发主要集中在这里)，之后会单独讲，此处先说如何切换默认首页和数据展示首页。
thingsboard源码分析，绝对有用
04-10
学习thingsboard,这个资料绝对的精品，分享出来，希望能够帮到大家！
前端使用二开Thingsboard一、二、三事（一）-thingsboard介绍
weixin_43163457的博客
02-18 777
以项目实战为基础，逐步介绍前端在thingsboard系统二次开发中的一些注意事项以及一些thingsboard一些页面功能讲解，为前端人员开发使用thingsboard提供一种可靠思路，打造一个完美的物联网系统。
ThingsBoard教程（九）：前端架构分析
知无涯
04-02 4903
ThingsBoard 前端 架构解析
ThingsBoard教程（十）：前端初级定制化
知无涯
04-02 6717
ThingsBoard 前端初级定制
thingsboard 前端 console vs $log
aliceyang2012的专栏
04-27 187
想在页面中打印信息，试过console.log和window.alert,奈何这两个都报错，angular小白实在找不到原因 然后按照提示用$log，奈何又报错 ‘$log’ is not defined 简直让人崩溃…… 找了一圈尝试后，终于可以了 ...
ThingsBoard 前端项目背景图片部件开发
weixin_41394875的博客
09-27 819
ThingsBoard 是目前 Github 上最流行的开源物联网平台，本文介绍如何在 ThingsBoard 前端项目中开发背景图片部件。
ThingsBoard3.9.1前后端分离的运行部署
hssjf的专栏
05-08 488
thingsboard3.9.1/4.0前后端分离。
探索创新：Thingsboard UI Vue —— 一个基于Vue.js的物联网UI组件库
gitblog_00045的博客
03-31 1155
探索创新：Thingsboard UI Vue —— 一个基于Vue.js的物联网UI组件库 去发现同类优质开源项目:https://gitcode.com/ 项目简介 在物联网(IoT)应用开发中，构建美观、易用且功能强大的用户界面是至关重要的一步。 是一个专为物联网项目设计的前端UI框架，它基于流行的Vue.js框架，提供了丰富的预置组件和工具，帮助开发者快速构建出与Thingsboard I...
thingsboard改logo
04-01
<think>嗯，用户想在ThingsBoard中更换自定义Logo，我需要根据提供的引用内容来解答这个问题。首先，我得看看用户提供的引用信息。引用[2]提到了一个教程，关于如何快速部署智慧农业实例并更换Logo，可能里面有具体步骤。另外，引用[3]指向了一个TypeScript组件文件，这可能涉及到前端代码的修改。 首先，用户可能已经安装了ThingsBoard，按照引用[1]的步骤下载了社区版。现在需要替换Logo，这通常涉及到前端文件的修改。因为引用[3]提到了dashboard-page.component.ts，这可能是在Angular组件中替换Logo的位置。不过，ThingsBoard是基于Angular的前端，所以可能需要找到存放Logo图片的目录，通常是assets或静态资源文件夹。 根据常规操作，更换Logo可能需要替换原有的图片文件，并确保新图片的路径和名称一致。或者可能需要修改前端代码中的图片引用路径。但用户提供的引用[2]中的教程可能有更具体的步骤，比如替换哪个目录下的文件，是否需要重新编译前端代码等。 需要注意的是，ThingsBoard可能有不同的部署方式，比如Docker或源码部署，不同的部署方式更换Logo的方法可能不同。用户提到的是源码部署，所以在引用[2]的教程里应该会指导如何替换Logo文件，然后重新构建前端部分。例如，替换src目录下的某个图片，然后运行npm install和npm run build来生成新的静态文件。 另外，用户可能需要清除浏览器缓存才能看到新的Logo生效。同时，如果使用了自定义主题，可能需要检查主题设置中是否有覆盖Logo的情况。 总结步骤应该是：找到Logo文件的位置，替换为新文件，重新构建前端，重启服务，清除缓存。不过需要具体确认引用中的教程是否有详细说明，或者是否有其他需要注意的地方，比如权限问题或文件路径的正确性。</think>根据ThingsBoard的源码结构和部署方式，更换自定义Logo需要修改前端资源文件，以下是具体操作步骤： ### 一、定位Logo文件位置 1. 默认Logo路径位于： $$ src/app/assets/logo_white.svg $$ 和 $$ src/app/assets/logo_title_white.svg $$ [^3] 2. 不同主题对应的Logo文件： - 深色主题：logo_white.svg - 浅色主题：logo_black.svg ### 二、替换操作步骤 1. 用同尺寸的SVG文件覆盖原文件（推荐尺寸：174x32像素） 2. 修改标题Logo引用路径： ```typescript // src/app/modules/home/components/dashboard-page/dashboard-page.component.ts logoUrl = require(&#39;../../../assets/logo_title_white.svg&#39;).default; ``` 3. 执行前端构建命令： ```bash npm install npm run build ``` ### 三、注意事项 1. 更换后需清除浏览器缓存 2. Docker部署需重建镜像 3. 企业版需同步修改管理后台Logo
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值