@modern-js/main-doc 2.58.3 → 2.60.0

package/docs/en/{guides/advanced-features/rsbuild-plugin.mdx → plugin/introduction.mdx}

@@ -1,11 +1,26 @@
----
-sidebar_position: 21
-title: Using Rsbuild Plugin
----
+# Plugin
 
-# Using Rsbuild Plugin
+In Modern.js, you can directly use two types of plugins: Modern.js framework plugins and Rsbuild plugins.
 
-## Introduce Rsbuild Plugin
+## Modern.js Framework Plugin
+
+Modern.js has its own framework plugin system. You can use Modern.js plugins by configuring the [`plugins`](/configure/app/plugins) field in `modern.config.ts`.
+
+### Plugin Types
+
+Framework plugins can be categorized into three types:
+
+1. [CLI Plugins](/plugin/cli-plugins): These are used to provide additional functionality when the Modern.js commands are executed in the application. Examples include adding commands, modifying configuration, and monitoring files. Most build-related capabilities can be achieved through CLI plugins.
+2. Server Plugins: These add extra functionality when the application receives requests. Examples include adding middleware and modifying request responses.
+3. Runtime Plugins: These provide additional functionality when the application runs React code. Examples include performing initialization actions and wrapping React higher-order components.
+
+:::note
+Server plugins and Runtime plugins are coming soon.
+:::
+
+### Developing Plugins
+
+If you need to develop Modern.js framework plugins, you can read [Modern.js Plugin System](/plugin/plugin-system/introduction) for more information.
 
 Rsbuild is the build tool of Modern.js. You can modify the default build behavior and add various additional features by adding the Rsbuild plugin, including but not limited to:
 
@@ -22,9 +37,15 @@ Modern.js has upgraded the build tool to [Rsbuild](https://rsbuild.dev/) startin
 If your current version is lower than MAJOR_VERSION.46.0, you can upgrade by executing `npx modern upgrade`.
 :::
 
-## Official Plugins
+:::info
+For more information about the Rsbuild plugin system, you can read [Rsbuild Official Site - Plugins](https://rsbuild.dev/plugins/list/index).
+:::
+
+## Rsbuild Plugin
 
-### Builtin Plugins
+### Official Plugins
+
+#### Builtin Plugins
 
 Here are the official Rsbuild plugins built into Modern.js:
 
@@ -41,13 +62,17 @@ Here are the official Rsbuild plugins built into Modern.js:
 | [CSS Minimizer Plugin](https://github.com/rspack-contrib/rsbuild-plugin-css-minimizer)         | Used to customize CSS minimizer, switch to [cssnano](https://cssnano.co/) or other tools for CSS compression | [tools.minifyCss](/configure/app/tools/minify-css.html)                                                                               |
 | [Pug Plugin](https://github.com/rspack-contrib/rsbuild-plugin-pug)                             | Provides support for the Pug template engine                                                                 | [tools.pug](/configure/app/tools/pug.html)                                                                                            |
 | [Rem Plugin](https://github.com/rspack-contrib/rsbuild-plugin-rem)                                      | Implements the rem adaptive layout for mobile pages                                                          | [output.convertToRem](/configure/app/output/convert-to-rem.html)                                                                      |
-| [YAML Plugin](https://github.com/rspack-contrib/rsbuild-plugin-yaml)                           | Used to import YAML files and convert them into JavaScript objects                                           | [TOML File](/guides/basic-features/json-files.html#toml-file)                                                                         |
-| [TOML Plugin](https://github.com/rspack-contrib/rsbuild-plugin-toml)                           | Used to import TOML files and convert them into JavaScript objects                                           | [YAML File](/guides/basic-features/json-files.html#yaml-file)                                                                         |
+| [YAML Plugin](https://github.com/rspack-contrib/rsbuild-plugin-yaml)                           | Used to import YAML files and convert them into JavaScript objects                                           | [TOML File](/guides/basic-features/static-assets/json-files.html#toml-file)                                                                         |
+| [TOML Plugin](https://github.com/rspack-contrib/rsbuild-plugin-toml)                           | Used to import TOML files and convert them into JavaScript objects                                           | [YAML File](/guides/basic-features/static-assets/json-files.html#yaml-file)                                                                         |
 
-### Un-builtin Plugins
+#### Un-builtin Plugins
 
 Here are the official Rsbuild plugins that are not built into Modern.js:
 
 - [Image Compress Plugin](https://github.com/rspack-contrib/rsbuild-plugin-image-compress): Compress the image resources used in the project.
 - [Stylus Plugin](https://rsbuild.dev/plugins/list/plugin-stylus): Use Stylus as the CSS preprocessor.
 - [UMD Plugin](https://github.com/rspack-contrib/rsbuild-plugin-umd): Used to build outputs in UMD format.
+
+import OtherPlugins from '@site-docs-en/components/other-plugins.mdx';
+
+<OtherPlugins />

package/docs/en/{guides/topic-detail/framework-plugin → plugin/plugin-system}/extend.mdx

@@ -4,7 +4,7 @@ sidebar_position: 5
 
 # Extending Plugin Hooks
 
-This section describes how to extend plugin Hooks by dynamically registering [Hook models](/guides/topic-detail/framework-plugin/hook).
+This section describes how to extend plugin Hooks by dynamically registering [Hook models](/plugin/plugin-system/hook).
 
 ## Example
 

package/docs/en/{guides/topic-detail/framework-plugin → plugin/plugin-system}/implement.mdx

@@ -28,7 +28,7 @@ const myPlugin = {
 };
 ```
 
-In addition, plugins allow configuration of the execution order with other plugins. For more information, please refer to [Plugin Relationship](/guides/topic-detail/framework-plugin/relationship).
+In addition, plugins allow configuration of the execution order with other plugins. For more information, please refer to [Plugin Relationship](/plugin/plugin-system/relationship).
 
 ### Plugin Types
 
@@ -108,7 +108,7 @@ import type { MyPluginHook } from 'xxx';
 const myPlugin: CliPlugin<AppTools & { hooks: MyPluginHook }> = {};
 ```
 
-Please refer to [Extending Hooks](/guides/topic-detail/framework-plugin/extend) for detailed explanations.
+Please refer to [Extending Hooks](/plugin/plugin-system/extend) for detailed explanations.
 
 ### Plugin Configuration
 
@@ -151,7 +151,7 @@ export const myPlugin = (): CliPlugin => ({
 });
 ```
 
-For more detail [Plugin API](/guides/topic-detail/framework-plugin/plugin-api).
+For more detail [Plugin API](/plugin/plugin-system/plugin-api).
 
 ### Async setup
 

package/docs/en/{guides/topic-detail/framework-plugin → plugin/plugin-system}/plugin-api.mdx

@@ -44,7 +44,7 @@ interface UserConfig {
 Please refer to [Configuration](/configure/app/usage) for the specific meanings of configuration fields.
 
 :::tip
-This method returns a read-only configuration and cannot be modified. If you need to modify the configuration, please use [config hook](/guides/topic-detail/framework-plugin/hook-list.html#config).
+This method returns a read-only configuration and cannot be modified. If you need to modify the configuration, please use [config hook](/plugin/plugin-system/hook-list.html#config).
 :::
 
 ### useResolvedConfigContext
@@ -67,7 +67,7 @@ interface NormalizedConfig {
 Please refer to [Configuration](/configure/app/usage) for the specific meanings of configuration fields.
 
 :::tip
-This method returns a read-only configuration and cannot be modified. If you need to modify the configuration, please use [config hook](/guides/topic-detail/framework-plugin/hook-list.html#config).
+This method returns a read-only configuration and cannot be modified. If you need to modify the configuration, please use [config hook](/plugin/plugin-system/hook-list.html#config).
 :::
 
 ### useAppContext

package/docs/en/plugin/rsbuild-plugins/_meta.json

@@ -0,0 +1 @@
+["plugin-esbuild"]

package/docs/en/plugin/rsbuild-plugins.mdx

@@ -0,0 +1,3 @@
+# Overview
+
+- [@modern-js/plugin-esbuild](/plugin/rsbuild-plugins/plugin-esbuild): Provides esbuild compilation support.

package/docs/en/tutorials/first-app/c03-css.mdx

@@ -294,7 +294,7 @@ A Utility Class named `custom-text-gray` is implemented in `src/routes/styles/ut
 ```
 
 :::info note
-Modern.js integrates with [PostCSS](/guides/basic-features/css) and supports modern CSS syntax features such as [custom properties](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties).
+Modern.js integrates with [PostCSS](/guides/basic-features/css/css) and supports modern CSS syntax features such as [custom properties](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties).
 
 :::
 

package/docs/zh/_meta.json

@@ -4,21 +4,26 @@
     "link": "/guides/get-started/introduction",
     "activeMatch": "/guides/"
   },
-  {
-    "text": "tutorials",
-    "link": "/tutorials/foundations/introduction",
-    "activeMatch": "/tutorials/"
-  },
   {
     "text": "configure",
     "link": "/configure/app/usage",
     "activeMatch": "/configure/"
   },
+  {
+    "text": "plugin-menu",
+    "link": "/plugin/introduction",
+    "activeMatch": "/plugin/"
+  },
   {
     "text": "apis",
     "link": "/apis/app/commands",
     "activeMatch": "/apis/"
   },
+  {
+    "text": "tutorials",
+    "link": "/tutorials/foundations/introduction",
+    "activeMatch": "/tutorials/"
+  },
   {
     "text": "community",
     "link": "/community/showcase",

package/docs/zh/apis/app/hooks/api/lambda.mdx

@@ -2,56 +2,13 @@
 title: lambda/*.[tj]s
 sidebar_position: 3
 ---
-# lambda/*.[tj]s
-
-在 [BFF 框架写法](/guides/advanced-features/bff/type.html#框架写法)下，声明 API 路由的文件。除了[某些约定文件](/apis/app/hooks/api/lambda#白名单)外，`lambda/` 目录下的文件会被注册为接口的路由。
-
-:::info
-使用 `api` 目录需要开启 BFF 功能，需要在项目下执行 new 命令启用「BFF」功能。
 
-:::
+# lambda/*.[tj]s
 
-:::tip
-该文件支持使用 `js` 或 `ts` 语言，但必须使用 `esm` 语法导出函数。
+开启 BFF 后，`lambda/` 目录下的文件会按照约定被注册为 BFF 的路由。
 
+:::note
+文件支持使用 `js` 或 `ts` 语言，但必须使用 `esm` 语法导出函数。
 :::
 
-## 路由规则
-
-### 默认路由
-
-路由系统会将以 `index` 命名的文件会被映射到上一层目录。
-
-- `api/lambda/index.ts` -> `$BASENAME/`
-- `api/lambda/user/index.ts` -> `$BASENAME/user`
-
-### 多级路由
-
-路由系统也支持解析多级的文件，如果创建文件夹结构，文件仍会以相同方式自动解析路由。
-
-- `api/lambda/hello.ts` -> `$BASENAME/hello`
-- `api/lambda/user/list.ts` -> `$BASENAME/user/list`
-
-### 动态路由
-
-路由系统支持通过 `[]` 命名的文件目录生成动态路由。
-
-- `api/lambda/user/[username]/info.ts` -> `$BASENAME/user/:username/info`
-- `api/lambda/user/[username]/delete.ts` -> `$BASENAME/user/:username/delete`
-- `api/lambda/article/[id]/info.ts` -> `$BASENAME/article/:id/info`
-
-其中的 `$BASENAME` 可以在 `modern.config.js` 中进行配置，默认值为 `/api`。
-
-### 白名单
-
-默认 `lambda` 目录下所有文件都会当作 BFF 函数文件去解析，但同样我们也设置了白名单，这些文件不被被解析：
-
-- 命名以 `_` 开头的文件。例如：`_utils.ts`。
-- 命名以 `_` 开头的文件夹下所有文件。例如：`_utils/index.ts`、`_utils/cp.ts`。
-- 测试文件。例如：`foo.test.ts`。
-- TypeScript 类型文件。例如：`hello.d.ts`。
-- `node_module` 下的文件。
-
-## 函数定义
-
-和函数写法下[函数定义](/apis/app/hooks/api/api#函数定义)完全一致。
+详细内容可以参考 [BFF 函数路由](/guides/advanced-features/bff/function.html#函数路由)。

package/docs/zh/apis/app/hooks/api/middleware.mdx

@@ -0,0 +1,11 @@
+---
+title: _app.[tj]s
+sidebar_position: 2
+---
+# _app.[tj]s
+
+该文件可以为 BFF 函数添加前置中间件，详细内容参考 [扩展 BFF Server](/guides/advanced-features/bff/extend-server)。
+
+:::note
+具体示例请参考 [hook](/apis/app/runtime/bff/hook)。
+:::

package/docs/zh/apis/app/runtime/core/use-loader.mdx

@@ -52,7 +52,7 @@ function useLoader(loaderFn: LoaderFn, options: Options): ReturnData;
   - `initialData`：首次执行前的初始数据，对应返回值中的 `data` 字段。
   - `skip`：当值为 `true` 时，函数不执行。
   - `params`：当 `params` 序列化结果发生改变时，函数会重新执行。同时，`params` 也会作为函数的第二个参数被传入。
-  - `static`：当值为 `true` 时，`useLoader` 用于 [SSG](/guides/advanced-features/ssg) 编译阶段数据的获取。
+  - `static`：当值为 `true` 时，`useLoader` 用于 [SSG](/guides/basic-features/render/ssg) 编译阶段数据的获取。
 
 ### 返回值
 

package/docs/zh/community/blog/v2-release-note.mdx

@@ -132,7 +132,7 @@ Modern.js 可以划分为三个核心部分：**CLI 工具、服务端和运行
 
 在字节跳动内部，我们借助这些插件 API，结合公司内的基建和平台，封装出内部的企业级框架。如果你需要对 Modern.js 框架进行深度定制，也可以借助这些插件 API 来完成。
 
-> 如果你对 Modern.js 的插件系统感兴趣，请阅读 [「Modern.js - 自定义插件」](https://modernjs.dev/guides/topic-detail/framework-plugin/introduction.html)文档。
+> 如果你对 Modern.js 的插件系统感兴趣，请阅读 [「Modern.js - 自定义插件」](https://modernjs.dev/plugin/plugin-system/introduction.html)文档。
 
 ### 嵌套路由
 

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

@@ -1,5 +1,22 @@
-1. 执行 `pnpm new`，选择启用 BFF
-2. 根据选择的运行时框架，将下面的代码添加到 `modern.config.[tj]s` 中：
+import { PackageManagerTabs } from '@theme';
+
+1. 执行 `new` 命令：
+
+<PackageManagerTabs command="run new" />
+
+2. 按照提示，选择**启用 BFF 功能**：
+
+```bash
+? 请选择你想要的操作 启用可选功能
+? 请选择功能名称 启用「BFF」功能
+? 请选择 BFF 类型 框架模式
+```
+
+:::note
+目前推荐使用框架模式创建 BFF，后续我们将会移除 BFF 类型的概念。
+:::
+
+3. 根据选择的运行时框架，将下面的代码添加到 `modern.config.[tj]s` 中：
 
 import { Tabs, Tab as TabItem } from "@theme";
 

package/docs/zh/components/extend-bff-function.mdx

@@ -0,0 +1,5 @@
+普通的 BFF 函数写法有时并不能满足需求，我们正在设计一套更强大的 BFF 函数写法，让开发者更方便地扩展 BFF 函数。
+
+:::note
+敬请期待
+:::

package/docs/zh/components/init-app.mdx

@@ -4,7 +4,6 @@
 ? 请选择你想创建的工程类型 Web 应用
 ? 请选择开发语言 TS
 ? 请选择包管理工具 pnpm
-? 请选择构建工具 webpack
 ```
 
 在生成项目后，Modern.js 会自动安装依赖、创建 git 仓库。

package/docs/zh/components/init-rspack-app.mdx

@@ -3,5 +3,4 @@ $ npx @modern-js/create@latest myapp
 ? 请选择你想创建的工程类型：Web 应用
 ? 请选择开发语言：TS
 ? 请选择包管理工具：pnpm
-? 请选择构建工具：Rspack
 ```

package/docs/zh/components/ssr-monitor.mdx

@@ -0,0 +1,3 @@
+:::note
+敬请期待
+:::

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

@@ -9,6 +9,10 @@ sidebar_position: 22
 
 用于配置 Modern.js 是否开启自动注册插件。
 
+:::warning
+该配置不推荐使用，相比手动注册插件，该配置相对黑盒且无法为插件添加自定义配置。
+:::
+
 ### 手动注册插件
 
 默认情况下，安装插件后，你需要在 `modern.config.ts` 文件中手动注册插件。

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

@@ -4,44 +4,22 @@ title: ssg
 
 # output.ssg
 
-- **类型：** `boolean` | `object` | `function`
+- **类型：** `boolean` | `object`
 - **默认值：** `undefined`
 
-开启**自控式路由**或**约定式路由** SSG 功能的配置。
+开启应用 SSG 功能的配置
 
-:::info 开启 SSG 功能
-此配置需要在开启 SSG 功能情况下才会生效。请阅读 [静态站点生成](/guides/advanced-features/ssg) 文档了解如何开启 SSG 功能。
+:::tip 开启 SSG 功能
+此配置需要在开启 SSG 功能情况下才会生效。请阅读 [静态站点生成](/guides/basic-features/render/ssg) 文档了解如何开启 SSG 功能及使用场景。
 :::
 
-:::info 客户端路由
-相关内容可以查看[路由方案](/guides/basic-features/routes)。
-
+:::info 前置阅读
+SSG 功能使用与路由关联性较大，建议使用前先了解[路由方案](/guides/basic-features/routes)。
 :::
 
-## 示例
-
-### 单入口
-
-当该配置设置为 `true` 时，将会默认开启所有入口的 SSG 功能。
-
-对**自控式路由**而言，将会渲染入口的根路由。对**约定式路由**而言，将会渲染入口中每一条路由。
-
-例如 `src/` 目录下有以下满足**约定式路由**的文件结构：
-
-```bash
-.
-├── src
-│   └── routes
-│       ├── layout.tsx
-│       ├── page.tsx
-│       └── user
-│           ├── layout.tsx
-│           ├── page.tsx
-│           └── profile
-│               └── page.tsx
-```
+## Boolean 类型
 
-在 `modern.config.js` 中做以下设置：
+当该配置设置为 `true` 时，将会默认开启所有入口的 SSG 功能。对**自控式路由**而言，将会渲染入口的根路由。对**约定式路由**而言，将会渲染入口中每一条路由。
 
 ```js
 export default defineConfig({
@@ -51,39 +29,20 @@ export default defineConfig({
 });
 ```
 
-执行 `pnpm build` 构建应用后。`dist/` 目录将会生成三张 HTML 分别对应三条路由（不开启 SSG 时只有一张 HTML），并且所有 HTML 都已经渲染。
-
-而例如下面的**自控式路由**：
-
-import SelfRouteExample from "@site-docs/components/self-route-example";
-
-<SelfRouteExample />
-
-同样使用上面的配置，在执行 `pnpm run build` 后，只有入口路由 `/` 会生成渲染后的 HTML。
-
-### 多入口
-
 `output.ssg` 也可以按照入口配置，配置生效的规则同样由入口路由方式决定。
 
-例如以下目录结构：
+例如以下目录结构，分别存在约定式路由入口 `entryA` 和自控式路由入口 `entryB`：
 
 ```bash
-。
-├── src
-│   ├── entryA
-│   │   └── routes
-│   │       ├── layout.tsx
-│   │       ├── page.tsx
-│   │       └── user
-│   │           ├── layout.tsx
-│   │           ├── page.tsx
-│   │           └── profile
-│   │               └── page.tsx
-│   └── entryB
-│       └── App.tsx
+.
+└── src
+    ├── entryA
+    │   └── routes
+    └── entryB
+        └── App.tsx
 ```
 
-默认情况下，所有约定式路由的入口，在设置 `output.ssg` 配置为 `true` 后都会在构建阶段渲染。可以配置 `false` 来取消指定入口的的默认行为，例如取消上述 entryA 入口在构建时的渲染：
+你可以指定 `entryA` 和 `entryB` 的不同 SSG 配置：
 
 ```js
 export default defineConfig({
@@ -96,107 +55,58 @@ export default defineConfig({
 });
 ```
 
-### 配置路由
-
-上述内容中提到，**自控式路由**默认只会开启入口路由的 SSG 配置。
-
-可以在 `output.ssg` 中设置具体的路由，告知 Modern.js 开启这些客户端路由的 SSG 功能。例如上述 `src/App.tsx` 的文件内容为：
-
-
-<SelfRouteExample />
-
-在 `modern.config.js` 中这样设置后，`/about` 路由也会开启 SSG 功能：
-
-```js
-export default defineConfig({
-  output: {
-    ssg: {
-      routes: ['/', '/about'],
-    },
-  },
-});
-```
-
-Modern.js 将会自动根据入口拼接完整的 URL 并交给 SSG 插件完成渲染。
-
-也可以为具体入口或路由配置请求头，例如：
-
-```js
-export default defineConfig({
-  output: {
-    ssg: {
-      headers: {},
-      routes: [
-        '/',
-        {
-          url: '/about',
-          headers: {},
-        },
-      ],
-    },
-  },
-});
-```
-
 :::info
-路由中设置的 `headers` 会覆盖入口中设置的 `headers`。
-
+更多关于**约定式路由**和**自控式路由**在开启 SSG 后的默认行为，请阅读 [静态站点生成](/guides/basic-features/render/ssg) 。
 :::
 
-### 阻止默认行为
+## Object 类型
 
-默认情况下，**约定式路由**的路由会全部开启 SSG。Modern.js 提供了另一个字段，用来阻止默认的 SSG 行为。
+当值类型为 `Object` 时，可以配置如下属性。
 
-例如以下目录结构，`/`、`/user`、`/user/profle` 三条路由都开启 SSG：
+### 配置类型
 
-```bash
-.
-├── src
-│   └── routes
-│       ├── layout.tsx
-│       ├── page.tsx
-│       └── user
-│           ├── layout.tsx
-│           ├── page.tsx
-│           └── profile
-│               └── page.tsx
-```
-
-可以这样设置，禁用某一条客户端路由的默认行为：
+```ts
+type SSGRouteOptions = string | {
+  url: string;
+  params?: Record<string, any>[];
+  headers?: Record<string, any>;
+};
 
-```js
-export default defineConfig({
-  output: {
-    ssg: {
-      preventDefault: ['/user'],
-    },
-  },
-});
+type SSGOptions = {
+  preventDefault?: string[];
+  headers?: Record<string, any>;
+  routes?: SSGRouteOptions[];
+};
 ```
 
-### 添加动态路由参数
+### 示例
 
-部分路由可能是动态的，例如自控式路由中的 `/user/:id` 或是约定式路由中 `user/[id]/page.tsx` 文件生成的路由。
+下面的示例配置中，SSG 会渲染 `/`、`/about` 和 `/user/:id` 三条路由对应的页面。
 
-可以在 `output.ssg` 中配置具体的参数，渲染指定参数的路由，例如：
+对于 `/user/:id` 路由，`cookies` 添加到请求头中，同时会将 `params` 中的 `id` 替换为 `modernjs`。
 
-```js
+```ts title="modern.config.ts"
 export default defineConfig({
   output: {
     ssg: {
       routes: [
+        '/', 
+        '/about',         
         {
           url: '/user/:id',
-          params: [
-            {
-              id: 'modernjs',
-            },
-          ],
-        },
+          headers: {
+            cookies: "name=modernjs"
+          },
+          params: [{
+            id: 'modernjs',
+          }],
+        }
       ],
-    },
-  },
+    }
+  }
 });
 ```
 
-动态路由和 SSG 的组合，在根据 CMS 系统数据变更，实时生成静态页面时非常有用。
+:::note
+多入口的情况和单入口的配置方式一致，这里不再额外介绍。
+:::

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

@@ -9,7 +9,7 @@ sidebar_position: 9
 
 用于配置自定义的 Modern.js 框架插件。
 
-自定义插件的编写方式请参考 [如何编写插件](/guides/topic-detail/framework-plugin/implement)。
+自定义插件的编写方式请参考 [如何编写插件](/plugin/plugin-system/implement)。
 
 ## 注意事项
 
@@ -33,7 +33,7 @@ Modern.js 中内置了三种不同的框架插件：
 
 默认情况下，自定义插件会按照 `plugins` 数组的顺序依次执行，Modern.js 内置插件的执行时机早于自定义插件。
 
-当插件内部使用了控制顺序的相关字段，比如 `pre`、`post` 时，会基于声明的字段对执行顺序进行调整，详见 [插件之间的关系](/guides/topic-detail/framework-plugin/relationship)。
+当插件内部使用了控制顺序的相关字段，比如 `pre`、`post` 时，会基于声明的字段对执行顺序进行调整，详见 [插件之间的关系](/plugin/plugin-system/relationship)。
 
 ## 示例
 

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

@@ -41,4 +41,4 @@ export default defineConfig({
 });
 ```
 
-完整配置项请参考 [esbuild 插件配置](/guides/rsbuild-plugins/plugin-esbuild.html#配置)。
+完整配置项请参考 [esbuild 插件配置](/plugin/rsbuild-plugins/plugin-esbuild#配置)。

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

@@ -77,4 +77,4 @@ export default defineConfig({
 });
 ```
 
-完整配置项请参考 [SWC 插件配置](/guides/rsbuild-plugins/plugin-swc.html#配置)。
+完整配置项请参考 [SWC 插件配置](/plugin/cli-plugins/plugin-swc.html#配置)。

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

@@ -23,7 +23,7 @@ const tailwind = {
 
 在使用 `tools.tailwindcss` 之前，你需要启用 Modern.js 的 Tailwind CSS 插件。
 
-请阅读[「使用 Tailwind CSS」](/guides/basic-features/css.html#使用-tailwind-css) 章节来了解开启方式。
+请阅读[「使用 Tailwind CSS」](/guides/basic-features/css/tailwindcss) 章节来了解开启方式。
 
 ### Function 类型
 

package/docs/zh/guides/_meta.json

@@ -24,11 +24,6 @@
     "name": "topic-detail",
     "label": "topic"
   },
-  {
-    "type": "dir",
-    "name": "rsbuild-plugins",
-    "label": "构建插件"
-  },
   {
     "type": "dir",
     "name": "troubleshooting",