Grafana 系列 (5):置換 logo、底圖、底色、頁籤 title (macOS) (转)
文章出处:https://medium.com/@maiccaejfeng/grafana-%E7%B3%BB%E5%88%97-5-%E7%BD%AE%E6%8F%9B-logo-%E5%BA%95%E5%9C%96-%E5%BA%95%E8%89%B2-%E9%A0%81%E7%B1%A4-title-macos-a6b952069248
客製化 Grafana 系統 style。
- 打開本機的 Grafana。打開 Terminal,輸入以下指令 :
$ brew update
$ brew reinstall grafana
$ brew tap homebrew/services
$ brew services start grafana 或是 $ brew services restart grafana - 在瀏覽器輸入 http://localhost:3000/login 登入。預設帳密為 admin/admin。
1. 換掉「login 頁」的 logo 跟背景底圖
![](https://miro.medium.com/max/3360/1*o-R3Hc1NaTu8fv_EdxbBJA.png)
目標是先將上圖的 Grafana logo 換掉。
第 1 步:換 logo
此 login 頁的程式碼位於我 mac 電腦本機端的 /usr/local/Cellar/grafana/6.5.3/share/grafana/public/views/index.html。每次更改程式碼皆需重新 $ brew services restart grafana 才會生效。
把 /usr/local/Cellar/grafana/6.5.3/share/grafana/public/app/core/components/Login/LoginPage.tsx 中的
![](https://miro.medium.com/max/1364/1*_NWNDyzP2bW2RPJvVucqcg.png)
換成
![](https://miro.medium.com/max/1334/1*4xhkpKcd9PAtGBfZuCRTIQ.png)
無反應。
在 Visual Studio Code 打開 /usr/local/Cellar/grafana/6.5.3/share/grafana/,搜尋 public/img/grafana_icon.svg 後全部以 public/img/systex_logo.png 取代,即可:
![](https://miro.medium.com/max/3360/1*fr_fOxLl73k6xI96VQYlFA.png)
把 /usr/local/Cellar/grafana/6.5.3/share/grafana/public/sass/pages/_login.scss 中的
![](https://miro.medium.com/max/1158/1*7_wUIPBQTUIdkGSvciwoJw.png)
換成
![](https://miro.medium.com/max/1126/1*ePhdhOrJhs-yBLbNBZoh7Q.png)
無反應。
在 Visual Studio Code 打開 /usr/local/Cellar/grafana/6.5.3/share/grafana/,搜尋 img/grafana_typelogo.svg 後全部以 img/systex_logo_cn.png 取代,即可:
![](https://miro.medium.com/max/3360/1*xy0W_UYGvz8X5OQXyAtwbA.png)
第 2 步:換背景圖
在 Visual Studio Code 打開 /usr/local/Cellar/grafana/6.5.3/share/grafana/,搜尋 /img/heatmap_bg_test.svg 後全部以 /img/systex_login_bg.jpg 取代:
![](https://miro.medium.com/max/3360/1*Ee7sBukeRgqmaVswJ7Cvrw.png)
2. 換掉「全部頁面」的頁籤 logo 跟 title
![](https://miro.medium.com/max/412/1*diGWuC_lNJkLFBO_Jkz9Bg.png)
第 1 步:換頁籤 title
將 /usr/local/Cellar/grafana/6.5.3/share/grafana/public/views/index.html 中的
![](https://miro.medium.com/max/454/1*y6DM7k1YZGCJZ6VkF2ZcyA.png)
換成
![](https://miro.medium.com/max/624/1*GL25lQ66uyKbaZSHTvLjrA.png)
可得此效果:
![](https://miro.medium.com/max/454/1*07E3jkrEHRKCddWuqt1Iiw.png)
在 Visual Studio Code 打開 /usr/local/Cellar/grafana/6.5.3/share/grafana/,搜尋 <title> 後,將 html 檔(error-template.html、error.html、index-template.html)的 title 內容改成「SYSTEX 日誌監控儀表板」。
在 /usr/local/Cellar/grafana/6.5.3/share/grafana/public/app/core/components/Page/Page.tsx 中,把
![](https://miro.medium.com/max/1002/1*9vwkmuofUuVZd2s4XeWB1w.png)
換成
![](https://miro.medium.com/max/1334/1*DxqjtPmNDgeXeo4WPKWsSQ.png)
沒有反應。
在 Visual Studio Code 打開 /usr/local/Cellar/grafana/6.5.3/share/grafana/,搜尋「- Grafana」後,將疑似目標 title 的改成「- SYSTEX 日誌監控儀表板」即可。
第 2 步:換頁籤 logo
把 /usr/local/Cellar/grafana/6.5.3/share/grafana/public/views/index.html 中的
![](https://miro.medium.com/max/1026/1*uf7n7q_HXW6GPeL0oNKvwA.png)
換成
![](https://miro.medium.com/max/1136/1*gcDxiGynETLlasTutMXA8g.png)
可成功換 logo:
![](https://miro.medium.com/max/454/1*mSP7ttOeTYUxphRgy_7VbA.png)
在 Visual Studio Code 打開 /usr/local/Cellar/grafana/6.5.3/share/grafana/,搜尋 public/img/fav32.png 後全部以 public/img/systex_logo_x.png 取代即可。
3. 換掉「全部頁面」的 sidemenu logo
![](https://miro.medium.com/max/3360/1*CsnGT7MdNBJ6RH-TGsRC_g.png)
目標是換掉左側 sidemenu 最上方的 Grafana logo。
在 Visual Studio Code 打開 /usr/local/Cellar/grafana/6.5.3/share/grafana/,搜尋 public/img/systex_logo.png 後(因為在之前的步驟有換過一次了),找是 sidemenu__logo 的,以 public/img/systex_logo_x.png 取代即可。
![](https://miro.medium.com/max/3360/1*W7-nNgsrfKBdq36q38_1dA.png)
4. 換掉「全部頁面」的 sidemenu 底色
![](https://miro.medium.com/max/3360/1*W7-nNgsrfKBdq36q38_1dA.png)
目標是換掉左側 sidemenu 的底色。
在 Visual Studio Code 打開 /usr/local/Cellar/grafana/6.5.3/share/grafana/,搜尋 #1e2028,找是 .sidemenu 的 background: #1e2028 的,以 #2c6a9c 取代即可。
![](https://miro.medium.com/max/1680/1*TMOqlFe2cCnuC5BwO3k9fA.png)
好!完成!!