正文

国际化多语言方案i18n/classgooglesheetsv4api在线文档同步json(代码片段)

ThinkerWing  ThinkerWing  2023-03-22  651

关键词：

国际化多语言方案 i18n / class google sheets v4 api 在线文档同步json

文章目录

国际化多语言方案 i18n / class google sheets v4 api 在线文档同步json
前言
一、参考链接
二、使用步骤
三、使用演示
四、代码
五、另外一种实现代码

前言

提示：以下是本篇文章正文内容，下面案例可供参考

一、参考链接

这次用到的在线excel https://docs.google.com/spreadsheets/d/1A0Vf_qSWuGD-lY-mrktUwrWVWL9tdLMhoAFgY27bKtc/edit#gid=0

文档：https://developers.google.com/sheets/api/reference/rest?apix=true
创建应用：https://www.appsheet.com/home/apps

二、使用步骤

创建应用，生成密钥，启用API服务

三、使用演示

运行脚本 npm run lang

生成对应结构的对象

在线excel地址

在线json格式

四、代码

excel 同步脚本代码

类目合并多单元格之后第一个位置上是空的，temp用于临时保存类目名称，listKey：组件名称，这样子的好处就是t(‘home.albums’) 如此查阅代码可读性更好，不同的组件带不同的组件名，excel也好对应查找，代码也是可读性更好。

const https = require('https');
const path = require('path');
const fs = require('fs');
const mkdirp = require('mkdirp');

const spreadsheetId = '1A0Vf_qSWuGD-lY-mrktUwrWVWL9tdLMhoAFgY27bKtc';
const apiKey = 'AIzaSyAdMMws4B9unzBrtAqORK0zM6oSi0BTadQ';
const sheetName = 'share';

const generateLanguage = (str) => 
  const data = JSON.parse(str).values;
  const langName = data.shift().slice(2); // 去掉首列
  const contentWebExt = ;
  const contentWebPage = ;
  langName.forEach((name) => 
    contentWebExt[name] = ;
    contentWebPage[name] = ;
  );
  let temp;
  data.forEach(([key, ...ts]) => 
    let listKey;
    if (key !== '') 
      // 类目合并多单元格之后 第一个位置上是空的，temp用于临时保存类目名称，listKey：组件名称
      temp = key;
      listKey = key;
     else 
      listKey = temp;
    

    langName.forEach((name, i) => 
      const message = ts[i + 1] || ts.find((e) => e);
      if (message) 
        const msg = message;
        contentWebExt[langName[i]][listKey] = 
          ...contentWebExt[name][temp],
          [ts[0]]: msg.replace(/^\\w/, (w) => w.toUpperCase(w))
        ;
      
    );
  );
  langName.forEach((name) => 
    const p = path.resolve(__dirname, `../src/locales/$name/translation.json`);
    mkdirp(path.dirname(p), (err) => 
      if (err) throw err;
      fs.writeFileSync(p, JSON.stringify(contentWebExt[name], null, 2));
    );
    // eslint-disable-next-line no-console
    console.log(`生成语言包：$name`);
  );
;

const options = 
  hostname: 'sheets.googleapis.com',
  port: 443,
  path: `/v4/spreadsheets/$spreadsheetId/values/$sheetName?key=$apiKey`,
  method: 'GET'
;

const req = https.request(options, (res) => 
  let str = '';
  res.setEncoding('utf8');
  res.on('data', (chunk) => 
    str += chunk;
  );
  res.on('end', () => 
    try 
      generateLanguage(str);
     catch (e) 
      // eslint-disable-next-line no-console
      console.log(str, e);
    
  );
);

req.on('error', (e) => 
  // eslint-disable-next-line no-console
  console.error(`problem with request: $e.message`);
);

req.end();

组件代码

import React,  useState, useEffect  from 'react';
import  useTranslation  from 'react-i18next';

const Child = () => 
    const  t, i18n  = useTranslation();
    const [lang, setLang] = useState('zh');

    useEffect(() => 
        setLang(i18n.language);
    , [i18n.language]);

    const handleChangeLang = (param) => 
        setLang(lang)
        i18n.changeLanguage(param)
        console.log(param, i18n.language);
    
    
    const langList = ['zh', 'es', 'fr', 'en']

    return (
        <div>
            langList.map(i => 
              return (
                <button onClick=() => handleChangeLang(i)>hello i</button>
              )
            )

            <p>t('home.albums')</p>
            
        </div>
    )

export default Child;

五、另外一种实现代码

通过调用Locale的静态方法来改变语言

	// 用于组件源码demo语言包
import ZhCNLang from './lang/zh';
import EnUSLang from './lang/en';

export const isObject = (val: unknown): val is Record<any, any> => val !== null && typeof val === 'object';

export const deepMerge = (target: any, newObj: any) => 
  Object.keys(newObj).forEach((key) => 
    let targetValue = target[key];
    let newObjValue = newObj[key];
    if (isObject(targetValue) && isObject(newObjValue)) 
      deepMerge(targetValue, newObjValue);
     else 
      target[key] = newObjValue;
    
  );
  return target;
;

// 组件默认语言设置
export type Lang = Record<string, any>;
const langs: Lang = 
  'zh-CN': new ZhCNLang(),
  'en-US': new EnUSLang()
;
export class Locale 
  static currentLang = 'zh-CN';
  static languages(): Lang 
    return langs[this.currentLang];
  
  static use(lang: string, newLanguages?: any) 
    if (newLanguages) 
      langs[lang] = new newLanguages();
    
    this.currentLang = lang;
  
  static merge(lang: string, newLanguages: any) 
    if (newLanguages) 
      if (langs[lang]) 
        deepMerge(langs[lang], newLanguages);
       else 
        this.use(lang, newLanguages);
      
    
  

export default Locale;

同步在线文档的脚本只需要将json转为class就行了

const getClass = function (a, obj) 
    const key = Object.keys(obj)
    let res = ''
    for (let i = 0; i < key.length; i++) 
      res += key[i] + "=" + JSON.stringify(obj[key])
    
    return "class " + a + " \\n" + res + "\\n \\n export default Lang;"
  ;

国际化多语言方案i18n/classgooglesheetsv4api在线文档同步json(代码片段)

国际化多语言方案i18n/classgooglesheetsv4api在线文档同步json文章目录国际化多语言方案i18n/classgooglesheetsv4api在线文档同步json前言一、参考链接二、使用步骤三、使用演示四、代码五、另外一种实现代码前言提示：以下是本篇文... 查看详情

国际化多语言方案i18n/classgooglesheetsv4api在线文档同步json(代码片段)

vscode使用国际化多语言插件-i18nally&vuei18n-插件使用(代码片段)

i18nAlly&Vuei18n 用户使用vscode打开代码时安装插件后可能会自动在工作区生成这行配置"vue-i18n.i18nPaths":"src\\\\common\\\\lang",注：多语言路径"i18n-ally.localesPaths":["src/common/lang"]Vue2.x配置安装npminstallvue-i18n... 查看详情

springboot多语言

springboot-参数验证提示语言动态变化的实现https://www.jianshu.com/p/dbf0400b2175SpringBoot整合国际化I18nhttps://www.2cto.com/kf/201905/808080.html我们公司的springboot国际化（多语言）解决方案，有demohttps://blog.csdn.net/pangdongh/article/de 查看详情

flutter之国际化多语言

参考技术A在说flutter国际化前，不得不提到，在uni-app中支持的Vue-i18n，两者有相似之处，也有差异的地方。本篇借鉴了三篇热门帖子Flutter中的国际化：如何写一个多语言的AppFlutter国际化完整例子Internationalization-MakeanFlutterapplicatio... 查看详情

多语言国际化(代码片段)

国际化多语言支持是现在系统通常都要具备的功能，Vue对国际化提供了很好的支持。1.安装依赖首先需要安装国际化组件，执行yarnaddvue-i18n命令，安装i18n依赖。2.添加配置在src下新建i18n目录，并创建一个index.js.importVuefrom‘vue‘im... 查看详情

react项目多语言国际化：react-i18next插件实现——本地数据篇(代码片段)

如何理解多语言国际化？图片中下拉部分已经清楚的说明了多语言国际化是什么了。个人理解：它就是我们在网站上可以通过切换语言类型来实现同一功能的不同语言展示效果。react-i18next介绍react-i18next是一个强大的React/ReactNativ... 查看详情

vue项目中实现多语言国际化(i18n）

参考技术A现在项目中很多情况下需要实现国际化，即多语言。比较常用的就是中/英文的切换。普遍常用的就是I18N了，怎么实现呢？莫急，咱们往下瞅！第一步：安装第二步：在src目录下新建一个lang文件一般有三个文件：index.js... 查看详情

yii2api接口实现国际化多语言设置(代码片段)

1)在/config/main.php下添加如下代码：‘components‘=>[‘language‘=>‘zh-CN‘,‘i18n‘=>[‘translations‘=>[‘*‘=>[‘class‘=>‘yii\\i18n\\PhpMessageSource‘,‘basePath‘=>‘@application/messages‘,//ap 查看详情

vue项目国际化(多语言)

参考技术A记录一下笔记，以下vue项目案例使用vue-cli搭建;1.使用npm命令安装所需依赖vue-i18n,此demo安装的版本为vue-i18n@8.24.2;main.js二.配置多语言包language>config>zh-hk.jslanguage>config>en.jsimportVuefrom\'vue/dist/vue.min.js\';importVueI18nfrom... 查看详情

java中如何实现多语言切换

...一个切换语言的按钮，一点击界面语言即切换成英文一、国际化开发概述　　软件的国际化：软件开发时，要使它能同时应对世界不同地区和国家的访问，并针对不同地区和国家的访问，提供相应的、符合来访者阅读习惯的页面... 查看详情

android国际化多语言切换(代码片段)

关于App国际化，之前有讲到国际化资源、字符换、布局相关，想要了解的猛戳用力抱一下APP国际化。借着本次重构多语言想跟大家聊一下多语言切换，多语言切换对于一款国际化App来讲是重中之重，并非难事，... 查看详情

uni_app下的html多语言引用及ios无用的问题

...但是还是有一个问题，plus.io.resolveLocalFileSystemURL是异步。国际化获取值需要想获取完数据才可以，于是我修改了一下jquery.i18n.properties.js文件。使用async和await完成同步。此外，为了是iOS和安卓一致，对my-xmlhttprequest.js文件也进行... 查看详情

qtapplets-国际化多语言设置(代码片段)

QtApplets-国际化多语言设置用了Qt搞了多久的开发，一直没有国际化，也就是多语言设置。今天来简单研究一下。文章目录QtApplets-国际化多语言设置1制作一个简单的界面2在Pro文件中加入翻译模块3制作TS文件4Linguist中打... 查看详情

多语言制作插件jquery.i18n.properties

在我们一个pc切图项目中，有一点需求是需要能够语言切换，首先我们能想到的就是需要程序来做了，但是客户需要前端来做，那么经过一番查找以后，我们发现了一款非常不错的插件jQuery.i18n.properties.js总体使用来说还不错，项... 查看详情

.net网站国际化策略

...件，用户群体是面向全球的，因此对应业务系统国际化就是顺理成章的事情。其实国际化重点在于多语言支持，本文就从这方面入手。多语言如上解决方案截图，BQoolCommon.Resource是多语言资源工程，下面来看看... 查看详情

angularjs国际化多语言，angular-translate教程详解，$translate.instant()为什么不生效(代码片段)

壹?引最近项目要求支持国际化多语言，由于项目用的还是angularjs，那么首当其冲的选择了angularjs封装的I18N插件angular-translate，本文主要会从三个方向展开讨论，一是基本用法，怎么用，代码是什么意思；二是问题解答，比如$tran... 查看详情

django国际化(多语言)(代码片段)

1settings.pyMIDDLEWARE=(‘django.contrib.sessions.middleware.SessionMiddleware‘,#‘corsheaders.middleware.CorsMiddleware‘,‘django.middleware.locale.LocaleMiddleware‘,#中间件加上Django国际化中间件‘django.middleware 查看详情

正文

国际化多语言方案i18n/classgooglesheetsv4api在线文档同步json(代码片段)

国际化多语言方案 i18n / class google sheets v4 api 在线文档同步json

文章目录

前言

一、参考链接

二、使用步骤

三、使用演示

四、 代码

五、 另外一种实现代码

国际化多语言方案i18n/classgooglesheetsv4api在线文档同步json(代码片段)

国际化多语言方案i18n/classgooglesheetsv4api在线文档同步json(代码片段)

vscode使用国际化多语言插件-i18nally&vuei18n-插件使用(代码片段)

springboot多语言

flutter之国际化多语言

多语言国际化(代码片段)

react项目多语言国际化：react-i18next插件实现——本地数据篇(代码片段)

vue项目中实现多语言国际化(i18n）

yii2api接口实现国际化多语言设置(代码片段)

vue项目国际化(多语言)

java中如何实现多语言切换

android国际化多语言切换(代码片段)

uni_app下的html多语言引用及ios无用的问题

qtapplets-国际化多语言设置(代码片段)

多语言制作插件jquery.i18n.properties

.net网站国际化策略

angularjs国际化多语言，angular-translate教程详解，$translate.instant()为什么不生效(代码片段)

django国际化(多语言)(代码片段)

四、代码

五、另外一种实现代码