2 Unstar Star 1 Fork 0

wangnanbo / grafana-chineseTypeScript

Create your Gitee Account
Explore and code with more than 5 million developers,Free private repositories !:)
Sign up
This repository doesn't specify license. Without author's permission, this code is only for learning and cannot be used for other purposes.
grafana中文版本 spread retract

Clone or download
汉化笔记.md 6.12 KB
Copy Edit Web IDE Raw Blame History
w958660278 authored 2018-07-24 12:42 . v5.2.1

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

Comment ( 0 )

Sign in for post a comment

TypeScript
1
https://gitee.com/nanbowang/grafana-chinese.git
git@gitee.com:nanbowang/grafana-chinese.git
nanbowang
grafana-chinese
grafana-chinese
master

Search