Node-Red 物联网平台二次开发教程6:Red-Sample中定制界面
1.介绍
Node-Red已经预留了修改界面的接口,不懂的可以翻看本站Node-Red配置项的详解
;
仔细阅读editorTheme
相关的内容.
2.加载自定义JS,CSS文件
通过Node-Red预留的配置接口,可以加载自定义JS和CSS文件;
不会JS和CSS的,去补习前端知识吧.
Red-Sample在Node-Red中加载了myred.css
和myred.js
这两个文件,见下图:
myred.js文件:
$(document).ready(function () { const newDiv = document.createElement('div') newDiv.setAttribute("class", "my-logout red-ui-editor") newDiv.innerHTML = '<a href="/api/ui">DashBoard</a><a href="/logout">注销账户</a> ' const headerElement = document.querySelector("#red-ui-header") headerElement.appendChild(newDiv) console.log(newDiv) console.log(headerElement) })
myred.css文件:
#red-ui-header span.red-ui-header-logo img { height: 30px !important; } .my-logout{ line-height: 40px; float: right; background: #000; margin-right: 20px; } .my-logout a{ vertical-align:middle; font-size: 16px; color: #ccc !important; padding: 0px 10px; }
3.修改后的界面
重新加载界面,就可以看到定制好的界面了.
4.DashBoard中增加后台URL
DashBoard中增加后台URL链接,就可以实现前后台自由切换了.