Welcome to our application
``` ### In Expressions Use `'::'` prefix in expressions: ```html {{ '::Welcome' }} {{ '::Hello, ' + name }}{{ '::You have ' + count + ' messages' }}
``` ### In Scripts Use `__m()` function: ```html ``` ## Locale Files ### Directory Structure ``` /templates// └── __locales/ ├── en-us/ │ ├── home.yml │ └── users/list.yml └── zh-cn/ ├── home.yml └── users/list.yml ``` ### File Format **`__locales/zh-cn/home.yml`**: ```yaml name: zh-cn direction: ltr timezone: +08:00 formatter: scripts.locale messages: Hello World: 你好世界 Welcome: 欢迎 "Hello, ": "你好，" Submit: 提交 "You have %d messages": "你有 %d 条消息" keys: page_title: 首页 nav_home: 首页 nav_about: 关于 script_messages: Welcome back: 欢迎回来 "Are you sure?": "你确定吗？" ``` ### Sections | Section | Description | | ----------------- | ----------------------------------- | | `name` | Locale identifier | | `direction` | Text direction (`ltr` or `rtl`) | | `timezone` | Timezone offset | | `formatter` | Custom formatter process | | `messages` | Translations for `s:trans` and `::` | | `keys` | Named translation keys | | `script_messages` | Translations for `__m()` | ## Using Translations ### HTML Templates ```html{{ '::Hello, ' + user.name }}
{{ '::You have ' + count + ' items' }} ``` ### Named Keys Named keys are used internally for translation lookup. The `keys` section in locale files provides named references for translations that can be used programmatically. ### Scripts ```typescript import { Component } from "@yao/sui"; const self = this as Component; self.ShowMessage = () => { const message = __m("Operation completed"); alert(message); }; self.Confirm = () => { return confirm(__m("Are you sure you want to delete?")); }; ``` ## Locale Detection SUI detects locale from the `locale` HTTP cookie on the server side. **Important:** `s:trans` translations are server-side rendered. This means: 1. The translation happens when the page is generated on the server 2. Changing locale via JavaScript only affects localStorage/client state 3. To apply locale changes to `s:trans` content, you must reload the page ```javascript // To change locale and have s:trans reflect the change: document.cookie = "locale=zh-CN;path=/;max-age=31536000"; location.reload(); // Required for server-side translations ``` **Cookie Priority:** 1. `locale` cookie (primary) 2. `umi_locale` cookie (fallback for CUI compatibility) 3. Browser language 4. Default (`en-us`) ### Access Current Locale ```html ... ``` ## Custom Formatter Define a custom formatter process: ```yaml # In locale file formatter: scripts.locale.format ``` **`scripts/locale.js`**: ```javascript function format(text, args) { // Custom formatting logic return text.replace(/%d/g, () => args.shift()); } ``` ## RTL Support For right-to-left languages: ```yaml # __locales/ar/home.yml name: ar direction: rtl timezone: +03:00 messages: Hello: مرحبا ``` ```html ``` ## Building Translations ### Generate Translation Files ```bash yao sui trans{{ '::Hello, ' + user.name }}