国际化i18n

国际化是什么

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

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

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

在项目中使用国际化

在 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>