Grafana 系列 (5)：置換 logo、底圖、底色、頁籤 title (macOS)

EJ Feng

3 min readJan 17, 2020

客製化 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 跟背景底圖

目標是先將上圖的 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 中的

換成

無反應。

在 Visual Studio Code 打開 /usr/local/Cellar/grafana/6.5.3/share/grafana/，搜尋 public/img/grafana_icon.svg 後全部以 public/img/s_logo.png 取代，即可：

把 /usr/local/Cellar/grafana/6.5.3/share/grafana/public/sass/pages/_login.scss 中的

換成

無反應。

在 Visual Studio Code 打開 /usr/local/Cellar/grafana/6.5.3/share/grafana/，搜尋 img/grafana_typelogo.svg 後全部以 img/s_logo_cn.png 取代，即可：

第 2 步：換背景圖

在 Visual Studio Code 打開 /usr/local/Cellar/grafana/6.5.3/share/grafana/，搜尋 /img/heatmap_bg_test.svg 後全部以 /img/s_login_bg.jpg 取代：

2. 換掉「全部頁面」的頁籤 logo 跟 title

第 1 步：換頁籤 title

將 /usr/local/Cellar/grafana/6.5.3/share/grafana/public/views/index.html 中的

換成

可得此效果：

在 Visual Studio Code 打開 /usr/local/Cellar/grafana/6.5.3/share/grafana/，搜尋 <title> 後，將 html 檔（error-template.html、error.html、index-template.html）的 title 內容改成「S 儀表板」。

在 /usr/local/Cellar/grafana/6.5.3/share/grafana/public/app/core/components/Page/Page.tsx 中，把

換成

沒有反應。

在 Visual Studio Code 打開 /usr/local/Cellar/grafana/6.5.3/share/grafana/，搜尋「- Grafana」後，將疑似目標 title 的改成「- S 儀表板」即可。

第 2 步：換頁籤 logo

把 /usr/local/Cellar/grafana/6.5.3/share/grafana/public/views/index.html 中的

換成

可成功換 logo：

在 Visual Studio Code 打開 /usr/local/Cellar/grafana/6.5.3/share/grafana/，搜尋 public/img/fav32.png 後全部以 public/img/s_logo_x.png 取代即可。

3. 換掉「全部頁面」的 sidemenu logo

目標是換掉左側 sidemenu 最上方的 Grafana logo。

在 Visual Studio Code 打開 /usr/local/Cellar/grafana/6.5.3/share/grafana/，搜尋 public/img/s_logo.png 後（因為在之前的步驟有換過一次了），找是 sidemenu__logo 的，以 public/img/s_logo_x.png 取代即可。