多语言方案介绍与迁移(一) - Google Sheets

827 阅读2分钟

介绍

现在,全球化深度影响我们的生活,越来越多的企业选择开展海外业务,而多语言的支持作为海外发展的前提,必须做好这部分基础建设。

常见的多语言方案使用json或js文件存放翻译文本对象,再通过i18n库根据语言、模块获取到不同的对象,最后利用react等页面渲染库更新至页面。

有些项目在这流程中,翻译文本的获取与更新是通过开发者手动输入翻译文本或解析excel文件实现的。这一过程可以通过自动化脚本优化流程,节省开发时间。

Google-Sheet

Google Sheets提供了API访问的方式,利用API,我们可以拉取翻译文本并存储在json或js文件中。

flow.png

1. 获取身份凭证

Google Sheets的API需要创建一个服务账号才能使用。

  1. 转到Google 开发者控制台 1.jpg
  2. 点击启用 API 与服务
  3. 搜索并启用 Sheets API 2.jpg
  4. 跳转到凭证管理
  5. 创建服务账号凭证 3.jpg
  6. 输入详情(权限设置可跳过)
  7. 回到凭证管理页面并点击创建的服务账号
  8. 点击打开密钥 tab 并添加 JSON 密钥 4.jpg

2. 创建表格

创建一个表格用于同步翻译文本。例如:

namear-EGen-UShi-IN
FeedbackردودFeedbackप्रतिपुष्टि

3. 共享表格

在表格的右上角,点击共享。指定共享人为服务账号,填入服务账号的邮箱。 5.jpg

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方案

多语言方案介绍与迁移(三) - 技巧与迁移

Google Sheets API

开启掘金成长之旅!这是我参与「掘金日新计划 · 2 月更文挑战」的第 4 天