前言
最近一直在忙，都没时间写技术文章了，主要是接手了一个Datahub汉化的工作。
DataHub是由Linkedin开源的，为现代数据栈而生的元数据平台。目的就是为了解决多种多样数据生态系统的元数据管理问题，它提供元数据检索、数据发现、数据监测和数据监管能力，帮助大家解决数据管理的复杂性。
datahub的网站是全英文的，我的工作就是把它翻译成中文，便于客户使用。
datahub-web-react是前端代码库，是基于react进行开发的，我们所有的汉化工作都是对这个文件进行修改。
如何在本地进行开发调试呢？继续看下去
下载
下载datahub源码，git clone太慢了，可以直接下载zip包，解压后放到我们的文件夹中。
更多关于datahub的信息，请查看官方文档
开发环境
- mac pro
- node.js v14.13.1
搭建步骤
1、安装docker
brew install --cask --appdir=/Applications docker
查看版本号，确认是否安装成功
docker --version
2、安装python3.7+
brew install python@3.7
查看版本号，确认是否安装成功
python3 --version
3、执行以下命令：
python3 -m pip install --upgrade pip wheel setuptools
python3 -m pip install --upgrade acryl-datahub
python3 -m datahub version
4、本地部署DataHub实例
datahub docker quickstart
如果你使用 datahub docker quickstart 报错了，看了网友的解释，如下图，原因是因为他会去这个网站找个文件，这个网站在中国被锁了，访问不了，所以只能克隆下来整个项目，然后进入目录里执行。
python3 -m datahub docker quickstart --quickstart-compose-file ./docker/quickstart/docker-compose-without-neo4j.quickstart.yml
这一步骤耗时很长，需要耐心等待
报错；Error response from daemon: Ports are not available: exposing port TCP 0.0.0.0:3306 -> 0.0.0.0:0: listen tcp 0.0.0.0:3306: bind: address already in use
MySQL默认端口与计算机上已经运行的软件冲突
解决；
重新指定一个端口
python3 -m datahub docker quickstart --quickstart-compose-file ./docker/quickstart/docker-compose-without-neo4j.quickstart.yml --mysql-port 53306
成功啦
完成此步骤后，您应该能够在浏览器中导航到http://localhost:9002 上的DataHub UI。您可以同时使用datahub作为用户名和密码进行登录。
输入用户名、密码datahub
可以看到现在无数据。
5、要摄取样例元数据，在终端上运行以下CLI命令
python3 -m datahub docker ingest-sample-data
有数据啦
到此一个完整的环境就搭建完成了。也启动成功了，能在本地进行访问了。
前端UI界面汉化
我们能够看到，现在的页面上都是英文，但我们希望以中文的形式展示，但官方不支持中文，就需要我们对他进行汉化了。
这是一个成熟的项目，要对他的前端UI进行整改，但要有选择的汉化，因为如果采用直接翻译，有些英文组合词就会丧失它的真正含义，所以需要在前端创建一个英语翻译汉语的常用语翻译库。只对一些标签类的描述翻译，列表等从数据库中获取的数据不翻译。
想要将项目国际化，就需要采用一些国际化的插件，目前常用的几款插件是react-i18next、act-translated、translated等。
方案1：react-i18next
资料
安装
yarn add react-i18next i18next --save
文件配置
在src下新建i18n文件夹，以存放国际化相关配置。
i18n中分别新建三个文件：
- config.ts
- en.json
- zh.json
config.ts
import i18n from 'i18next';
import { initReactI18next } from 'react-i18next';
import translation_en from './en.json';
import translation_zh from './zh.json';
const resources = {
en: {
translation: translation_en,
},
zh: {
translation: translation_zh,
},
};
i18n.use(initReactI18next).init({
resources,
// 默认语言 zh/en 中文/英文
lng: 'zh',
interpolation: {
escapeValue: false,
},
});
zh.json
{
"Welcome back": "欢迎回来",
"Analytics": "分析",
"View DataHub usage analytics": "查看 DataHub 使用情况分析",
"Ingestion": "元数据摄取",
"Connect DataHub to your organization's data sources": "将DataHub连接到组织的数据源",
"Govern": "治理",
"Glossary": "词汇表",
"View and modify your data dictionary": "查看和修改您的数据字典",
"Domains": "域",
}
en.json
{
"Welcome back": "Welcome back",
"Analytics": "Analytics",
"View DataHub usage analytics": "View DataHub usage analytics",
"Ingestion": "Ingestion",
"Connect DataHub to your organization's data sources": "Connect DataHub to your organization's data sources",
"Govern": "Govern",
"Glossary": "Glossary",
"View and modify your data dictionary": "View and modify your data dictionary",
"Domains": "Domains",
"Manage related groups of data assets": "Manage related groups of data assets",
"Manage your DataHub settings": "Manage your DataHub settings"
}
组件内使用
静态短语翻译
// the hook 组件顶部引用
// 翻译hook
import { useTranslation } from 'react-i18next';
function MyComponent () {
// 组件内部引用
// 翻译hook
const { t } = useTranslation();
return <h1>{t('Welcome to React')}</h1>
}
动态短语翻译
在翻译过程中，我们发现有些需要翻译的地方是动态获取的，那我们如何来做呢？
1、解决方法1
一般我们可以这样做
t("you have")${number}t("Apple")
但是，英语的语序和中文是不一样的，直译不是很流畅。
2、解决方法2
// the hook 组件顶部引用
// 翻译hook
import { useTranslation } from 'react-i18next';
function MyComponent () {
// 组件内部引用
// 翻译hook
const { t } = useTranslation();
const dynamicText = `Would you like to assign the role ${roleToAssign?.name} to ${username}?`
return <h1>{dynamicText}</h1>
}
第一步、修改中英文翻译配置文件
英文文件 en.json
{
"assign_role_text_success": "Would you like to assign the role {{rolename}} to {{username}}"
}
使用{{}}将动态字段包裹起来
中文文件 zh.json
{
"assign_role_text_success": "你想把{{rolename}}角色分配给{{username}}"
}
第二步、在组件内
const dynamicText = `${t("assign_role_text_success", {username: username,rolename: roleToAssign?.name})}?`
这样处理即可
非组件内
直接使用i18next库进行翻译
import { t } from "i18next";
export const DomainsOnboardingConfig: OnboardingStep[] = [
{
id: DOMAINS_CREATE_DOMAIN_ID,
selector: `#${DOMAINS_CREATE_DOMAIN_ID}`,
title: t('Create a new Domain'),
content: (
<Typography.Paragraph>
<p>
Click here to create a new <strong>Domain</strong>.
</p>
</Typography.Paragraph>
),
}
]
切换语言
在src/components/shared文件下新建切换组件HeaderTranslate.tsx
import React from 'react';
import { TranslationOutlined } from '@ant-design/icons';
import { Dropdown, Button } from 'antd';
import type { MenuProps } from 'antd';
import { useTranslation } from 'react-i18next'
export const HeaderTranslate: React.FC = () => {
const { i18n } = useTranslation()
const items: MenuProps['items'] = [
{
key: '1',
label: (
<p onClick={() => { i18n.changeLanguage('zh'); }}>简体中文</p>
),
},
{
key: '2',
label: (
<p onClick={() => { i18n.changeLanguage('en'); }}>English</p>
),
},
]
return (
<span>
<Dropdown menu={{ items }}>
<Button type="text" aria-hidden="true" onClick={(e) => e.preventDefault()}>
<TranslationOutlined />
</Button>
</Dropdown>
</span>
);
};
在当前目录下的HeaderLinks.tsx组件内引用
import { HeaderTranslate } from './HeaderTranslate';
最终页面效果：
启动前端项目
修改前端UI后，在datahub-web-react目录下
yarn start
启动成功后，访问http://localhost:3000/assets 即可看到我们修改后的内容。
方案2、act-translated
这个插件也是基于react的翻译插件，具体怎么使用不再赘述，可以查看官方文档。
方案3、translated
这个插件支持全文翻译，但它不是基于react，故此未采用。
部署
汉化完成后，需要部署到我们自己的服务器上，这个就是后端来做了。
总结
这个网站的汉化工作真的琐碎，里面涉及到很多专业名词的翻译，本人的英语水平有限，翻译的也很一般。一直在使用一个翻译神器，它里面对一些专业名词的翻译还算专业。对我的翻译工作加成很大。
参考文章
