JianghuJS-国际化i18n

12002

1、概念

• 国际化是什么

国际化（Internationalization，缩写为i18n）指的是在设计和开发网页时，考虑到不同的语言、文化和地区，使得网页可以适应不同的语言和地区的用户，以便于在全球范围内使用。

国际化的主要目标是使得网页可以适应多语言环境，包括字符集、日期和时间格式、货币单位、数字格式、文本方向等等。通过使用国际化技术，可以使得网页能够在不同的语言环境下自动切换，使得用户可以更加方便地使用网页。

在网页开发中，通常会使用特定的国际化工具或框架来实现国际化功能，比如通过提供多语言资源文件、使用国际化标识符等方式来实现。同时，在设计和开发网页时，还需要注意一些特定的国际化规范和标准，比如Unicode字符编码、HTML语言标准等等。

2、在项目中使用国际化

• jianghujs中的配置步骤

在 jianghujs project 项目中，网页国际化的使用通常需要配置如下步骤：

1. config/config.default.js：增加language属性en/zh/…

    // appId: '...',
    language: 'zh', // en | zh | ...

2. _constant_ui数据表：增加对应pageId的常量，和对应语言列

    CREATE TABLE `_constant_ui` (
      `id` int(11) NOT NULL AUTO_INCREMENT,
      `constantKey` varchar(255) DEFAULT NULL,
      `constantType` varchar(255) DEFAULT NULL COMMENT '常量类型; object, array',
      `pageId` varchar(255) DEFAULT 'all' COMMENT '页面id',
      `desc` varchar(255) DEFAULT NULL COMMENT '描述',
      `en` text COMMENT '常量内容; object, array',
      `zh` text COMMENT '常量内容; object, array',
      `operation` varchar(255) DEFAULT 'insert' COMMENT '操作; insert, update, jhInsert, jhUpdate, jhDelete jhRestore',
      `operationByUserId` varchar(255) DEFAULT NULL COMMENT '操作者userId',
      `operationByUser` varchar(255) DEFAULT NULL COMMENT '操作者用户名',
      `operationAt` varchar(255) DEFAULT NULL COMMENT '操作时间; E.g: 2021-05-28T10:24:54+08:00 ',
      PRIMARY KEY (`id`) USING BTREE,
      UNIQUE KEY `pageId_constantKey_unique` (`constantKey`,`pageId`) USING BTREE
    ) ENGINE=InnoDB AUTO_INCREMENT=5 DEFAULT CHARSET=utf8mb4;

3. 数据获取：page table 相应页面增加pageHook通过service方法assign到页面变量里

    // pageHook
    {
      "beforeHook":[
        {"field": "constantUiMap", "service": "constantUi", "serviceFunc": "getConstantUiMap"},
      ]
    }

    // app/service/constantUi.js
    async getConstantUiMap() {
      const { jianghuKnex } = this.app;
      const { pageId } = this.ctx.packagePage;
      const { language } = this.app.config;
      const constantUiList = await jianghuKnex(tableEnum._constant_ui).whereIn('pageId', ['all', pageId]).select();
      const constantUiMap = Object.fromEntries(
        constantUiList.map(obj => [obj.constantKey, JSON.parse(obj[language] || '{}')])
      );
      return constantUiMap;
    }

4. 页面渲染：页面里根据变量取出相应的值

    <!-- seo -->
    <div class="text-center p-4 jianghu-footer-copyright">
      <$ constantUiMap.footer.copyright $>
    </div>