0.1.2 • Published 5 months ago

nangongmoyan-i18n-toolkit v0.1.2

Weekly downloads
-
License
MIT
Repository
github
Last release
5 months ago

nangongmoyan-i18n-toolkit

nangongmoyan-i18n-toolkit是一个fork i18n-toolkit 项目而生成的多语言工具包

prefix - operation

在正式使用之前,我们需要进行 Google Sheets 授权一些相关配置

1.Create Google Cloud Project(新建 Google Cloud 项目)

链接:https://console.cloud.google.com/projectcreate

create

image.png

success created

image.png

2. Enable Google Sheets API And Apps Script API(启用Google Sheets API And Apps Script API)

Enable Google Sheets API

image.png

image.png

Enable Apps Script API

image.png

image.png

3. OAuth consent screen(OAuth 同意屏幕)

链接:https://console.cloud.google.com/apis/credentials/consent

3.1. Select User Type(选择用户类型)

这边我选择External(任何拥有 Google 帐户的测试用户均可使用)

image.png

3.2. Edit app registration(填写相关信息)

image.png

3.3. Add Scopes(添加授权范围)

image.png

  • Checked All Google Sheets API (所有都勾选上)

image.png

  • Checked All Apps Script API (所有都勾选上)

image.png

3.4. Summary(概括)

image.png

4. Create Credential(创建凭证)

链接:https://console.cloud.google.com/apis/credentials

image.png

image.png

image.png

5. Create Google Sheets (创建 Google Sheets)

链接:https://docs.google.com/spreadsheets/u/0/

5.1. Blank spreadsheets(创建空白电子表格)

image.png

5.2. Add Apps Script (添加脚本)

image.png

将下面脚本添加进去

function onEdit(e) {
  AutoGenerateKey(e.range.getRowIndex(), e.value);
}

// 自动生成hash key
function AutoGenerateKey(rowIndex, value) {
  if (value == undefined) return;
  var targetColumn = "A";
  var sheet = SpreadsheetApp.getActive();
  var keyRange = sheet.getRange(targetColumn + rowIndex);
  var keyValue = keyRange.getValue();
  if (!!keyValue) return;
  var dateStr = new Date().toISOString();
  var rawHash = Utilities.computeDigest(
    Utilities.DigestAlgorithm.MD5,
    value + dateStr
  );
  var txtHash = "";
  for (i = 0; i < rawHash.length; i++) {
    var hashVal = rawHash[i];
    if (hashVal < 0) {
      hashVal += 256;
    }
    if (hashVal.toString(16).length == 1) {
      txtHash += "0";
    }
    txtHash += hashVal.toString(16);
  }
  sheet.getRange(targetColumn + rowIndex).setValue(txtHash);
}

image.png

6. 添加配置文件i18n.config.json到项目根目录

{
  "apiKey": "上面第四步生成的key",
  "outputDir": "i18n", // 输出目录
  "spreadsheetId": "<google表格url中很长的那一段>",
  "tableIndex": 0, // 谷歌表格第一个子表
  "langues": ["zh-CN", "en-US"] // 支持的语言
}

7. 表格填写

当在对应语言下面填入相关内容,第一列会根据脚本自动生成一个hash值

image.png

usage

Installation

Npm

npm install nangongmoyan-i18n-toolkit

Yarn

yarn add nangongmoyan-i18n-toolkit

添加i18n.config.json配置文件

{
  "apiKey": "上面第四步生成的key",
  "outputDir": "i18n", // 输出目录
  "spreadsheetId": "<google表格url中很长的那一段>",
  "tableIndex": 0, // 谷歌表格第一个子表
  "langues": ["zh-CN", "en-US"] // 支持的语言
}

在package.json中的scripts中添加

"intl": "nangongmoyan-i18n-toolkit"

命令行执行npm run intl

npm run intl

就会将对应语言的json文件下载下来:

image.png

在VS Code中可以显示语言对应的具体文案

  • 安装VS Code 插件: i18n ally

image.png

  • 显示英文

Tips:点击右下角红框可以选择在编辑器中显示对应语言的文本

image.png

  • 显示中文

image.png

页面显示

image.png

点击 changeLanguage 会切换成另外一个语言

image.png

上面demo链接, 本地执行npm start就可以看到效果