正常grafana看板的顏色非常單調(diào)，時(shí)間長(zhǎng)了也會(huì)審美疲勞酱畅，對(duì)于那些喜新厭舊的人來說琳袄，多少有點(diǎn)不能滿足，于是我就在網(wǎng)上找了一些方式來讓我的grafana看板變得更加炫酷纺酸，講之前先貼個(gè)對(duì)比圖吧
再來個(gè)動(dòng)圖
第一張圖顯得暗淡了許多窖逗，哈哈哈。下面講講如何去做餐蔬。
grafana安裝插件yesoreyeram-boomtheme-panel
因?yàn)槲业膅rafana沒有使用k8s進(jìn)行安裝碎紊，我直接用docker起的在张，所以這里我直接進(jìn)入到docker里執(zhí)行安裝操作
# docker ps
CONTAINER ID IMAGE COMMAND CREATED STATUS PORTS NAMES
cef753a202d5 grafana/grafana "/run.sh" 3 months ago Up 2 hours 0.0.0.0:3000->3000/tcp grafana-server
查到CONTAINER ID然后進(jìn)入容器
# 進(jìn)入容器
docker exec -it cef75 bash
# 安裝插件
grafana-cli plugins install yesoreyeram-boomtheme-panel
安裝完成后，需要重啟容器
docker container restart cef753a202d5
然后矮慕，我們的grafana上就有了這個(gè)插件
安裝很簡(jiǎn)單帮匾，沒啥可說的
配置grafana
配置的話也很簡(jiǎn)單，但是沒接觸過的小寶貝可能就比較懵逼痴鳄，其實(shí)整個(gè)流程是這樣的瘟斜，我們先創(chuàng)建一個(gè)dashboard，然在這個(gè)dashboard中新建一個(gè)面板痪寻，創(chuàng)建面板的時(shí)候螺句，選擇剛裝的插件Boom Theme，然后配置此插件橡类，配置完成后蛇尚，點(diǎn)擊保存，保存完整個(gè)dashboard就會(huì)發(fā)生變化顾画，然后我們拷貝此面板到任意其他的dashboard中取劫，然后其他的dashboard主題也會(huì)相應(yīng)的發(fā)生變化。
簡(jiǎn)而言之就是：看下面的操作吧
創(chuàng)建一個(gè)dashboard并添加面板
選擇Boom Theme并進(jìn)行配置
點(diǎn)擊添加新的主題
這里我們看到有添加背景圖片的研侣，還有添加CSS一些樣式的谱邪，文章開頭貼了一些圖片，是不是明白了庶诡，有美女背景的惦银，有g(shù)if動(dòng)圖的，也有類似于火焰的末誓，其實(shí)就是設(shè)置的這里扯俱，然后你可能會(huì)問了，背景圖片我知道哪里弄喇澡，但是那些CSS的樣式我哪里弄呢迅栅？
添加外部CSS地址
地址欄輸入：https://github.com/gilbN/theme.park/tree/master/CSS/themes/grafana
然后你就會(huì)看到有好幾個(gè)類型的CSS，對(duì)應(yīng)的就是不同顏色的樣式撩幽，可以都配置下库继，看看什么效果
我這里都整理好了箩艺，直接配置成我這里的地址就可以了
https://gilbn.github.io/theme.park/CSS/themes/grafana/hotline.css
https://gilbn.github.io/theme.park/CSS/themes/grafana/aquamarine.css
https://gilbn.github.io/theme.park/CSS/themes/grafana/organizr-dark.css
https://gilbn.github.io/theme.park/CSS/themes/grafana/organizr-dashboard.css
https://gilbn.github.io/theme.park/CSS/themes/grafana/plex.css
https://gilbn.github.io/theme.park/CSS/themes/grafana/space-gray.css
如圖所示：
然后點(diǎn)擊apply窜醉，然后你就會(huì)看到整個(gè)dashboard發(fā)生了變化
也就是說只要應(yīng)用了這個(gè)插件，整個(gè)dashboard就會(huì)變化艺谆，準(zhǔn)確說是添加的這個(gè)面板
應(yīng)用于其他的dashboard
雖然主題變了榨惰，但是得讓其他的dashboard炫酷才行啊，所以把這個(gè)面板拷貝到其他dashboard中静汤，這里我隨便找一個(gè)應(yīng)用下
復(fù)制
然后就變了琅催。有點(diǎn)簡(jiǎn)單居凶。
雖然簡(jiǎn)單，但是你以為到這里就完了嗎藤抡？還有點(diǎn)不完美侠碧，每次加載的時(shí)候速度有點(diǎn)慢，究其原因就是去github上獲取這個(gè)css缠黍，所以多少會(huì)有點(diǎn)慢弄兜，那么接下來就做下優(yōu)化
優(yōu)化css加載速度
優(yōu)化無非就是把這個(gè)css放到國內(nèi)，放到國內(nèi)原廠商的對(duì)象存儲(chǔ)里瓷式，或者徹底一點(diǎn)替饿，直接放到本地，我這里都進(jìn)行嘗試了贸典，都可视卢！下面說一下如何將這個(gè)css放到本地
下載css并配置grafana
先進(jìn)入docker中創(chuàng)建存放css的目錄
docker exec -it --user root cef75 bash
注意： 這里加了一個(gè)--user root，因?yàn)椴患舆@個(gè)進(jìn)入容器后廊驼，創(chuàng)建目錄會(huì)權(quán)限拒絕据过，所以需要添加下，如果是虛機(jī)部署直接創(chuàng)建即可
# 進(jìn)入到此目錄中
cd /usr/share/grafana/public
# 創(chuàng)建目錄
mkdir css
# 下載css
wget https://gilbn.github.io/theme.park/CSS/themes/grafana/hotline.css
這樣就行了妒挎，然后配置下grafana蝶俱，其實(shí)就是改成本地的地址
注意后面的路徑就好了: /public/css/hotline.css
然后速度就刷刷的了，幾乎打開就能生效饥漫。
