redash使用与开发(三): 汉化

桃扇骨 2023-07-04 11:21 12阅读 0赞

虽然我自己使用英文界面并没有什么困难，可是为了让其他用户更好地使用该系统，汉化是必须的。我原以为汉化会是一个比较困难的过程，可实际操作起来还是挺轻松的。

redash的前端页面源代码主要集中在 `redash/client/app`文件夹中，应用了 **React**, **Angular**等框架，可惜我不是一个前端，目前也没有想法成为一个前端，所以对具体的构成不是很清楚。但如果只是想汉化和简单修改页面的话还是不难的，当然，前提是具备基础的语法知识

### 工具 ###

VSCODE + 浏览器F12工具

### 方法 ###

*  情形1：找到你想要汉化的语句，比如`Create Dashboard`, 你想翻译成`新建仪表盘`，很简单，去vscode中进行全局搜索，（就是那个放大镜图标），定位到`Create Dashboard`所在，进行修改就可以了。注意要分辨是不是控制显示的语句，别把类名改了
 *  情形2：全局搜索结果太多，比如想把`Dashboard`翻译成`仪表盘`，但是整个项目中Dashboard字段实在是太多了，这时可以结合浏览器F12工具进行类名定位，也可以根据网页所在位置进行推测。

### 成果 ###

![homepage][]![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JhaWR1XzQxNzQzMTk1_size_16_color_FFFFFF_t_70]

### 后记 ###

*  这个翻译方式有点傻瓜，按理说应该存在一个语言选择的下拉框，听说redash之后的版本可能会加入这个功能
 *  angular部分的汉化应该可以通过语言选择完成，我在其他地方见到过，感兴趣的可以去找一下

[homepage]: https://img-blog.csdnimg.cn/20200210215814258.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JhaWR1XzQxNzQzMTk1,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JhaWR1XzQxNzQzMTk1_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200210215915121.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JhaWR1XzQxNzQzMTk1,size_16,color_FFFFFF,t_70