文档中心定制功能多语言适配

1. Accept-language

优先级：1 > 2 > 3

• 默认回滚

目标语言 > 英文 > 简体中文

👉能力说明

实现自动适配多语言功能

👉代码示例

• 获取目标语言的方法

 export function getTargetLang(isSet?: boolean): string {
  if (window.__KDRIVE_INTERNATIONALITY_LANG__) {
    return window.__KDRIVE_INTERNATIONALITY_LANG__;
  }

  const urlLanguage = getUrlParams('lang'); // 最高优先级的语言：URL lang参数
  const cookieLanguage = getCookie('lang'); // 获取cookie中的lang
  const navigatorLanguage = window.navigator.language; // 获取浏览器语言
  let current: string = (urlLanguage || cookieLanguage || navigatorLanguage)?.toLocaleLowerCase();
  const isLanguageExist = !!current; // 是否配置了language

  switch (current) {
    case 'zh-hk':
    case 'zh-tw':
    case 'zh-mo':
      current = LANGUAGE_ENUM.ZH_HK;
      break;
    case 'zh-cn':
    case 'zh':
      current = LANGUAGE_ENUM.ZH_CN;
      break;
    default:
      current = isLanguageExist ? LANGUAGE_ENUM.EN_US : LANGUAGE_ENUM.ZH_CN;
      break;
  }

  if (isSet) {
    setCookie({
      key: 'lang',
      value: current === LANGUAGE_ENUM.ZH_HK ? LANGUAGE_ENUM.ZH_TW : current,
    });
  }

  window.__KDRIVE_INTERNATIONALITY_LANG__ = current;

  return current;
}

• 配置翻译资源

• en-US.json

{
  "menu": {
    "title": "Cross-network File Transfer",
    "description":"File Intranet/Extranet Transfer Tool"
  }
}

• zh-CN.json

{
  "menu": {
    "title": "跨网文件传输",
    "description":"文件内外网传输工具"
  }
}

• zh-HK.json

{
  "menu": {
    "title": "跨網文件傳輸",
    "description":"檔案內外網傳輸工具"
  }
}

多语言适配的初始化配置

import i18n from 'i18next';
import { initReactI18next } from 'react-i18next';
import us from './locales/en-US.json';
import cn from './locales/zh-CN.json';
import hk from './locales/zh-HK.json';
import { getTargetLang } from './utils/util';
/*
LANGUAGE_ENUM配置
export enum LANGUAGE_ENUM {
  ZH_CN = 'zh-CN',
  ZH_HK = 'zh-HK',
  EN_US = 'en-US',
  ZH_TW = 'zh-TW',
}
*/
import { LANGUAGE_ENUM } from '../../types/global';

// 获取目标语言
const targetLang = getTargetLang();

i18n.use(initReactI18next).init({
  resources: {
    [LANGUAGE_ENUM.EN_US]: { translation: us },
    [LANGUAGE_ENUM.ZH_CN]: { translation: cn },
    [LANGUAGE_ENUM.ZH_HK]: { translation: hk },
  },
  lng: targetLang,
  fallbackLng: LANGUAGE_ENUM.ZH_CN,
  supportedLngs: [LANGUAGE_ENUM.ZH_CN, LANGUAGE_ENUM.ZH_HK, LANGUAGE_ENUM.EN_US],
});

export default i18n;

• 功能实现

1. 在入口文件导入多语言适配的初始化配置文件
2. 实现

• 方案一：使用 i18next 的 t 方法实现

import i18n from 'i18next';

const kdrive = await sdk.kdrive;
kdrive.header.onMounted((data: any) => {
  data.isShow = true;
  data.appList.add({
    icon: folderImg,
    title: i18n.t('menu.title'),
    description: i18n.t('menu.description'),
    key: 'transform1',
  });
});

• 方案二：在React中使用 react-i18next 的 useTranslation 方法

import React, { useEffect } from 'react';
import { useTranslation } from 'react-i18next';
import sdk from '../libs/sdk';
import folderImg from '../assets/filetransfer.png';

const Plugin = () => {
  const { t } = useTranslation();

  const addEntrance = async () => {
    // 这里插件按需异步加载资源报引入sdk.xxx
    const kdrive = await sdk.kdrive;
    kdrive.header.onMounted((data: any) => {
      data.isShow = true;
      data.appList.add({
        icon: folderImg,
        title: t('menu.title'),
        description: t('menu.description'),
        key: 'transform1',
      });
    });
  };

  useEffect(() => {
    addEntrance();
  }, []);

  return null;
};

export default React.memo(Plugin);

👉效果截图

• 简体中文

• 英文

• 繁体中文