chore: update i18n doc

web-infra-dev · Sep 21, 2023 · 6d723f0 · 6d723f0
1 parent 00b695e
commit 6d723f0
Show file tree

Hide file tree

Showing 4 changed files with 60 additions and 84 deletions.
diff --git a/packages/document/docs/en/guide/basic/static-assets.mdx b/packages/document/docs/en/guide/basic/static-assets.mdx
@@ -40,7 +40,7 @@ export default defineConfig({
 
 The logo field supports both string and object configurations.
 
-When the logo is a string, there are the following configuration situations:
+When the logo is a string, there are the following config situations:
 
 - Configured as an **external link**, like the above example.
 - Configured as an **absolute path**, such as `/rspress-logo.png`. In this case, Rspress will automatically find the `rspress-logo.png` image in the `public directory` of your **document root directory** and display it.
@@ -63,17 +63,17 @@ Here, `light` represents the logo address in light mode, and `dark` represents t
 
 ## Favicon
 
-In Rspress, you can specify the site's favicon icon through the `favicon` field. For example:
+In Rspress, you can specify the site's favicon icon through the `icon` field. For example:
 
 ```ts title="rspress.config.ts"
 import { defineConfig } from 'rspress/config';
 
 export default defineConfig({
-  favicon: 'https://avatars.githubusercontent.com/u/56892468?s=200&v=4',
+  icon: 'https://avatars.githubusercontent.com/u/56892468?s=200&v=4',
 });
 ```
 
-The favicon field supports string configuration, with the following specific configuration methods:
+The icon field supports string config, with the following specific ways:
 
 - Configured as an **external link**, like the above example.
 - Configured as an **absolute path**, such as `/favicon.ico`. In this case, Rspress will automatically find the `favicon.ico` icon in the `public directory` of your **document root directory** and display it.

diff --git a/packages/document/docs/en/guide/default-theme/i18n.mdx b/packages/document/docs/en/guide/default-theme/i18n.mdx
@@ -139,53 +139,41 @@ docs
 
 As you can see, we put documents in different languages in the `en` and `zh` directories under the `docs` directory, so that we can easily distinguish documents in different languages.
 
-## Configure sidebar and navbar
+## Configuring \_meta.json
 
-> If you use the [Auto Nav/Sidebar](/guide/basic/auto-nav-sidebar) method, you can skip this part.
+Through the \_meta.json file, we can configure the content of the nav bar and sidebar. For details, please refer to [Auto Nav/Sidebar](/guide/basic/auto-nav-sidebar).
 
-As we mentioned in [Conventional Routing](/guide/basic/conventional-route), we will automatically generate corresponding routes for different file paths. Then, in the scenario of internationalized documents, the routing of each document is different, so for documents in N languages, do we need to write N copies of sidebar and nav bar config?
+### Navigation Bar Level
 
-The answer is **no**. In the Rspress framework, you only need to write a configuration. How to do it?
+In the \_meta.json configuration at the navigation bar level, you can specify `text` as an i18n key, for example:
 
-Let's configure the sidebar and navbar like this:
-
-```ts title="rspress.config.ts"
-import { defineConfig } from 'rspress/config';
+```json title="_meta.json"
+[
+  {
+    "text": "guide",
+    "link": "/guide/start/getting-started",
+    "activeMatch": "/guide/"
+  }
+]
+```
 
-// Utility function for getting type hints
-const getI18nKey = (key: keyof typeof import('./i18n.json')) => key;
+Here, `text` is `guide`, this value will be automatically translated into `指南` or `Guide`, depending on the current language.
 
-export default defineConfig({
-  // The previous config is omitted
-  themeConfig: {
-    nav: [
-      {
-        text: getI18nKey('guide'),
-        link: '/guide/',
-      },
-    ],
-    sidebar: {
-      '/guide/': [
-        {
-          text: getI18nKey('getting-started'),
-          link: '/guide/getting-started',
-        },
-        {
-          text: getI18nKey('features'),
-          link: '/guide/features',
-        },
-      ],
-    },
-  },
-});
-```
+### Sidebar Level
 
-It can be seen that in the config of nav and sidebar, we mainly involve the two elements:
+In the \_meta.json configuration at the sidebar level, you can specify `label` as an i18n key, for example:
 
-- `text`. In the internationalization scenario, you only need to pass in the key in `i18n.json`, and the framework will automatically obtain the corresponding text according to the current language.
-- `link`. You don't need to add a language prefix, the framework will automatically add the corresponding language prefix according to the current language. For example, if the default language is Chinese, `/guide/features` will be converted to `/en/guide/features` in the English document.
+```json title="_meta.json"
+[
+  {
+    "type": "dir",
+    "name": "start",
+    "label": "getting-started"
+  }
+]
+```
 
-Finally, you only need to write a `nav` and `sidebar` config, and the framework will automatically obtain the corresponding text and links according to the current language.
+Here, `label` is `getting-started`, this value will be automatically translated into `开始` or `Getting Started`, depending on the current language.
 
 ## Use `useI18n` in custom components
 

diff --git a/packages/document/docs/zh/guide/basic/static-assets.mdx b/packages/document/docs/zh/guide/basic/static-assets.mdx
@@ -61,19 +61,19 @@ export default defineConfig({
 
 其中，`light` 代表浅色模式下的 logo 地址，而 `dark` 代表暗黑模式下的 logo 地址，各自的配置方式和上面的字符串配置一致。
 
-## favicon
+## favicon 图标
 
-在 Rspress 中，你可以通过 `favicon` 字段来指定站点的 favicon 图标。例如：
+在 Rspress 中，你可以通过 `icon` 字段来指定站点的 favicon 图标。例如：
 
 ```ts title="rspress.config.ts"
 import { defineConfig } from 'rspress/config';
 
 export default defineConfig({
-  favicon: 'https://avatars.githubusercontent.com/u/56892468?s=200&v=4',
+  icon: 'https://avatars.githubusercontent.com/u/56892468?s=200&v=4',
 });
 ```
 
-favicon 字段支持字符串配置，具体配置方式如下：
+icon 字段支持字符串配置，具体配置方式如下：
 
 - 配置为**外链**，如上面的例子。
 - 配置为**绝对路径**，如 `/favicon.ico`，这样 Rspress 在框架内部会自动在你的**文档根目录**的 `public 目录`中找到 `favicon.ico` 图标并进行展示。

diff --git a/packages/document/docs/zh/guide/default-theme/i18n.mdx b/packages/document/docs/zh/guide/default-theme/i18n.mdx
@@ -140,53 +140,41 @@ docs
 
 可以看到，我们把不同语言的文档放在了 `docs` 目录下的 `en` 和 `zh` 目录中，这样就可以方便地区分不同语言的文档了。
 
-## 配置侧边栏和导航栏
+## 配置 \_meta.json
 
-> 如果你使用了[自动化导航栏/侧边栏](/guide/basic/auto-nav-sidebar)写法，可以跳过这个部分。
+通过 \_meta.json 文件，我们可以配置导航栏和侧边栏的内容，具体可以参考[自动化导航栏/侧边栏](/guide/basic/auto-nav-sidebar)。
 
-我们在[约定式路由](/guide/basic/conventional-route)中提到过，针对不同的文件路径，我们会自动生成对应的路由。那么，在国际化文档的场景中，每份文档的路由是不一样的，那么针对 N 种语言的文档，我们需要写 N 份侧边栏和导航栏的配置吗？
+### 导航栏级别
 
-答案是**不用**。在 Rspress 框架中，你只需要写一份配置即可。如何完成呢？
+在导航栏级别的 \_meta.json 配置中，你可以将 `text` 指定为 i18n key，比如:
 
-我们来这样配置侧边栏和导航栏:
-
-```ts title="rspress.config.ts"
-import { defineConfig } from 'rspress/config';
+```json title="_meta.json"
+[
+  {
+    "text": "guide",
+    "link": "/guide/start/getting-started",
+    "activeMatch": "/guide/"
+  }
+]
+```
 
-// 工具函数，用于获取类型提示
-const getI18nKey = (key: keyof typeof import('./i18n.json')) => key;
+其中，`text` 为 `guide`，这个值会被自动翻译为 `指南` 或者 `Guide`，具体取决于当前语言。
 
-export default defineConfig({
-  // 前面的配置省略
-  themeConfig: {
-    nav: [
-      {
-        text: getI18nKey('guide'),
-        link: '/guide/',
-      },
-    ],
-    sidebar: {
-      '/guide/': [
-        {
-          text: getI18nKey('getting-started'),
-          link: '/guide/getting-started',
-        },
-        {
-          text: getI18nKey('features'),
-          link: '/guide/features',
-        },
-      ],
-    },
-  },
-});
-```
+### 侧边栏级别
 
-可以看到，在 nav 和 sidebar 的配置中，我们主要涉及到两种元素的配置:
+在侧边栏级别的 \_meta.json 配置中，你可以将 `label` 指定为 i18n key，比如:
 
-- `文本`。在国际化场景中，你只需要传入 `i18n.json` 中的文案 key 即可，框架会自动根据当前语言来获取对应的文本。
-- `链接`。你无需添加语言前缀，框架会自动根据当前语言来添加对应的语言前缀。比如默认语言为中文的情况下，在英文文档中 `/guide/features` 会被转换为 `/en/guide/features`。
+```json title="_meta.json"
+[
+  {
+    "type": "dir",
+    "name": "start",
+    "label": "getting-started"
+  }
+]
+```
 
-最后你只需要写一份 `nav` 和 `sidebar` 的配置，框架会自动根据当前语言来获取对应的文本和链接。
+其中，`label` 为 `getting-started`，这个值会被自动翻译为 `开始` 或者 `Getting Started`，具体取决于当前语言。
 
 ## 自定义组件中使用 `useI18n`