介绍
现在,全球化深度影响我们的生活,越来越多的企业选择开展海外业务,而多语言的支持作为海外发展的前提,必须做好这部分基础建设。
常见的多语言方案使用json或js文件存放翻译文本对象,再通过i18n库根据语言、模块获取到不同的对象,最后利用react等页面渲染库更新至页面。
有些项目在这流程中,翻译文本的获取与更新是通过开发者手动输入翻译文本或解析excel文件实现的。这一过程可以通过自动化脚本优化流程,节省开发时间。
Google-Sheet
Google Sheets提供了API访问的方式,利用API,我们可以拉取翻译文本并存储在json或js文件中。
1. 获取身份凭证
Google Sheets的API需要创建一个服务账号才能使用。
- 转到Google 开发者控制台
- 点击启用 API 与服务
- 搜索并启用 Sheets API
- 跳转到凭证管理
- 创建服务账号凭证
- 输入详情(权限设置可跳过)
- 回到凭证管理页面并点击创建的服务账号
- 点击打开密钥 tab 并添加 JSON 密钥
2. 创建表格
创建一个表格用于同步翻译文本。例如:
| name | ar-EG | en-US | hi-IN |
|---|---|---|---|
| Feedback | ردود | Feedback | प्रतिपुष्टि |
3. 共享表格
在表格的右上角,点击共享。指定共享人为服务账号,填入服务账号的邮箱。
4. 拉取翻译
安装google-spreadsheet。yarn add --dev google-spreadsheet。
使用上面创建的JSON密钥进行鉴权。
// 拉取翻译
async function pullTranslate({
sheetID,
serviceAccount,
}) {
console.log('connecting to google sheet');
const doc = new GoogleSpreadsheet(sheetID);
// Initialize Auth - see https://theoephraim.github.io/node-google-spreadsheet/#/getting-started/authentication
await doc.useServiceAccountAuth(serviceAccount);
await doc.loadInfo(); // loads document properties and worksheets
const sheetCount = doc.sheetCount;
for (let i = 0; i < sheetCount; i++) {
const currentSheet = doc.sheetsByIndex[i];
console.log('get google sheet ' + currentSheet.title);
const infoList = await currentSheet.getRows();
storageTranslate(
infoList, // 表内容,例如:[{表头1:字段内容, 表头2:字段内容}, {表头1:字段内容}]
currentSheet.title, // 当前模块名称(当前表名)
currentSheet.headerValues.slice(1), // 语言列表);
currentSheet.headerValues[0], // 字段标识的表头名称,例如 name
);
if (i === sheetCount - 1) {
console.log(chalk.green('SUCCESS ') + '拉取成功'
}
}
}
总结
本文介绍了如何使用google sheets拉取翻译,在后续翻译更新时,只需执行脚本拉取最新翻译即可,减少了重复低效的手动复制粘贴工作。并且可以由产品、运维多方同时直接编辑google sheets,提高效率。
下篇文章我将分享在next.js的ssg的页面渲染方式下,如何实现多语言。
参考链接
多语言方案介绍与迁移(二) - 结合nextjs-ssg方案
开启掘金成长之旅!这是我参与「掘金日新计划 · 2 月更文挑战」的第 4 天