Redash 汉化,支持国际化

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

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

 

1、在Redash的目录下的package.json中,添加:

"angular-translate": "^2.18.1",

Redash 汉化,支持国际化_第1张图片

 

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

import 'angular-translate';

Redash 汉化,支持国际化_第2张图片

 

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

'pascalprecht.translate'

            

Redash 汉化,支持国际化_第3张图片

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页面中需要进行国际化翻译的内容,格式如下: 

修改前: 

Dashboards

修改后: 

{{ 'Dashboards' | translate }}

 

你可能感兴趣的:(Redash)