app登录界⾯背景css_Superset如何快速创建看板CSS模板在superset0.3.6的看板，在新增和编辑时，是可以直接添加css样式去控制整个看板页⾯任意元素的样式。或者在管理菜单--css模板添加相应css模板，然后编辑看板时直接选择应⽤css模板。 这个功能确实是⾹，这可以实现不⽤修改⼀句源代码就将看板的风格、样式完全改变，⽐如如下这样：
但说实话，直接在看板的样式编辑弹窗⾥写样式，实在是太痛苦了，或者说这**完全接受不了呀！ 痛点
如下： - 实时预览效果太差--需要先保存，然后试下效果，然后继续编辑看板，选择编辑CSS模板，再接着写，如此往复；
- 没有代码提⽰；
css怎么创建- 不可以使⽤css预处理语⾔；
这是简单分享，我是使⽤使⽤gulp+electron解决这些问题的。
项⽬初始化
mkdir theme_editor
cd theme_editor
npm init -y
使⽤electron加载页⾯注⼊css
安装electron，下载electron会需要⼀点时间，可尝试使⽤cnpm
npm install electron -D
根⽬录下添加main.js
const { app, BrowserWindow } = require('electron')
// 创建electron window
function createWindow () {
const win = new BrowserWindow({
webPreferences: {
// 开启开发⼯具，⽅便调试
devTools: true
}
})
// superset web服务地址
/
/ 建议使⽤⽣产地址，本地就可以不需要启动superset后端服务了
const url = '127.0.0.1:5000'
// 这个是要插⼊css样式⽂件的页⾯路径
// 并不需要所有页⾯都插⼊css样式
// 所有的看板页⾯都插⼊css样式
const insertCssPath = new RegExp('/superset/dashboard/')
// 如果是在本地superset的服务
// 可直接把css⽂件放在superset项⽬的superset/static/assets⽬录下，然后如下使⽤  // 如果是加载的⽣产地址，则可使⽤IIS或者Nginx搭建⼀个本地web服务，返回css⽂件  // 直接如：localhost:8080/style/theme.css，使⽤
const cssUrl = '/static/assets/theme.css'
// 加载页⾯
win.loadURL(url)
// 监听页⾯准备完成，插⼊样式
('dom-ready', () => {
let webUrl = URL()
if (st(webUrl)) {
// 如果是需要插⼊样式⽂件
// 执⾏js代码往当前页⾯插⼊样式⽂件
uteJavaScript(`
const link = ateElement('link');
link.setAttribute('type','text/css');
link.setAttribute('rel','stylesheet');
link.setAttribute('href','${cssUrl}');
document.head.appendChild(link);`
)
return false
}
})
}
app.whenReady().then(createWindow)
package.json添加⼀个脚本，修改main属性：
{
"name": "theme_editor",
"version": "1.0.0",
"description": "",
"main": "main.js",
"scripts": {
"test": "echo "Error: no test specified" && exit 1",
"start": "electron ."
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"electron": "^10.1.2"
}
}
在superset项⽬，superset/static/assets⽬录下添加theme.css
#app {
height: 100%;
overflow: hidden;
background: linear-gradient(180deg, #3F4685 0%, #222648 100%);
}
然后，跑起superset前后端服务。当前⽬录执⾏命令
npm run start
如果⼀切正常，上⾯命令会弹出⼀个electron窗⼝，加载superset的web服务，登陆后打开任意⼀个看板，看板的背景会变成theme⽂件设置成的颜⾊，如下：
这⾥有⼏个需要强调注意的地⽅： 1. loadURL的URL请根据实际情况配置(本地也可能并⾮5000端⼝)，建议使⽤线上服务； 2. 关于
这⾥有⼏个需要强调注意的地⽅：
css⽂件的路径，使⽤superset才可直接放在superset/static⽬录下，如何使⽤线上地址，需要在本地搭建web服务来访问css⽂件地址；
3. 如果使⽤superset服务加载css⽂件，会有缓存，需要在开发者⼯具的network中禁⽤缓存(Disable cache);
4. electron窗⼝中使⽤；
以上，我们就实现了如何使⽤electron实现可以在⾃⼰喜欢的编辑器中，编辑样式了。但还是有以下问题：
1. 虽然预览⽐之前好了，但每次修改后还是要ctrl+r去刷新，没有做到⾃动刷新。
2. 如果我想使⽤CSS预编译语⾔呢？
接下来，⽤gulp解决上⾯两个问题。
使⽤gulp结合electron-connect实现⾃动刷新
安装相关依赖：
npm install gulp gulp-cli electron-connect -D
添加gulpfile.js:
const { watch, task } = require('gulp');
const elecConnect = require('electron-connect').ate();
// 样式修改使⽤electron-connect刷新，electron窗体
function reload (cb) {
cb()
}
task('watch', function () {
elecConnect.start()
watch(['./theme.css'], reload)
})
同时，在main.js中使⽤connect：
// 修改main.js，在第⼆⾏引⼊connect
const client = require('electron-connect').client
...
// 在win.loadURL(url)后添加
// main.js
...
const cssUrl = 'localhost:88/theme.css'
...
最后，当前⽬录执⾏命令：
npx gulp watch
如果这⾥没出问题，那么，你修改theme.css后，electron-connec t就会⾃动把electron窗⼝当前的页⾯刷新⼀下。这⾥我碰到⼀个问题，提⽰electron不存在，删除node_modules再重新install⼀次解决。这⾥还有⼀点要注意下，如果npm版本⼩于5.2，是⽆法使⽤npx，要么升级node版本，要么全局安装gulp-cli然后直接跑gulp watch。
好了，到⽬前为⽌，我们⼜解决了⼀个⾃动刷新的需求。下⾯，我们来实现⼀下预处理。
使⽤gulp-less实现预处理
安装gulp-less，如果想使⽤其它css预编译语⾔，可以安装相关的gulp插件
npm install gulp-less -D
修改gulpfile.js
const { watch, task, dest, src, series } = require('gulp')
const elecConnect = require('electron-connect').ate()
const less = require('gulp-less')
// 样式修改使⽤electron-connect刷新，electron窗体
function reload (cb) {
cb()
}
// 编译less
function lessCompier () {
return src('./*.less')
.pipe(less())
.pipe(dest('./'))
}
task('watch', function () {
elecConnect.start()
series(lessCompier)()
// 修改为监听less改变
watch(['./theme.less'], series(lessCompier, reload))
})
添加theme.less
#app{
height: 100%;
overflow: hidden;
background: linear-gradient(180deg, #3F4685 0%, #222648 100%);
}
再次运⾏npx gulp watch，这时，只要你修改theme.less，页⾯也会⾃动刷新了。
其它
到这⾥，我们的需求已经实在。但依然还有⼏个不完美的地⽅，⽐如每次启动electron我们都需要重新登录下，可以这样处理下：
// 在main.js的dom-ready事件的回调函数⾥⾯
// 判断下如果是进⾏了登录页⾯，⾃动输⼊密码并登陆
if (//login/$/.test(webUrl)) {
win.webContents.insertCSS('html, body { background-color: #f00; }')
// 下⾯输⼊你系统的⽤户名，密码
uteJavaScript(`
$("#username")[0].value="admin";
$("#password")[0].value="123456";
$("form[name=login]")[0].submit();
`, true)
.then(() => {
console.log('login success')
})
.catch(err => {
console.log('login Error:', err)
})
return false
}
如果觉得，希望每次都直接登陆，并跳转到具体看板，我们可以粥在main.js的dom-ready事件的回调函数后⾯添加代码：

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。