在superset0.3.6的看板,在新增和编辑时,是可以直接添加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 = 'http://127.0.0.1:5000'
// 这个是要插入css样式文件的页面路径
// 并不需要所有页面都插入css样式
// 所有的看板页面都插入css样式
const insertCssPath = new RegExp('/superset/dashboard/')
// 如果是在本地superset的服务
// 可直接把css文件放在superset项目的superset/static/assets目录下,然后如下使用
// 如果是加载的生产地址,则可使用IIS或者Nginx搭建一个本地web服务,返回css文件
// 直接如:http://localhost:8080/style/theme.css,使用
const cssUrl = '/static/assets/theme.css'
// 加载页面
win.loadURL(url)
// 监听页面准备完成,插入样式
win.webContents.on('dom-ready', () => {
let webUrl = win.webContents.getURL()
if (insertCssPath.test(webUrl)) {
// 如果是需要插入样式文件
// 执行js代码往当前页面插入样式文件
win.webContents.executeJavaScript(`
const link = document.createElement('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文件设置成的颜色,如下:
这里有几个需要强调注意的地方:
- loadURL的URL请根据实际情况配置(本地也可能并非5000端口),建议使用线上服务;
- 关于css文件的路径,使用superset才可直接放在superset/static目录下,如何使用线上地址,需要在本地搭建web服务来访问css文件地址;
- 如果使用superset服务加载css文件,会有缓存,需要在开发者工具的network中禁用缓存(Disable cache);
- electron窗口中使用;
以上,我们就实现了如何使用electron实现可以在自己喜欢的编辑器中,编辑样式了。但还是有以下问题:
- 虽然预览比之前好了,但每次修改后还是要ctrl+r去刷新,没有做到自动刷新。
- 如果我想使用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').server.create();
// 样式修改使用electron-connect刷新,electron窗体
function reload (cb) {
elecConnect.reload()
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)后添加
client.create(win)
在当前目标下添加theme.css
,起个IIS服务指向theme_editor
,**我这里端口是88
,所以需要把main.js
的cssUrl
值修改为http://localhost:88/theme.css
// main.js
...
const cssUrl = 'http://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').server.create()
const less = require('gulp-less')
// 样式修改使用electron-connect刷新,electron窗体
function reload (cb) {
elecConnect.reload()
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; }')
// 下面输入你系统的用户名,密码
win.webContents.executeJavaScript(`
$("#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事件的回调函数后面添加代码:
// href填入指定url
win.webContents.executeJavaScript(`location.href="http://127.0.0.1:5000/superset/dashboard/births/"`)
以上,完整代码: theme-editor。
有时,我们想做的可能更复杂,比如对小图片转base64
,对于未转base64
的图片希望可以自动输出到指定目录并在css文件中做替换,压缩css
代码,打包前先压缩图片等等,这些gulp
都有相应的插件去实现。相应可以看theme-editor,dev分支的gulpfile文件。
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。