@modern-js/main-doc 2.32.0 → 2.32.1

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @modern-js/main-doc
 
+## 2.32.1
+
+### Patch Changes
+
+- @modern-js/builder-doc@2.32.1
+
 ## 2.32.0
 
 ### Patch Changes

package/docs/en/components/enable-bff-caution.mdx

@@ -1,3 +1,3 @@
 :::caution
-Please enable BFF functionality in the current application project root directory using [new](/apis/app/commands#modern-new) first.
+Please use the [new command](/apis/app/commands#modern-new) in the root directory of the current project to enable BFF functionality first.
 :::

package/docs/en/configure/app/auto-load-plugin.mdx

@@ -1,7 +1,7 @@
 ---
-title: autoLoadPlugins
-sidebar_position: 11
+sidebar_position: 22
 ---
+
 # autoLoadPlugins
 
 - **Type:** `boolean`

package/docs/en/configure/app/bff/_category_.json

@@ -1,4 +1,4 @@
 {
   "label": "bff",
-  "position": 5
+  "position": 2
 }

package/docs/en/configure/app/builder-plugins.mdx

@@ -1,7 +1,7 @@
 ---
-title: builderPlugins
-sidebar_position: 10
+sidebar_position: 21
 ---
+
 # builderPlugins
 
 - **Type:** `BuilderPlugin[]`

package/docs/en/configure/app/dev/_category_.json

@@ -1,4 +1,4 @@
 {
   "label": "dev",
-  "position": 7
+  "position": 1
 }

package/docs/en/configure/app/experiments/_category_.json

@@ -1,4 +1,4 @@
 {
   "label": "experiments",
-  "position": 15
+  "position": 14
 }

package/docs/en/configure/app/html/_category_.json

@@ -1,4 +1,4 @@
 {
   "label": "html",
-  "position": 2
+  "position": 3
 }

package/docs/en/configure/app/output/_category_.json

@@ -1,4 +1,4 @@
 {
   "label": "output",
-  "position": 2
+  "position": 7
 }

package/docs/en/configure/app/output/ssg.mdx

@@ -10,7 +10,7 @@ sidebar_label: ssg
 Enable the SSG for **Self-controlled Routing** or **Conventional Routing**.
 
 :::info
-For more routes detail, see [routes](/guides/basic-features/routes).
+For more routes detail, see [Routing](/guides/basic-features/routes).
 
 :::
 

package/docs/en/configure/app/plugins.mdx

@@ -1,5 +1,4 @@
 ---
-title: plugins
 sidebar_position: 9
 ---
 

package/docs/en/configure/app/runtime/_category_.json

@@ -1,4 +1,4 @@
 {
   "label": "runtime",
-  "position": 3
+  "position": 12
 }

package/docs/en/configure/app/security/_category_.json

@@ -1,4 +1,4 @@
 {
   "label": "security",
-  "position": 14
+  "position": 11
 }

package/docs/en/configure/app/server/_category_.json

@@ -1,4 +1,4 @@
 {
   "label": "server",
-  "position": 4
+  "position": 6
 }

package/docs/en/configure/app/source/_category_.json

@@ -1,4 +1,4 @@
 {
   "label": "source",
-  "position": 1
+  "position": 5
 }

package/docs/en/configure/app/source/design-system.mdx

@@ -648,7 +648,7 @@ const designSystem = {
 </details>
 
 :::tip
-For more information on TailwindCSS configuration, please refer to [here](https://tailwindcss.com/docs/configuration#theme).
+For more information on Tailwind CSS configuration, please refer to [here](https://tailwindcss.com/docs/configuration#theme).
 
 :::
 
@@ -673,7 +673,7 @@ const designSystem = {
 };
 ```
 
-The property names in the `screens` object are screen names (used as prefixes for the responsive utility variants generated by TailwindCSS, such as `md:text-center`), and the values are the `min-width` at which the breakpoint should start.
+The property names in the `screens` object are screen names (used as prefixes for the responsive utility variants generated by Tailwind CSS, such as `md:text-center`), and the values are the `min-width` at which the breakpoint should start.
 
 The default breakpoints are inspired by common device resolutions:
 
@@ -859,7 +859,7 @@ Then, you can use the `dark:` prefix to set different styles for elements in dar
 </div>
 ```
 
-Please note that since these screen variants are implemented in TailwindCSS, **it is not possible to use this method to combine breakpoints with dark mode**, e.g. `md:dark:text-gray-300` will not work.
+Please note that since these screen variants are implemented in Tailwind CSS, **it is not possible to use this method to combine breakpoints with dark mode**, e.g. `md:dark:text-gray-300` will not work.
 
 #### Colors
 
@@ -1158,7 +1158,7 @@ export default defineConfig({
 
 ### Configuration Reference
 
-In addition to `screens`, `colors`, and `spacing`, all properties in the configuration object map to core plugins in TailwindCSS. Because many plugins are responsible for CSS properties that only accept a set of static values (e.g. `float`), not every plugin has a corresponding property in the theme object.
+In addition to `screens`, `colors`, and `spacing`, all properties in the configuration object map to core plugins in Tailwind CSS. Because many plugins are responsible for CSS properties that only accept a set of static values (e.g. `float`), not every plugin has a corresponding property in the theme object.
 
 All of these properties can also be extended from the default theme under the `designSystem.extend` property.
 

package/docs/en/configure/app/source/enable-async-entry.mdx

@@ -9,7 +9,7 @@ sidebar_label: enableAsyncEntry
 
 This option is used for webpack Module Federation scenario.
 
-When this option is enabled, Modern.js will wrap the automatically generated entry files with Dynamic Imports (Asynchronous Boundaries), allowing page code to consume remote modules generated by Module Federation.
+When this option is enabled, Modern.js will wrap the automatically generated entry files with dynamic import (Asynchronous Boundaries), allowing page code to consume remote modules generated by Module Federation.
 
 ## Background
 

package/docs/en/configure/app/source/mainEntryName.mdx

@@ -5,7 +5,7 @@ sidebar_label: mainEntryName
 # source.mainEntryName
 
 - **Type:** `string`
-- **Default value:** `main`
+- **Default:** `main`
 
 This option is used to configure the main entry name of Modern.js.
 

package/docs/en/configure/app/testing/_category_.json

@@ -1,4 +1,4 @@
 {
   "label": "testing",
-  "position": 8
+  "position": 10
 }

package/docs/en/configure/app/tools/_category_.json

@@ -1,4 +1,4 @@
 {
   "label": "tools",
-  "position": 12
+  "position": 4
 }

package/docs/en/configure/app/tools/tailwindcss.mdx

@@ -14,8 +14,6 @@ const tailwind = {
     './config/html/**/*.{html,ejs,hbs}',
     './storybook/**/*',
   ],
-  // Use source.design System config as Tailwind CSS theme config
-  theme: source.designSystem,
 };
 ```
 
@@ -51,8 +49,8 @@ export default {
 };
 ```
 
-### Limitations
+### Notes
 
-The `theme` attribute is not allowed, otherwise the build will fail. Modern.js use [source.designSystem](/configure/app/source/design-system) as the Tailwind CSS Theme configuration.
+Please note that if you are using the [source.designSystem](/configure/app/source/design-system) configuration option simultaneously, the `theme` configuration of Tailwind CSS will be overridden by the value of `source.designSystem`.
 
-Other uses are consistent with [Tailwind CSS](https://tailwindcss.com/docs/configuration).
+The usage of other configurations follows the same approach as the official usage of Tailwind CSS. Please refer to [tailwindcss - Configuration](https://tailwindcss.com/docs/configuration) for more details.

package/docs/en/guides/advanced-features/bff/_category_.json

@@ -1,5 +1,5 @@
 {
-  "label": "BFF",
+  "label": "Using BFF",
   "position": 2,
   "link": {
     "type": "doc",

package/docs/en/guides/advanced-features/code-split.mdx

@@ -1,7 +1,7 @@
 ---
-title: Code Split
-sidebar_position: 6
+sidebar_position: 3
 ---
+
 # Code Splitting
 
 Code splitting is a common way to optimize frontend resource loading. This article will introduce the three types of code splitting supported by Modern.js:

package/docs/en/guides/advanced-features/eslint.mdx

@@ -1,8 +1,8 @@
 ---
-title: ESLint
 sidebar_position: 8
 ---
-# ESLint
+
+# ESLint Rules
 
 **Modern.js ESLint Rules** is the full set of **ESLint** rules, includes `@modern-js` (Lint rules for Node.js projects) and `@modern-js-app` (Lint rules for web projects).
 

package/docs/en/guides/advanced-features/low-level.mdx

@@ -1,7 +1,7 @@
 ---
-title: Low-Level Tools
-sidebar_position: 11
+sidebar_position: 10
 ---
+
 # Low-Level Tools
 
 ## Usage

package/docs/en/guides/advanced-features/ssg.mdx

@@ -1,6 +1,5 @@
 ---
-title: Static Site Generation
-sidebar_position: 4
+sidebar_position: 5
 ---
 
 # Static Site Generation
@@ -55,7 +54,7 @@ The above file directory will generate the following three routes:
 - `/user/profile`
 
 :::note
-If you are not familiar with the rules of Conventional Routing, you can first check [routes](/guides/basic-features/routes).
+If you are not familiar with the rules of Conventional Routing, you can first check [Routing](/guides/basic-features/routes).
 
 :::
 

package/docs/en/guides/advanced-features/ssr.mdx

@@ -1,9 +1,8 @@
 ---
-title: Server-side rendering
-sidebar_position: 3
+sidebar_position: 4
 ---
 
-# Server-side rendering
+# Server-Side Rendering
 
 In Modern.js, SSR is readily available without the need for developers to write intricate server-level logic or worry about the operation and maintenance of SSR services. Additionally, Modern.js includes a comprehensive degradation strategy for SSR to ensure safe page execution.
 

package/docs/en/guides/advanced-features/testing.mdx

@@ -1,8 +1,8 @@
 ---
-sidebar_position: 10
-title: Testing
+sidebar_position: 11
 ---
-# Testing
+
+# Using Jest
 
 Modern.js integrates the testing capabilities of [Jest](https://jestjs.io/) by default.
 

package/docs/en/guides/advanced-features/using-storybook.mdx

@@ -1,5 +1,5 @@
 ---
-sidebar_position: 20
+sidebar_position: 12
 ---
 
 # Using Storybook

package/docs/en/guides/advanced-features/web-server.mdx

@@ -1,7 +1,7 @@
 ---
-title: Custom Web Server
-sidebar_position: 3
+sidebar_position: 13
 ---
+
 # Custom Web Server
 
 As a client-centric development framework, Modern.js has limited customization capabilities on the server side. However, in some development scenarios, special server-level logic needs to be customized, such as user authentication, request preprocessing, and adding page rendering skeletons.

package/docs/en/guides/basic-features/alias.mdx

@@ -1,8 +1,8 @@
 ---
-title: Alias
-sidebar_position: 8
+sidebar_position: 3
 ---
-# Alias
+
+# Path Alias
 
 Modern.js allows you to use alias to import modules from custom directories in JS and CSS, and comes with the following built-in alias:
 

package/docs/en/guides/basic-features/css.mdx

@@ -2,7 +2,7 @@
 sidebar_position: 2
 ---
 
-# CSS Solutions
+# Styling
 
 Modern.js has built-in a variety of commonly used CSS solutions, including Less / Sass / Stylus preprocessors, PostCSS, CSS Modules, CSS-in-JS, and Tailwind CSS.
 
@@ -119,12 +119,10 @@ export default {
     './config/html/**/*.{html,ejs,hbs}',
     './storybook/**/*',
   ],
-  // Theme configuration (optional)
-  theme: {},
 };
 ```
 
-3. In the `modern.config.ts` file, import the `tailwind.config.ts` file you created, so that Modern.js can recognize the Tailwind CSS configuration correctly.
+3. In the `modern.config.ts` file, import the `tailwind.config.ts` file you created and pass it to [tools.tailwindcss](/configure/app/tools/tailwindcss), so that Modern.js can recognize the Tailwind CSS configuration correctly.
 
 ```ts title="modern.config.ts"
 import tailwindConfig from './tailwind.config';
@@ -133,18 +131,9 @@ export default defineConfig({
   tools: {
     tailwindcss: tailwindConfig,
   },
-  // Theme configuration (optional)
-  source: {
-    designSystem: tailwindConfig.theme,
-  },
 });
 ```
 
-Please read the documentation for the following configuration options to understand their functions:
-
-- [tools.tailwindcss](/configure/app/tools/tailwindcss).
-- [source.designSystem](/configure/app/source/design-system).
-
 ### Tailwind CSS Version
 
 Modern.js supports both Tailwind CSS v2 and v3 versions, and the framework will recognize the version of the `tailwindcss` dependency in the project `package.json` file and enable the corresponding configuration. By default, we will install Tailwind CSS v3 version for you.
@@ -162,39 +151,3 @@ Tailwind CSS v2 and v3 do not support the IE 11 browser, please refer to:
 - [Tailwind CSS v2 - Browser Support](https://v2.tailwindcss.com/docs/browser-support)
 
 If you use Tailwind CSS on IE 11 browser, some styles may not be available, please use it with caution.
-
-### Theme Configuration
-
-When you need to customize the [theme](https://tailwindcss.com/docs/theme) configuration of Tailwind CSS, you can modify it in the [`source.designSystem`](/configure/app/source/design-system) configuration. For example, adding a `primary` color theme:
-
-```ts title="modern.config.ts"
-export default defineConfig({
-  source: {
-    designSystem: {
-      extend: {
-        colors: {
-          primary: '#5c6ac4',
-        },
-      },
-    },
-  },
-});
-```
-
-When you need to make other special configurations to Tailwind CSS besides [theme](https://tailwindcss.com/docs/theme), you can configure them in [`tools.tailwindcss`](/configure/app/tools/tailwindcss), such as setting `variants`:
-
-```ts title="modern.config.ts"
-export default defineConfig({
-  tools: {
-    tailwindcss: {
-      variants: {
-        extend: {
-          backgroundColor: ['active'],
-        },
-      },
-    },
-  },
-});
-```
-
-> When you configure Tailwind CSS for your project, the combination of [source.designSystem](/configure/app/source/design-system) and [tools.tailwindcss](/configure/app/tools/tailwindcss) configurations is equivalent to configuring a `tailwindcss.config.js` file separately. [source.designSystem](/configure/app/source/design-system) is equivalent to the Tailwind CSS [theme](https://v2.tailwindcss.com/docs/configuration#theme) configuration.

package/docs/en/guides/basic-features/data-fetch.mdx

@@ -1,7 +1,7 @@
 ---
-title: Data Fetching
-sidebar_position: 3
+sidebar_position: 4
 ---
+
 # Data Fetching
 
 Modern.js provides out-of-the-box data fetching capabilities, allowing developers to develop in an isomorphic way in both client-side and server-side code.

package/docs/en/guides/basic-features/env-vars.mdx

@@ -1,8 +1,8 @@
 ---
-title: Environment Variable
 sidebar_position: 7
 ---
-# Environment Variable
+
+# Environment Variables
 
 Modern.js provides support for environment variables, including built-in environment variables and custom environment variables.
 

package/docs/en/guides/basic-features/html.mdx

@@ -1,5 +1,4 @@
 ---
-title: HTML Template
 sidebar_position: 9
 ---
 

package/docs/en/guides/basic-features/mock.mdx

@@ -1,8 +1,8 @@
 ---
-title: Mock
-sidebar_position: 6
+sidebar_position: 5
 ---
-# Mock
+
+# Data Mocking
 
 Modern.js allows you to easily generate mock data so that the front-end can develop independently without depending on the back-end API.
 

package/docs/en/guides/basic-features/proxy.mdx

@@ -1,8 +1,8 @@
 ---
-title: Proxy
-sidebar_position: 5
+sidebar_position: 6
 ---
-# Proxy
+
+# Network Proxy
 
 ## Local Proxy
 

package/docs/en/guides/basic-features/routes.mdx

@@ -1,9 +1,8 @@
 ---
-title: Routes
 sidebar_position: 1
 ---
 
-# Routes
+# Routing
 
 Modern.js's routing is based on [React Router 6](https://reactrouter.com/en/main) and provides multiple types of routing modes. According to different [entry](/guides/concept/entries) types, routing is divided into three modes: **Conventional Routing**, **Self-controlled Routing**, and **Other**.
 

package/docs/en/guides/concept/builder.mdx

@@ -2,7 +2,7 @@
 sidebar_position: 2
 ---
 
-# Builder
+# Build Engine
 
 **Modern.js uses [Modern.js Builder](https://modernjs.dev/builder/en) to build your Web App.**
 
@@ -16,7 +16,7 @@ From a building perspective, Modern.js is divided into three layers, from top to
 - Common build engine: Modern.js Builder.
 - Low-level bundler: webpack and Rspack.
 
-<img src="https://lf3-static.bytednsdoc.com/obj/eden-cn/zq-uylkvT/ljhwZthlaukjlkulzlp/builder-layers-1117.png" style={{ width: '100%', maxWidth: '540px' }} />
+<img src="https://lf3-static.bytednsdoc.com/obj/eden-cn/zq-uylkvT/ljhwZthlaukjlkulzlp/builder-layers-0824.png" style={{ width: '100%', maxWidth: '540px' }} />
 
 ## Builder Documentation
 

package/docs/en/guides/concept/entries.mdx

@@ -2,7 +2,7 @@
 sidebar_position: 1
 ---
 
-# Entry
+# Page Entry
 
 In this chapter, you will learn about the entry convention in Modern.js and how to customize it.
 

package/docs/en/guides/get-started/upgrade.mdx

@@ -1,9 +1,8 @@
 ---
-title: Upgrade
 sidebar_position: 3
 ---
 
-# Upgrade
+# Upgrading
 
 ## Upgrade with command
 

package/docs/zh/community/releases.mdx

@@ -24,7 +24,7 @@ Modern.js 遵循 [Semantic Versioning](https://semver.org/lang/zh-CN/) 语义化
 
 ## 版本升级
 
-当你需要升级项目中的 Modern.js 版本时，可以使用 `modern upgrade` 命令，参考 [升级](/guides/get-started/upgrade)。
+当你需要升级项目中的 Modern.js 版本时，可以使用 `modern upgrade` 命令，参考 [版本升级](/guides/get-started/upgrade)。
 
 ```bash
 npx modern upgrade

package/docs/zh/community/team.mdx

@@ -2,7 +2,7 @@
 sidebar_position: 1
 ---
 
-# 团队
+# 开发团队
 
 Modern.js 的开发由字节跳动的 Modern.js 团队和社区贡献者驱动。
 

package/docs/zh/components/enable-bff-caution.mdx

@@ -1,4 +1,4 @@
-:::caution 注意
-请先在当前应用项目根目录使用【[new](/apis/app/commands#modern-new)】 启用 BFF 功能。
+:::tip
+请先在当前项目的根目录使用 [new 命令](/apis/app/commands#modern-new) 启用 BFF 功能。
 
 :::

package/docs/zh/configure/app/auto-load-plugin.mdx

@@ -1,9 +1,8 @@
 ---
-title: autoLoadPlugins (自动注册插件)
-sidebar_position: 11
+sidebar_position: 22
 ---
 
-# autoLoadPlugins (自动注册插件)
+# autoLoadPlugins 自动注册插件
 
 - **类型：** `boolean`
 - **默认值：** `false`

package/docs/zh/configure/app/bff/_category_.json

@@ -1,4 +1,4 @@
 {
-  "label": "bff (BFF API)",
-  "position": 5
+  "label": "bff 一体化",
+  "position": 2
 }

package/docs/zh/configure/app/builder-plugins.mdx

@@ -1,9 +1,8 @@
 ---
-title: builderPlugins (构建插件)
-sidebar_position: 10
+sidebar_position: 21
 ---
 
-# builderPlugins (构建插件)
+# builderPlugins 构建插件
 
 - **类型：** `BuilderPlugin[]`
 - **默认值：** `[]`

package/docs/zh/configure/app/deploy/_category_.json

@@ -1,4 +1,4 @@
 {
-  "label": "deploy (部署)",
+  "label": "deploy 部署",
   "position": 8
 }

package/docs/zh/configure/app/dev/_category_.json

@@ -1,4 +1,4 @@
 {
-  "label": "dev (开发调试)",
-  "position": 7
+  "label": "dev 开发",
+  "position": 1
 }

package/docs/zh/configure/app/experiments/_category_.json

@@ -1,4 +1,4 @@
 {
-  "label": "experiments (实验性)",
-  "position": 15
+  "label": "experiments 实验性",
+  "position": 14
 }

package/docs/zh/configure/app/html/_category_.json

@@ -1,4 +1,4 @@
 {
-  "label": "html (模板)",
-  "position": 2
+  "label": "html 模板",
+  "position": 3
 }

package/docs/zh/configure/app/output/_category_.json

@@ -1,4 +1,4 @@
 {
-  "label": "output (构建产物)",
-  "position": 2
+  "label": "output 产物",
+  "position": 7
 }

package/docs/zh/configure/app/output/ssg.mdx

@@ -10,7 +10,7 @@ sidebar_label: ssg
 开启**自控式路由**或**约定式路由** SSG 功能的配置。
 
 :::info 客户端路由
-相关内容可以查看[路由](/guides/basic-features/routes)。
+相关内容可以查看[路由方案](/guides/basic-features/routes)。
 
 :::
 

package/docs/zh/configure/app/performance/_category_.json

@@ -1,4 +1,4 @@
 {
-  "label": "performance (性能)",
+  "label": "performance 性能",
   "position": 13
 }

package/docs/zh/configure/app/plugins.mdx

@@ -1,9 +1,8 @@
 ---
-title: plugins (插件)
 sidebar_position: 9
 ---
 
-# plugins (插件)
+# plugins 插件
 
 - **类型：** `CliPlugin[]`
 - **默认值：** `[]`

package/docs/zh/configure/app/runtime/_category_.json

@@ -1,4 +1,4 @@
 {
-  "label": "runtime (运行时)",
-  "position": 3
+  "label": "runtime 运行时",
+  "position": 12
 }

package/docs/zh/configure/app/security/_category_.json

@@ -1,4 +1,4 @@
 {
-  "label": "security (安全)",
-  "position": 14
+  "label": "security 安全",
+  "position": 11
 }

package/docs/zh/configure/app/server/_category_.json

@@ -1,4 +1,4 @@
 {
-  "label": "server (服务器)",
-  "position": 4
+  "label": "server 服务器",
+  "position": 6
 }

package/docs/zh/configure/app/source/_category_.json

@@ -1,4 +1,4 @@
 {
-  "label": "source (源文件)",
-  "position": 1
+  "label": "source 源文件",
+  "position": 5
 }

package/docs/zh/configure/app/source/design-system.mdx

@@ -647,7 +647,7 @@ const designSystem = {
 </details>
 
 :::tip 提示
-更多关于 TailwindCSS 配置可查看[这里](https://tailwindcss.com/docs/configuration#theme)。
+更多关于 Tailwind CSS 配置可查看[这里](https://tailwindcss.com/docs/configuration#theme)。
 
 :::
 

package/docs/zh/configure/app/testing/_category_.json

@@ -1,4 +1,4 @@
 {
-  "label": "testing (测试)",
-  "position": 8
+  "label": "testing 测试",
+  "position": 10
 }

package/docs/zh/configure/app/tools/_category_.json

@@ -1,4 +1,4 @@
 {
-  "label": "tools (底层配置)",
-  "position": 12
+  "label": "tools 底层工具",
+  "position": 4
 }

package/docs/zh/configure/app/tools/tailwindcss.mdx

@@ -14,12 +14,10 @@ const tailwind = {
     './config/html/**/*.{html,ejs,hbs}',
     './storybook/**/*',
   ],
-  // 使用 source.designSystem 配置作为 Tailwind CSS Theme 配置
-  theme: source.designSystem,
 };
 ```
 
-对应 [TailwindCSS](https://tailwindcss.com/docs/configuration) 的配置。
+对应 [Tailwind CSS](https://tailwindcss.com/docs/configuration) 的配置。
 
 ### Function 类型
 
@@ -53,8 +51,8 @@ export default {
 };
 ```
 
-### 限制
+### 注意事项
 
-注意，该配置中不允许使用 `theme` 配置项，否则会构建失败。在 Modern.js 中，请使用 [source.designSystem](/configure/app/source/design-system) 作为 `Tailwind CSS Theme` 配置。
+注意，如果你同时使用了 [source.designSystem](/configure/app/source/design-system) 配置项，那么 Tailwind CSS 的 `theme` 配置将会被 `source.designSystem` 的值所覆盖。
 
-其他配置的使用方式和 Tailwind CSS 一致，请参考 [tailwindcss - Configuration](https://tailwindcss.com/docs/configuration)。
+其他配置的使用方式与 Tailwind CSS 官方用法一致，请参考 [tailwindcss - Configuration](https://tailwindcss.com/docs/configuration)。

package/docs/zh/guides/advanced-features/bff/_category_.json

@@ -1,5 +1,5 @@
 {
-  "label": "BFF",
+  "label": "使用 BFF",
   "position": 2,
   "link": {
     "type": "doc",

package/docs/zh/guides/advanced-features/code-split.mdx

@@ -1,7 +1,7 @@
 ---
-title: 代码分割
-sidebar_position: 6
+sidebar_position: 3
 ---
+
 # 代码分割
 
 代码分割是优化前端资源加载的一种常用手段，本文将介绍 Modern.js 支持的三种代码分割方式：

package/docs/zh/guides/advanced-features/compatibility.mdx

@@ -1,5 +1,5 @@
 ---
-sidebar_position: 5
+sidebar_position: 6
 ---
 
 # 浏览器兼容性

package/docs/zh/guides/advanced-features/eslint.mdx

@@ -1,7 +1,7 @@
 ---
-title: ESLint 规则集
 sidebar_position: 8
 ---
+
 # ESLint 规则集
 
 {/* 参考 [实战教程 - 确认编程环境](../handbook/c03-ide/3.1-setting-up) 确保本地 IDE 环境正常。  */}

package/docs/zh/guides/advanced-features/low-level.mdx

@@ -1,7 +1,7 @@
 ---
-title: 配置底层工具
-sidebar_position: 11
+sidebar_position: 10
 ---
+
 # 配置底层工具
 
 ## 使用方式

package/docs/zh/guides/advanced-features/rspack-start.mdx

@@ -1,5 +1,4 @@
 ---
-title: 使用 Rspack
 sidebar_position: 1
 ---
 

package/docs/zh/guides/advanced-features/ssg.mdx

@@ -1,9 +1,8 @@
 ---
-title: 静态站点生成（SSG）
-sidebar_position: 4
+sidebar_position: 5
 ---
 
-# 静态站点生成（SSG）
+# 静态站点生成
 
 SSG（Static Site Generation）是一种基于数据与模板，在构建时渲染完整静态网页的技术解决方案。
 
@@ -55,7 +54,7 @@ SSG 在**约定式路由**和**自控式路由**下的使用方式不同。
 - `/user/profile`
 
 :::note
-如果还不了解约定式路由的规则，可以先查看[路由](/guides/basic-features/routes)。
+如果还不了解约定式路由的规则，可以先查看[路由方案](/guides/basic-features/routes)。
 
 :::
 

package/docs/zh/guides/advanced-features/ssr.mdx

@@ -1,9 +1,8 @@
 ---
-title: 服务端渲染（SSR）
-sidebar_position: 3
+sidebar_position: 4
 ---
 
-# 服务端渲染（SSR）
+# 服务端渲染
 
 在 Modern.js 中，SSR 也是开箱即用的。开发者无需为 SSR 编写复杂的服务端逻辑，也无需关心 SSR 的运维，或是创建单独的服务。Modern.js 拥有完备的 SSR 降级策略，保证页面能够安全运行。
 

package/docs/zh/guides/advanced-features/testing.mdx

@@ -1,8 +1,8 @@
 ---
-sidebar_position: 10
+sidebar_position: 11
 ---
 
-# 测试
+# 使用 Jest 测试
 
 Modern.js 默认集成了 [Jest](https://jestjs.io/) 的测试能力。
 

package/docs/zh/guides/advanced-features/using-storybook.mdx

@@ -1,5 +1,5 @@
 ---
-sidebar_position: 20
+sidebar_position: 12
 ---
 
 # 使用 Storybook

package/docs/zh/guides/advanced-features/web-server.mdx

@@ -1,7 +1,7 @@
 ---
-title: 自定义 Web Server
-sidebar_position: 3
+sidebar_position: 13
 ---
+
 # 自定义 Web Server
 
 Modern.js 作为以客户端为中心的开发框架，对服务端的定制能力较弱。而在有些开发场景下，需要定制特殊的服务端逻辑，例如用户鉴权、请求预处理、添加页面渲染骨架等。

package/docs/zh/guides/basic-features/alias.mdx

@@ -1,8 +1,8 @@
 ---
-title: 别名
-sidebar_position: 8
+sidebar_position: 3
 ---
-# 别名
+
+# 路径别名
 
 Modern.js 允许在 JS 和 CSS 中使用别名导入自定义目录下的模块，并内置了以下别名:
 

package/docs/zh/guides/basic-features/css.mdx

@@ -2,7 +2,7 @@
 sidebar_position: 2
 ---
 
-# CSS 开发方案
+# 样式开发
 
 Modern.js 内置多种常用的 CSS 开发方案，包括 Less / Sass / Stylus 预处理器、PostCSS、CSS Modules、CSS-in-JS 和 Tailwind CSS。
 
@@ -119,12 +119,10 @@ export default {
     './config/html/**/*.{html,ejs,hbs}',
     './storybook/**/*',
   ],
-  // 主题配置（可选）
-  theme: {},
 };
 ```
 
-3. 在 `modern.config.ts` 中引用你创建的 `tailwind.config.ts` 文件，使 Modern.js 可以正确识别 Tailwind CSS 配置内容。
+3. 在 `modern.config.ts` 中通过 [tools.tailwindcss](/configure/app/tools/tailwindcss) 引用你创建的 `tailwind.config.ts` 文件，使 Modern.js 可以正确识别 Tailwind CSS 配置内容。
 
 ```ts title="modern.config.ts"
 import tailwindConfig from './tailwind.config';
@@ -133,17 +131,9 @@ export default defineConfig({
   tools: {
     tailwindcss: tailwindConfig,
   },
-  // 主题配置（可选）
-  source: {
-    designSystem: tailwindConfig.theme,
-  },
 });
 ```
 
-请阅读相关配置项的文档来了解其作用：
-
-- [tools.tailwindcss](/configure/app/tools/tailwindcss)。
-- [source.designSystem](/configure/app/source/design-system)。
 
 ### Tailwind CSS 版本
 
@@ -162,39 +152,3 @@ Tailwind CSS v2 和 v3 均不支持 IE 11 浏览器，相关背景请参考：
 - [Tailwind CSS v2 - Browser Support](https://v2.tailwindcss.com/docs/browser-support)
 
 如果你在 IE 11 浏览器上使用 Tailwind CSS，可能会出现部分样式不可用的现象，请谨慎使用。
-
-### Theme 配置
-
-当需要自定义 Tailwind CSS 的 [theme](https://tailwindcss.com/docs/theme) 配置的时候，可以在配置 [`source.designSystem`](/configure/app/source/design-system) 中修改，例如，颜色主题中增加一个 `primary`：
-
-```ts title="modern.config.ts"
-export default defineConfig({
-  source: {
-    designSystem: {
-      extend: {
-        colors: {
-          primary: '#5c6ac4',
-        },
-      },
-    },
-  },
-});
-```
-
-当需要对 Tailwind CSS 做 [theme](https://tailwindcss.com/docs/theme) 以外的其他特殊配置时，可以在 [`tools.tailwindcss`](/configure/app/tools/tailwindcss) 中配置，例如设置 `variants`：
-
-```ts title="modern.config.ts"
-export default defineConfig({
-  tools: {
-    tailwindcss: {
-      variants: {
-        extend: {
-          backgroundColor: ['active'],
-        },
-      },
-    },
-  },
-});
-```
-
-> 当你为项目配置 Tailwind CSS 的时候，[source.designSystem](/configure/app/source/design-system) 和 [tools.tailwindcss](/configure/app/tools/tailwindcss) 这两个配置的组合等价于单独配置了一个 `tailwindcss.config.js` 文件。其中 [source.designSystem](/configure/app/source/design-system) 等效于 Tailwind CSS 的 [theme](https://v2.tailwindcss.com/docs/configuration#theme) 配置。

package/docs/zh/guides/basic-features/data-fetch.mdx

@@ -1,6 +1,5 @@
 ---
-title: 数据获取
-sidebar_position: 3
+sidebar_position: 4
 ---
 
 # 数据获取

package/docs/zh/guides/basic-features/env-vars.mdx

@@ -1,7 +1,7 @@
 ---
-title: 环境变量
 sidebar_position: 7
 ---
+
 # 环境变量
 
 Modern.js 提供了对环境变量的支持，包含内置的环境变量和自定义的环境变量。

package/docs/zh/guides/basic-features/mock.mdx

@@ -1,7 +1,7 @@
 ---
-title: 数据模拟
-sidebar_position: 6
+sidebar_position: 5
 ---
+
 # 数据模拟
 
 Modern.js 提供了快速生成 Mock 数据的功能，能够让前端独立自主开发，不被后端接口阻塞。

package/docs/zh/guides/basic-features/proxy.mdx

@@ -1,8 +1,8 @@
 ---
-title: 代理
-sidebar_position: 5
+sidebar_position: 6
 ---
-# 代理
+
+# 网络代理
 
 ## 本地代理
 

package/docs/zh/guides/basic-features/routes.mdx

@@ -1,9 +1,8 @@
 ---
-title: 路由
 sidebar_position: 1
 ---
 
-# 路由
+# 路由方案
 
 Modern.js 的路由基于 [React Router 6](https://reactrouter.com/en/main)，并提供了多种类型的路由模式。根据不同 [入口](/guides/concept/entries) 类型，将路由分为三种模式，分别是**约定式路由**，**自控式路由**和**其他路由方案**。
 

package/docs/zh/guides/concept/builder.mdx

@@ -16,7 +16,7 @@ Modern.js Builder 是 Modern.js 体系的核心组件之一，它是一个面向
 - 通用构建引擎：Modern.js Builder。
 - 底层打包工具：webpack 和 Rspack。
 
-<img src="https://lf3-static.bytednsdoc.com/obj/eden-cn/zq-uylkvT/ljhwZthlaukjlkulzlp/builder-layers-1117.png" style={{ width: '100%', maxWidth: '540px' }} />
+<img src="https://lf3-static.bytednsdoc.com/obj/eden-cn/zq-uylkvT/ljhwZthlaukjlkulzlp/builder-layers-0824.png" style={{ width: '100%', maxWidth: '540px' }} />
 
 ## 构建文档
 

package/docs/zh/guides/concept/entries.mdx

@@ -2,7 +2,7 @@
 sidebar_position: 1
 ---
 
-# 入口
+# 页面入口
 
 通过本章节，你可以了解到 Modern.js 中的入口约定，以及如何自定义入口。
 
@@ -114,7 +114,7 @@ import EntryMode from '@site-docs/components/entry-mode.mdx';
 
 上述目录中，`layout.tsx` 中导出的组件会作为最外层的组件，`page.tsx` 中导出的组件会作为 `/` 路由的组件。
 
-详细内容可以参考[路由](/guides/basic-features/routes#约定式路由)。
+详细内容可以参考[路由方案](/guides/basic-features/routes#约定式路由)。
 
 #### 自控式路由
 
@@ -135,7 +135,7 @@ export default () => {
 };
 ```
 
-详细内容可以参考[路由](/guides/basic-features/routes#自控式路由)。
+详细内容可以参考[路由方案](/guides/basic-features/routes#自控式路由)。
 
 #### 自定义 Bootstrap
 

package/docs/zh/guides/get-started/upgrade.mdx

@@ -1,9 +1,8 @@
 ---
-title: 升级
 sidebar_position: 3
 ---
 
-# 升级
+# 版本升级
 
 ## 通过命令行升级
 

package/package.json

@@ -15,14 +15,14 @@
     "modern",
     "modern.js"
   ],
-  "version": "2.32.0",
+  "version": "2.32.1",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/",
     "access": "public",
     "provenance": true
   },
   "peerDependencies": {
-    "@modern-js/builder-doc": "^2.32.0"
+    "@modern-js/builder-doc": "^2.32.1"
   },
   "devDependencies": {
     "classnames": "^2",
@@ -34,9 +34,9 @@
     "fs-extra": "^10",
     "@types/node": "^16",
     "@types/fs-extra": "^9",
-    "@modern-js/builder-doc": "2.32.0",
-    "@modern-js/doc-tools": "2.32.0",
-    "@modern-js/doc-plugin-auto-sidebar": "2.32.0"
+    "@modern-js/builder-doc": "2.32.1",
+    "@modern-js/doc-tools": "2.32.1",
+    "@modern-js/doc-plugin-auto-sidebar": "2.32.1"
   },
   "scripts": {
     "dev": "modern dev",

package/src/i18n/enUS.ts

@@ -18,7 +18,7 @@ export const EN_US = {
   feature4: 'Multi-Rendering Mode',
   featureDesc4: 'SSR, SSG, SPR, all out of the box for you.',
   feature5: 'CSS Solutions',
-  featureDesc5: 'CSS Modules, CSS-in-JS, TailwindCSS, take your pick.',
+  featureDesc5: 'CSS Modules, CSS-in-JS, Tailwind CSS, take your pick.',
   feature6: 'Easy to Configure',
   featureDesc6:
     'Launch with zero configuration, then everything is configurable.',

package/src/i18n/zhCN.ts

@@ -19,7 +19,7 @@ export const ZH_CN: Record<keyof typeof EN_US, string> = {
   feature4: '多渲染模式',
   featureDesc4: 'SSR、SSG、SPR 等多种渲染模式，通通开箱即用。',
   feature5: 'CSS 方案',
-  featureDesc5: 'CSS Modules、CSS-in-JS、TailwindCSS，任你挑选。',
+  featureDesc5: 'CSS Modules、CSS-in-JS、Tailwind CSS，任你挑选。',
   feature6: '易于配置',
   featureDesc6: '以零配置启动，然后一切皆可配置。',