Grafana 定制化修改汉化Grafana

最新推荐文章于 2025-10-24 14:00:58 发布

原创

最新推荐文章于 2025-10-24 14:00:58 发布 · 9.6k 阅读

13 ·

CC 4.0 BY-SA版权

文章标签：

#javascript

本文档详细介绍了如何对Grafana进行样式和功能的定制化开发，包括取消侧边栏、面包屑导航栏，以及修改浏览器标签页名称。同时，还提供了基础的汉化操作指南，如时间选择器和按钮的汉化处理，并分享了相关视频资源作为进一步学习的参考。

Grafana 定制

我做的需求是对Grafana的样式以及页面标签展示进行定制化开发
1，首先，将Grafana源码启动起来
在这里插入图片描述
起来之后引入相关的Json文件大概就是这个样子
2，接下来是我们要做的
（1）取消侧边栏。
（2）取消面包屑导航栏
（3）将浏览器的标签页 *** - Grafana 改为 **** - S_M_R

*取消侧边栏。取消面包屑导航栏 *
我们在Grafana源码中找到当前目录，我们需要修改index-template.html 页面之后再powershell里执行 yarn start 进行编译之后powershell里重启后台服务 ./bin/grafana-server,exe 这样我们在127.0.01：3000本地就可以打开项目

 .sidemenu {
   
   
       display: none !important;
     }
     .page-toolbar  .css-mgcb1x {
   
   
       display: none !important;

     }
  <script>
          window.grafanaBootData = {
   
   
            user: [[.User]],
            settings: [[.Settings]],
            navTree: [[.NavTree]]
          };

      		// In case the js files fails to load the code below will show an info message.
          window.onload = function()