JianghuJS-Internationalization i18n

12002

1. Concept

• What is Internationalization

Internationalization (abbreviated as i18n) refers to the design and development of web pages that take into account different languages, cultures, and regions, allowing the web pages to adapt to users from various linguistic and regional backgrounds for global usability.

The primary goal of internationalization is to enable web pages to function in multilingual environments, including character sets, date and time formats, currency units, number formats, text direction, and more. By utilizing internationalization techniques, web pages can automatically switch between different language environments, making it easier for users to interact with the web pages.

In web development, specific internationalization tools or frameworks are typically employed to implement internationalization features, such as providing multilingual resource files and using internationalization identifiers. Additionally, when designing and developing web pages, it is essential to adhere to certain internationalization norms and standards, such as Unicode character encoding and HTML language standards.

2. Using Internationalization in Projects

• Configuration Steps in jianghujs

In the jianghujs project, the use of web page internationalization typically requires the following configuration steps:

1. config/config.default.js: Add the language property en/zh/...

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

2. _constant_ui Data Table: Add corresponding constants for pageId and the corresponding language columns

    CREATE TABLE `_constant_ui` (  
      `id` int(11) NOT NULL AUTO_INCREMENT,  
      `constantKey` varchar(255) DEFAULT NULL,  
      `constantType` varchar(255) DEFAULT NULL COMMENT 'Constant type; object, array',  
      `pageId` varchar(255) DEFAULT 'all' COMMENT 'Page id',  
      `desc` varchar(255) DEFAULT NULL COMMENT 'Description',  
      `en` text COMMENT 'Constant content; object, array',  
      `zh` text COMMENT 'Constant content; object, array',  
      `operation` varchar(255) DEFAULT 'insert' COMMENT 'Operation; insert, update, jhInsert, jhUpdate, jhDelete, jhRestore',  
      `operationByUserId` varchar(255) DEFAULT NULL COMMENT 'Operator userId',  
      `operationByUser` varchar(255) DEFAULT NULL COMMENT 'Operator username',  
      `operationAt` varchar(255) DEFAULT NULL COMMENT 'Operation time; 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. Data Retrieval: Add pageHook to the corresponding page in the page table and assign it to page variables through service methods

    // 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. Page Rendering: Retrieve the corresponding values from variables in the page

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