diff --git a/docs/_sidebar.md b/docs/_sidebar.md index 96f2071..65b8f9a 100644 --- a/docs/_sidebar.md +++ b/docs/_sidebar.md @@ -1,9 +1,10 @@ - Getting started - [Quick Start](getting-started.md) - Customization - - [Request](request.md) - [Configuration](configuration.md) - [API Configuration](API-configuration.md) + - [I18n](i18n.md) + - [Request](request.md) - Guide - [Deploy](deploy.md) - [Change Log](change-log.md) diff --git a/docs/i18n.md b/docs/i18n.md new file mode 100644 index 0000000..1bfedd8 --- /dev/null +++ b/docs/i18n.md @@ -0,0 +1,73 @@ +# globalization + +## Add language + +Take Japanese as an example. + +1. Add a language pack local file, `ja` is the Japanese language code, and a list of languages ​​that support translation [有道智云](http://ai.youdao.com/docs/doc-trans-api.s#p05), the `src/locales/ja/messages.json` file will be generated after running the following command. + + ```bash  + npm run add-locale ja + ``` + +2. Extract the fields in the code that need to be translated, ie `?message`, `` i18n.t`message `` in the `message` field, run the following command after `src/locales/ja /messages.json` will appear after the extracted field configuration. + + ```bash  + npm run extract + ``` + + You will see the following information: + + ```bash + Catalog statistics: + ┌─────────────┬─────────────┬─────────┐ + │ Language │ Total count │ Missing │ + ├─────────────┼─────────────┼─────────┤ + │ en (source) │ 52 │ - │ + │ ja │ 52 │ 52 │ + │ zh │ 52 │ 0 │ + └─────────────┴─────────────┴─────────┘ + ``` + +3. At the same time, we have added the relevant configuration in `src/utils/config.js`. + + ```javascript + { + ... + i18n: { + languages: [ + ... + { + key:'ja', + title: '日语', + flag: '/japanese.svg', + }, + ], + }, + } + ``` + + > Routing related effects, after the configuration `npm run start` takes effect after restart. + +4. Use the built-in commands for automatic translation. You will see the translated configuration in `src/locales/ja/messages.json`. + + ```bash + npm run trans:only + ``` + + You will see the following information: + + ```bash + start: en -> ja + ... + youdao: en -> ja: Unpublished -> 未発表 + youdao: en -> ja: Update -> 更新 + youdao: en -> ja: Update User -> ユーザーの更新 + youdao: en -> ja: Username -> 名 + ... + All translations have been completed. + ``` + + > `npm run trans` will execute `npm run extract` and `npm run trans:only` in order. + +5. Finally, you can adjust the inaccurate fields in `src/locales/ja/messages.json`. Start the development mode `npm run start`, open [http://localhost:7000/ja/login](http://localhost:7000/ja/login) and you will see the Japanese version of the app. diff --git a/docs/zh-cn/_sidebar.md b/docs/zh-cn/_sidebar.md index c8efceb..b42c711 100644 --- a/docs/zh-cn/_sidebar.md +++ b/docs/zh-cn/_sidebar.md @@ -1,9 +1,10 @@ - 入门 - [快速上手](zh-cn/getting-started.md) - 定制化 - - [http请求](zh-cn/request.md) - [配置项](zh-cn/configuration.md) - [接口配置](zh-cn/API-configuration.md) + - [国际化](zh-cn/i18n.md) + - [http 请求](zh-cn/request.md) - 指南 - [部署](zh-cn/deploy.md) - [更新日志](zh-cn/change-log.md) diff --git a/docs/zh-cn/i18n.md b/docs/zh-cn/i18n.md new file mode 100644 index 0000000..a68ae78 --- /dev/null +++ b/docs/zh-cn/i18n.md @@ -0,0 +1,73 @@ +# 国际化 + +## 新增应用语言 + +以新增日语为例。 + +1. 添加语言包本地文件,`ja` 为日语的语言代码,支持翻译的语言列表参考 [有道智云](http://ai.youdao.com/docs/doc-trans-api.s#p05),运行下面命令后会生成 `src/locales/ja/messages.json` 文件。 + + ```bash + npm run add-locale ja + ``` + +2. 提取代码中需要翻译的字段,即 `message`、`` i18n.t`message `` 中 `message` 字段,运行下面命令后 `src/locales/ja/messages.json` 将会出现提取后的字段配置。 + + ```bash + npm run extract + ``` + + 你将看到如下信息: + + ```bash + Catalog statistics: + ┌─────────────┬─────────────┬─────────┐ + │ Language │ Total count │ Missing │ + ├─────────────┼─────────────┼─────────┤ + │ en (source) │ 52 │ - │ + │ ja │ 52 │ 52 │ + │ zh │ 52 │ 0 │ + └─────────────┴─────────────┴─────────┘ + ``` + +3. 与此同时,我们在 `src/utils/config.js` 新增相关配置。 + + ```javascript + { + ... + i18n: { + languages: [ + ... + { + key:'ja', + title: '日语', + flag: '/japanese.svg', + }, + ], + }, + } + ``` + + >  路由相关效果,配置后 `npm run start` 重启后生效。 + +4. 使用内置的命令进行自动翻译,在 `src/locales/ja/messages.json` 中将会看到翻译后的配置。 + + ```bash + npm run trans:only + ``` + + 你将看到如下信息: + + ```bash + start: en -> ja + ... + youdao: en -> ja: Unpublished -> 未発表 + youdao: en -> ja: Update -> 更新 + youdao: en -> ja: Update User -> ユーザーの更新 + youdao: en -> ja: Username -> 名 + ... + All translations have been completed. + ``` + + > `npm run trans` 将会依次执行 `npm run extract` 和 `npm run trans:only` + +5. 最后,可以在 `src/locales/ja/messages.json` 中对翻译不准确的的字段进行调整。启动开发模式 `npm run start`,打开 [http://localhost:7000/ja/login](http://localhost:7000/ja/login),你将看到日语版本的应用。