Skip to content

Latest commit

 

History

History
128 lines (77 loc) · 6.12 KB

汉化笔记.md

File metadata and controls

128 lines (77 loc) · 6.12 KB

Grafana汉化笔记

tags:网站


[toc]


前言

本文主要记录Grafana汉化过程,以备后续查阅。 Grafana中文版本基于官方源码(前端部分)进行汉化。汉化内容主要为前端UI界面文本,不涉及后端服务器内容。

重要提示!! Grafana官方使用webpack进行前端代码的打包发布,实际发行版本(Windows/Linux)的前端文件均为打包压缩后的资源文件,直接汉化压缩后的文件虽能起到汉化作用,但是非常不利于版本升级维护,且汉化工作量巨大。 因此,建议按照官方的开发流程,直接修改官方的前端源码,再使用webpack重新发布,同时使用git跟随官方版本进行更新升级。

环境准备

1 fork官方源码

打开Grafana官方Github仓库,fork官方源码至自己账户仓库下。 Grafana官方仓库链接https://github.com/grafana/grafana

image_1cj1g59fb18hso57196im6j2g29.png-93.5kB

2 创建汉化分支

使用SourceTree(或官方的GiHubDesktop程序)clone自己账户的仓库到本地。 image_1cj1h575jfo31rjk11cq31k16oq1g.png-48.3kB

官方默认为master分支(未发布版本),向下滚动找到当前发布版本标签。(当前为v5.2.1)

image_1cj1itoif6sp1g4jfpfd9de5o9.png-172.3kB

image_1cj1iuv2lue5rkgqv1kda1mj6m.png-159.7kB

在已发行分支(v5.2.1)上右键创建新分支(汉化分支)。

需检出新的汉化分支!否则改动的是官方的分支

image_1cj1j37s9i9s6191au3r6tp1m13.png-92.4kB

image_1cj1j6ukrhm9p991g8mndlfaj1g.png-42kB

3 安装开发环境

在项目(仓库)文件夹中运行npm install 安装项目依赖环境。

可使用淘宝镜像cnpm install加快安装速度

使用IDE打开项目,在此以WebStorm为例。

image_1cj1jukvfavc1jt9v5j1g0a1a872a.png-251.1kB

双击左侧start或命令行运行npm start 启动 webpack-dev-server

如出现报错请重新运行npm install 修复环境

image_1cj1k6phhgfj4j61nfov0d6572n.png-152.2kB

image_1cj1kc062pbfjdsc8up2713g53h.png-25.3kB

4 搭建开发服务器

打开localhost:3333访问本地开发服务器,发现无法访问。 webpack-dev-server只是作为一个代理服务器进行开发中的资源调试,真正的数据请求全部代理到了Grafana官方后台服务器localhost:3000,需先运行grafana官方版本。

下载官网Grafana-Windows版本并运行。测试访问localhost:3000。若localhost:3000能正常访问,则返回刷新localhost:3333,发现也可正常访问。

image_1cj1ko4k71nslkak9srv7q6ih4b.png-86.2kB image_1cj1kos681ud91puskt4jlg1l24o.png-81.4kB image_1cj1kp93s172e1pm61fk219qosl755.png-96.6kB

此时,localhost:3000使用的是官方发行版本的前端资源,需修改配置文件,使其指向开发目录中的资源。 关闭Grafana官方版本服务器,打开\grafana-5.2.1\conf\defaults.iniapp_mode更改为development,静态文件路径,使其指向开发目录中的/pulic文件夹。

image_1cj2k1e61n3ctba127o4ab5f99.png-151.2kB

image_1cj1ni6m9190n1tgi6qekpn1kp46c.png-111.1kB

重新运行Grafana官方版本服务器,测试访问。

至此,环境准备完毕,可以开始汉化工作。

汉化Grafana

Grafana全部的前端文件都位于/public文件夹内,这里我们登录页面为例,介绍汉化方法。

启用Grafana官方服务器,和webpack-dev-server(运行 npm start)。

修改/public/partials/login.html文件内容,将Log in改为登录并保存,webpack-dev-server会自动编译并更新文件,在浏览器中可实时看到更改的内容。(localhost:3333)

image_1cj1lapaf1qpm78vfg71nri11jq5v.png-252.7kB

image_1cj1nr6hd17fuo001cf4a6fkv36p.png-117.3kB

打包发布中文Grafana

运行npm build命令,编译项目文件。编译压缩后的文件会输出到/buildview文件夹下,建议实际使用直接复制整个/public文件夹替换线上生产版本。(Windows版本为/public, Linux版本为/usr/share/grafana/public

image_1cj1o3bfbemks15ngkiev61276.png-77.7kB

image_1cj1o43431u0894a1cs9197bk2u7j.png-38.4kB