tags:网站
[toc]
本文主要记录Grafana汉化过程,以备后续查阅。 Grafana中文版本基于官方源码(前端部分)进行汉化。汉化内容主要为前端UI界面文本,不涉及后端服务器内容。
重要提示!! Grafana官方使用webpack进行前端代码的打包发布,实际发行版本(Windows/Linux)的前端文件均为打包压缩后的资源文件,直接汉化压缩后的文件虽能起到汉化作用,但是非常不利于版本升级维护,且汉化工作量巨大。 因此,建议按照官方的开发流程,直接修改官方的前端源码,再使用webpack重新发布,同时使用git跟随官方版本进行更新升级。
打开Grafana官方Github仓库,fork官方源码至自己账户仓库下。 Grafana官方仓库链接https://github.com/grafana/grafana
使用SourceTree(或官方的GiHubDesktop程序)clone自己账户的仓库到本地。
官方默认为master分支(未发布版本),向下滚动找到当前发布版本标签。(当前为v5.2.1)
在已发行分支(v5.2.1)上右键创建新分支(汉化分支)。
需检出新的汉化分支!否则改动的是官方的分支
在项目(仓库)文件夹中运行npm install
安装项目依赖环境。
可使用淘宝镜像cnpm install加快安装速度
使用IDE打开项目,在此以WebStorm为例。
双击左侧start
或命令行运行npm start
启动 webpack-dev-server
如出现报错请重新运行npm install
修复环境
打开localhost:3333
访问本地开发服务器,发现无法访问。
webpack-dev-server只是作为一个代理服务器进行开发中的资源调试,真正的数据请求全部代理到了Grafana官方后台服务器localhost:3000
,需先运行grafana官方版本。
下载官网Grafana-Windows版本并运行。测试访问localhost:3000
。若localhost:3000
能正常访问,则返回刷新localhost:3333
,发现也可正常访问。
此时,localhost:3000
使用的是官方发行版本的前端资源,需修改配置文件,使其指向开发目录中的资源。
关闭Grafana官方版本服务器,打开\grafana-5.2.1\conf\defaults.ini
,app_mode
更改为development
,静态文件路径,使其指向开发目录中的/pulic
文件夹。
重新运行Grafana官方版本服务器,测试访问。
至此,环境准备完毕,可以开始汉化工作。
Grafana全部的前端文件都位于/public
文件夹内,这里我们登录页面为例,介绍汉化方法。
启用Grafana官方服务器,和webpack-dev-server(运行 npm start)。
修改/public/partials/login.html
文件内容,将Log in
改为登录
并保存,webpack-dev-server会自动编译并更新文件,在浏览器中可实时看到更改的内容。(localhost:3333)
运行npm build
命令,编译项目文件。编译压缩后的文件会输出到/build
和view
文件夹下,建议实际使用直接复制整个/public
文件夹替换线上生产版本。(Windows版本为/public
, Linux版本为/usr/share/grafana/public
)