Redash 汉化，支持国际化

本文主要介绍的是AngularJS部分的汉化。

Angular在其官网已有国际化相关的文档描述。详情可移至Angular官网查看。

 

1、在Redash的目录下的package.json中，添加：

"angular-translate": "^2.18.1",

 

2、主目录的\client\app\config\index.js文件中，头部添加：

import 'angular-translate';

 

然后在下面的requirement变量中添加：

'pascalprecht.translate'

            

3、接着在主目录的\client\app\index.js文件中添加(自行比对代码新增部分)：

import ngModule from '@/config';
import ZHinternationalization from '@/i18n/zh';
import ENinternationalization from '@/i18n/en';

ngModule.config(($locationProvider, $compileProvider, uiSelectConfig, $translateProvider) => {
  $compileProvider.debugInfoEnabled(false);
  $compileProvider.aHrefSanitizationWhitelist(/^\s*(https?|data|tel|sms|mailto):/);
  $locationProvider.html5Mode(true);
  uiSelectConfig.theme = 'bootstrap';

  $translateProvider
    .translations('zh', ZHinternationalization)
    .translations('en', ENinternationalization)
    .preferredLanguage('zh');
});

4、在app目录下创建i18n文件夹，在文件夹中创建zh.js和en.js文件

文中添加翻译的内容：

//zh.js
const internationalization = {
  'Dashboards': '仪表板'
}
 
export default ZHinternationalization;

//en.js
const internationalization = {
  'Dashboards': 'Dashboards'
}
 
export default ENinternationalization;

5、修改HTML页面中需要进行国际化翻译的内容，格式如下： 

修改前： 

<a class="btn" href="dashboards">Dashboards</a>

修改后： 

<a class="btn" href="dashboards">{{ 'Dashboards' | translate }}</a>