@modern-js/main-doc 2.4.0 → 2.5.0

package/zh/apis/app/runtime/model/use-local-model.mdx

@@ -8,7 +8,7 @@ import ReduckTip from "@site-docs/components/reduck-tip"
 
 <ReduckTip />
 
-用于把 Model 中的 State 作为局部状态使用，效果类似 React 的 `useState`。`useLocalModel` API 形式上与 `useModel` 完全一致。具体使用请参考 [`useModel`](./use-model.md)。
+用于把 Model 中的 State 作为局部状态使用，效果类似 React 的 `useState`。`useLocalModel` API 形式上与 `useModel` 完全一致。具体使用请参考 [`useModel`](./use-model.mdx)。
 
 #### 示例
 

package/zh/apis/app/runtime/model/use-static-model.mdx

@@ -8,7 +8,7 @@ import ReduckTip from "@site-docs/components/reduck-tip"
 
 <ReduckTip />
 
-如果想在组件里以 React Hook 的形式消费某个 Model，并能随时获取到当前最新的状态，但又不希望 Model 状态更新的时候，引起组件的重新渲染，可以使用 `useStaticModel`。`useStaticModel` API 形式上与 `useModel` 完全一致。具体使用请参考 [`useModel`](./use-model.md)。
+如果想在组件里以 React Hook 的形式消费某个 Model，并能随时获取到当前最新的状态，但又不希望 Model 状态更新的时候，引起组件的重新渲染，可以使用 `useStaticModel`。`useStaticModel` API 形式上与 `useModel` 完全一致。具体使用请参考 [`useModel`](./use-model.mdx)。
 
 为了保证总是能获取到最新状态，注意不要对返回的 `state` 解构。
 

package/zh/apis/app/runtime/model/use-store.mdx

@@ -18,7 +18,7 @@ function useStore(): ReduckStore;
 
 ### 返回值
 
-- ReduckStore：Reduck Store，类型参考 [createStore](./create-store.md) 返回值。
+- ReduckStore：Reduck Store，类型参考 [createStore](./create-store.mdx) 返回值。
 
 :::info 更多参考
 [使用 Model](/guides/topic-detail/model/use-model#在组件外使用)

package/zh/apis/app/runtime/testing/renderApp.mdx

@@ -15,7 +15,7 @@ import { renderApp } from '@modern-js/runtime/testing';
 
 ## 函数签名
 
-`renderApp` 和 [render](./render.md) 完全一致。
+`renderApp` 和 [render](./render.mdx) 完全一致。
 
 ## 示例
 

package/zh/components/micro-runtime-config.mdx

@@ -4,13 +4,13 @@ import { defineConfig } from '@modern-js/runtime';
 defineConfig(App, {
   masterApp: {
     apps: [{
-      name: 'SubConvention',
-      entry: 'http://localhost:3002',
-      // activeWhen: '/SubConvention'
+      name: 'Table',
+      entry: 'http://localhost:8001',
+      // activeWhen: '/table'
     }, {
-      name: 'SubCustom',
-      entry: 'http://localhost:3003'
-      // activeWhen: '/SubConvention'
+      name: 'Dashboard',
+      entry: 'http://localhost:8002'
+      // activeWhen: '/dashboard'
     }]
   },
 });

package/zh/components/release-note.mdx

@@ -1 +1 @@
-根据官网 [Release Note](https://github.com/modern-js-dev/modern.js/releases/tag/v1.22.1)，开发者也可以手动将项目升级到想要的版本。
+根据官网 [Release Note](https://github.com/modern-js-dev/modern.js/releases)，开发者也可以手动将项目升级到想要的版本。

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

@@ -9,7 +9,7 @@ sidebar_position: 10
 
 用于配置 Modern.js Builder 构建插件。
 
-Modern.js Builder 是 Modern.js 底层的构建引擎，请阅读 [构建能力](/guides/basic-features/builder) 了解相关背景。
+Modern.js Builder 是 Modern.js 底层的构建引擎，请阅读 [构建能力](/guides/concept/builder) 了解相关背景。
 
 如果你想了解 Builder 插件的编写方式，可以参考 [Modern.js Builder - 插件系统](https://modernjs.dev/builder/plugins/introduction.html)。
 
@@ -17,13 +17,13 @@ Modern.js Builder 是 Modern.js 底层的构建引擎，请阅读 [构建能力]
 
 该选项**用于配置 Modern.js Builder 构建插件**，如果你需要配置其他类型的插件，请选择对应的配置方式：
 
-- 配置 Modern.js 框架插件，请使用 [plugins](docs/configure/app/plugins) 配置项。
+- 配置 Modern.js 框架插件，请使用 [plugins](/configure/app/plugins) 配置项。
 - 配置 webpack 插件，请使用 [tools.webpack](/configure/app/tools/webpack) 或 [tools.webpackChain](/configure/app/tools/webpack-chain) 配置项。
 - 配置 Babel 插件，请使用 [tools.babel](/configure/app/tools/babel) 配置项。
 
 ## 何时使用
 
-大部分场景下，我们推荐你使用 Modern.js 框架插件，框架插件可以通过 [plugins](docs/configure/app/plugins) 字段进行注册。因为框架插件提供的 API 更丰富、能力更强，而 Builder 插件提供的 API 只能用于构建场景。
+大部分场景下，我们推荐你使用 Modern.js 框架插件，框架插件可以通过 [plugins](/configure/app/plugins) 字段进行注册。因为框架插件提供的 API 更丰富、能力更强，而 Builder 插件提供的 API 只能用于构建场景。
 
 当你需要引用一些现有的 Builder 插件（并且在 Modern.js 中没有相关能力），或是在不同的框架之间复用 Builder 插件时，你可以使用 `builderPlugins` 字段进行注册。
 

package/zh/configure/app/plugins.mdx

@@ -15,7 +15,7 @@ sidebar_position: 9
 
 该选项**用于配置框架插件**，如果你需要配置其他类型的插件，请选择对应的配置方式：
 
-- 配置 Modern.js Builder 插件，请使用 [builderPlugins](docs/configure/app/builder-plugins) 配置项。
+- 配置 Modern.js Builder 插件，请使用 [builderPlugins](/configure/app/builder-plugins) 配置项。
 - 配置 webpack 插件，请使用 [tools.webpack](/configure/app/tools/webpack) 或 [tools.webpackChain](/configure/app/tools/webpack-chain) 配置项。
 - 配置 Babel 插件，请使用 [tools.babel](/configure/app/tools/babel) 配置项。
 

package/zh/configure/app/server/ssr-by-entries.mdx

@@ -7,7 +7,7 @@ sidebar_label: ssrByEntries
 - **类型：** `Object`
 - **默认值：** `undefined`
 
-按入口设置 ssr 选项，选项内的属性同 [ssr](./ssr.md)，指定值会和 ssr 属性内容做替换合并操作，例如：
+按入口设置 ssr 选项，选项内的属性同 [ssr](./ssr.mdx)，指定值会和 ssr 属性内容做替换合并操作，例如：
 
 :::info
 「 入口名 」默认为目录名，少数情况下通过 `source.entries` 自定义入口时，入口名为 `source.entries` 对象的 `key`。

package/zh/configure/app/tools/rspack.mdx

@@ -0,0 +1,13 @@
+---
+sidebar_label: rspack
+---
+
+# tools.rspack
+
+:::tip
+该配置由 Modern.js Builder 提供，更多信息可参考 [tools.rspack](https://modernjs.dev/builder/api/config-tools.html#toolsrspack)。
+:::
+
+import Main from '@modern-js/builder-doc/docs/zh/config/tools/rspack.md'
+
+<Main />

package/zh/configure/app/usage.mdx

@@ -12,7 +12,7 @@ Modern.js 中有两种配置，一个是编译时配置，一个是服务端运
 - `package.json` 文件
 
 :::info
-不支持同时在 package.json 中和 modern.config.ts 中配置同一个配置项，推荐优先在 modern.config.ts 中进行配置。如果 Modern.js 检测到重复配置导致的冲突，将会抛出警告。
+Modern.js 不支持同时在 package.json 中和 modern.config.ts 中配置同一个配置项，推荐优先在 modern.config.ts 中进行配置。如果 Modern.js 检测到重复配置导致的冲突，将会抛出警告。
 :::
 
 服务端运行时配置可以在根路径下的 `modern.server-runtime.config.(ts|js|mjs)` 中自定义配置选项。

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

@@ -1,9 +1,5 @@
 {
   "label": "进阶功能",
-  "position": 4,
-  "collapsed": true,
-  "link": {
-    "type": "doc",
-    "id": "guides/advanced-features/index"
-  }
+  "position": 6,
+  "collapsed": false
 }

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

@@ -55,7 +55,6 @@ Modern.js 中还提供了基于浏览器 [UA](https://developer.mozilla.org/zh-C
 ```ts title="modern.config.ts"
 import polyfillPlugin from '@modern-js/plugin-polyfill';
 
-// https://modernjs.dev/docs/apis/app/config
 export default defineConfig({
   plugins: [..., polyfillPlugin()],
 });

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

@@ -18,7 +18,6 @@ SSG（Static Site Generation）是一种基于数据与模板，在构建时渲
 ```ts title="modern.config.ts"
 import ssgPlugin from '@modern-js/plugin-ssg';
 
-// https://modernjs.dev/docs/apis/app/config
 export default defineConfig({
   output: {
     ssg: true,

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

@@ -20,7 +20,6 @@ Modern.js 默认继承了 [Jest](https://jestjs.io/) 的测试能力。
 ```ts title="modern.config.ts"
 import testPlugin from '@modern-js/plugin-testing';
 
-// https://modernjs.dev/docs/apis/app/config
 export default defineConfig({
   ...,
   plugins: [..., testPlugin()],

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

@@ -22,7 +22,6 @@ Modern.js 作为以客户端为中心的开发框架，对服务端的定制能
 ```ts title="modern.config.ts"
 import serverPlugin from '@modern-js/plugin-server';
 
-// https://modernjs.dev/docs/apis/app/config
 export default defineConfig({
   plugins: [..., serverPlugin()],
 });

package/zh/guides/basic-features/_category_.json

@@ -1,9 +1,5 @@
 {
   "label": "基础功能",
   "position": 3,
-  "collapsed": false,
-  "link": {
-    "type": "doc",
-    "id": "guides/basic-features/index"
-  }
+  "collapsed": false
 }

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

@@ -62,4 +62,4 @@ export default defineConfig({
 });
 ```
 
-具体别名配置可以参考 【[API 资料 - source.alias](/configure/app/source/alias)】。
+对于别名配置的具体用法，请参考 [source.alias 文档](/configure/app/source/alias)。

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

@@ -2,6 +2,7 @@
 title: 数据获取
 sidebar_position: 3
 ---
+
 # 数据获取
 
 Modern.js 中提供了开箱即用的数据获取能力，开发者可以通过这些 API，在 CSR 和 SSR 环境同构的进行开发。
@@ -220,38 +221,46 @@ export default function UserLayout() {
 
 :::
 
+创建 `user/layout.loader.ts`，并添加以下代码：
+
+```ts title="routes/user/layout.loader.ts"
+import { defer } from "@edenx/runtime/router"
+
+const loader = () =>
+defer({
+  userInfo: new Promise((resolve) => {
+      setTimeout(() => {
+        resolve({
+          age: 1,
+          name: 'user layout'
+        })
+      }, 1000)
+    })
+  })
+
+export default loader;
+```
+
 在 `user/layout.tsx` 中添加以下代码：
 
 ```tsx title="routes/user/layout.tsx"
-import {
-  Await,
-  defer,
-  useLoaderData,
-  Outlet
-} from '@modern-js/runtime/router';
-
-export const loader = () => {
-  return defer({
-    // fetchUserInfo 是一个异步函数，返回用户信息
-    userInfo: fetchUserInfo(),
-  })
-}
+import { Await, defer, useLoaderData, Outlet } from '@modern-js/runtime/router';
 
 export default function UserLayout() {
-  const { userInfo } = useLoaderData() as {userInfo: Promise<UserInfo>};
+  const { userInfo } = useLoaderData() as { userInfo: Promise<UserInfo> };
   return (
     <div>
-      <React.Suspense
-        fallback={<p>Loading...</p>}
-      >
-        <Await resolve={userInfo} children={userInfo => (
-          <div>
-            <span>{userInfo.name}</span>
-            <span>{userInfo.age}</span>
-            <Outlet>
-          </div>
-        )}>
-        </Await>
+      <React.Suspense fallback={<p>Loading...</p>}>
+        <Await
+          resolve={userInfo}
+          children={userInfo => (
+            <div>
+              <span>{userInfo.name}</span>
+              <span>{userInfo.age}</span>
+              <Outlet />
+            </div>
+          )}
+        ></Await>
       </React.Suspense>
     </div>
   );
@@ -265,7 +274,7 @@ defer 的具体用法请查看 [defer](https://reactrouter.com/en/main/guides/de
 
 :::
 
-{/* TODO 缓存相关  */}
+{/* TODO 缓存相关 */}
 
 ### 错误用法
 

package/zh/guides/basic-features/html.mdx

@@ -2,9 +2,10 @@
 title: HTML 模板
 sidebar_position: 9
 ---
+
 # HTML 模板
 
-Modern.js 提供了 **JSX 语法**和**HTML(Ejs) 语法**两种方式用于自定义 HTML 模板。
+Modern.js 提供了 **JSX 语法**和 **HTML(EJS) 语法**两种方式用于自定义 HTML 模板。
 
 ## JSX 语法
 
@@ -14,14 +15,14 @@ Modern.js 约定，在 `src/` 目录下，或在入口目录下，可以创建 `
 
 ```bash
 .
-├── src
-│   ├── Document.tsx
-│   ├── entry-a
-│   │   ├── Document.tsx
-│   │   └── routes
-│   ├── entry-b
-│   │   └── routes
-│   └── modern-app-env.d.ts
+└── src
+    ├── Document.tsx
+    ├── entry-a
+    │   ├── Document.tsx
+    │   └── routes
+    ├── entry-b
+    │    └── routes
+    └── modern-app-env.d.ts
 ```
 
 `entry-a` 会优先使用当前入口下的 `Docoument.[jt]sx` 文件。如果当前入口没有 `Document.[jt]sx` 文件，例如 `entry-b`，则会查找根目录下的 `Document.[jt]sx` 文件。

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

@@ -77,3 +77,23 @@ module.exports = {
   },
 };
 ```
+
+## 按需使用 Mock 服务
+
+`config/mock/index.ts` 下还可以到处 `config` 对象，更精细的控制 Mock 服务。
+
+```ts
+type MockConfig = {
+  enable: ((req: IncomingMessage, res: ServerResponse) => boolean) | boolean;
+};
+
+export const config = {
+  enable: false
+}
+```
+
+目前仅支持 `enable` 配置，开发者可以通过该配置控制是否执行 Mock。
+
+:::note
+修改 `config` 后无需重启服务，即刻生效。
+:::

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

@@ -4,7 +4,7 @@ sidebar_position: 1
 ---
 # 路由
 
-Modern.js 的路由基于 [React Router 6](https://reactrouter.com/en/main)，并提供了多种类型的路由模式。根据不同[入口](/docs/guides/concept/entries)类型，将路由分为三种模式，分别是**约定式路由**，**自控式路由**和**其他路由方案**。
+Modern.js 的路由基于 [React Router 6](https://reactrouter.com/en/main)，并提供了多种类型的路由模式。根据不同 [入口](/guides/concept/entries) 类型，将路由分为三种模式，分别是**约定式路由**，**自控式路由**和**其他路由方案**。
 
 :::note
 本小节提到的路由，都是客户端路由，即 SPA 路由。
@@ -164,7 +164,7 @@ export default () => {
 
 `routes/[id]/page.tsx` 文件会转为 `/:id` 路由。除了可以确切匹配的 `/blog` 路由，其他所有 `/xxx` 都会匹配到该路由。
 
-在组件中，可以通过 [useParams](/apis/app/runtime/router/#useparams) 获取对应命名的参数。
+在组件中，可以通过 [useParams](/apis/app/runtime/router/router#useparams) 获取对应命名的参数。
 
 在 loader 中，params 会作为 [loader](/guides/basic-features/data-fetch#loader-函数) 的入参，通过 `params.xxx` 可以获取。
 
@@ -185,7 +185,7 @@ export default () => {
     └── page.tsx
 ```
 
-当访问任何匹配不到的路径时，都会渲染 `routes/$.tsx` 组件，同样，`$.tsx` 中可以使用 [useParams](/apis/app/runtime/router/#useparams) 捕获 url 的剩余部分。
+当访问任何匹配不到的路径时，都会渲染 `routes/$.tsx` 组件，同样，`$.tsx` 中可以使用 [useParams](/apis/app/runtime/router/router#useparams) 捕获 url 的剩余部分。
 ```ts title="$.tsx"
 import { useParams } from '@modern-js/runtime/router';
 // 当 path 是 `/aaa/bbb` 时
@@ -302,7 +302,7 @@ Modern.js 建议必须有根 layout 和根 loading。
 
 {/* Todo API 路由 */}
 
-在 `<ErrorBoundary>` 组件内，可以使用 [useRouteError](/apis/app/runtime/router/#useparams) 获取的错误的具体信息：
+在 `<ErrorBoundary>` 组件内，可以使用 [useRouteError](/apis/app/runtime/router/router#useparams) 获取的错误的具体信息：
 
 ```tsx
 import { useRouteError } from '@modern-js/runtime/router';
@@ -329,8 +329,15 @@ import type { AppConfig } from '@modern-js/runtime';
 export const config = (): AppConfig => {
   return {
     router: {
-      supportHtml5History: false
-    }
+      createRoutes() {
+        return [
+          {
+            path: 'edenx',
+            element: <div>edenx</div>,
+          },
+        ];
+      },
+    },
   }
 };
 ```
@@ -380,12 +387,10 @@ export default () => {
 配合 SSR 功能时，浏览器端可以获取到 SSR 时 `init` 返回的数据，开发者可以自行判断是否要在浏览器端重新获取数据来覆盖 SSR 数据，例如：
 
 ```tsx title="src/routes/layout.tsx"
-import {
-  RuntimeContext,
-} from '@modern-js/runtime';
+import { RuntimeContext } from '@modern-js/runtime';
 
 export const init = (context: RuntimeContext) => {
-  if (process.env.JUPITER_TARGET === 'node') {
+  if (process.env.MODERN_TARGET === 'node') {
     return {
       message: 'Hello World By Server',
     }

package/zh/guides/{basic-features → concept}/builder.mdx

@@ -1,8 +1,8 @@
 ---
-title: 构建能力
 sidebar_position: 2
 ---
-# 构建能力
+
+# 构建引擎
 
 **Modern.js 的构建能力由 [Modern.js Builder](https://modernjs.dev/builder) 提供。**
 

package/zh/guides/concept/entries.mdx

@@ -1,7 +1,7 @@
 ---
-title: 入口
-sidebar_position: 2
+sidebar_position: 1
 ---
+
 # 入口
 
 入口是 Modern.js 默认的文件约定，项目的每一个入口是一张独立的页面，对应一条**服务端路由**。
@@ -15,11 +15,11 @@ Modern.js 初始化的项目是单入口的，项目结构如下：
 ```
 .
 ├── src
-│   ├── modern-app-env.d.ts
-│   └── routes
-│       ├── index.css
-│       ├── layout.tsx
-│       └── page.tsx
+│   ├── modern-app-env.d.ts
+│   └── routes
+│       ├── index.css
+│       ├── layout.tsx
+│       └── page.tsx
 ├── package.json
 ├── modern.config.ts
 ├── pnpm-lock.yaml
@@ -41,10 +41,10 @@ Modern.js 可以很方便的将单入口切换成多入口。可以在项目下
 .
 ├── modern-app-env.d.ts
 ├── myapp
-│   └── routes
-│       ├── index.css
-│       ├── layout.tsx
-│       └── page.tsx
+│   └── routes
+│       ├── index.css
+│       ├── layout.tsx
+│       └── page.tsx
 └── new-entry
     └── routes
         ├── index.css

package/zh/guides/css/_category_.json

@@ -0,0 +1,5 @@
+{
+  "label": "CSS 开发方案",
+  "position": 5,
+  "collapsed": false
+}

package/zh/guides/{basic-features/css → css}/less-sass.mdx

@@ -12,6 +12,6 @@ sidebar_position: 4
 - 如果需要自定义 [sass-loader](https://github.com/webpack-contrib/sass-loader) 的配置，请参考 [tools.less](/configure/app/tools/sass) 配置项。
 
 :::tip 提示
-经过 Less 和 Sass 预编译后的 CSS 文件，仍然会经过 Modern.js 内置的 [PostCSS](https://postcss.org/) 的转换，具备良好的浏览器兼容性。相关内容请参考【[PostCSS](/guides/basic-features/css/postcss)】。
+经过 Less 和 Sass 预编译后的 CSS 文件，仍然会经过 Modern.js 内置的 [PostCSS](https://postcss.org/) 的转换，具备良好的浏览器兼容性。相关内容请参考【[PostCSS](/guides/css/postcss)】。
 
 :::

package/zh/guides/{basic-features/css → css}/postcss.mdx

@@ -10,10 +10,11 @@ sidebar_position: 3
 
 1. [Autoprefixer](https://github.com/postcss/autoprefixer) 根据需要支持的浏览器范围，会自动为 CSS 规则添加需要的浏览器厂商前缀。Modern.js 默认支持的浏览器范围为：`['> 0.01%', 'not dead', 'not op_mini all']`。
 
-:::info意
-  - 【支持的浏览器范围为：`> 0.01%`】是指浏览器市场份额大于 0.01%。
-  - `not dead` 是指不包含官方不再支持的浏览器和过去24个月没有更新的浏览器。
-  - `not op_mini all` 是指不包含 Opera Mini。
+:::info 注意
+
+- 【支持的浏览器范围为：`> 0.01%`】是指浏览器市场份额大于 0.01%。
+- `not dead` 是指不包含官方不再支持的浏览器和过去 24 个月没有更新的浏览器。
+- `not op_mini all` 是指不包含 Opera Mini。
 
 :::
 

package/zh/guides/{basic-features/css → css}/tailwindcss.mdx

@@ -18,7 +18,6 @@ sidebar_position: 2
 ```ts title="modern.config.ts"
 import tailwindcssPlugin from '@modern-js/plugin-tailwindcss';
 
-// https://modernjs.dev/docs/apis/app/config
 export default defineConfig({
   plugins: [..., tailwindcssPlugin()],
 });

package/zh/guides/get-started/introduction.mdx

@@ -0,0 +1,31 @@
+---
+title: 介绍
+sidebar_position: 1
+---
+
+# Modern.js 介绍
+
+**Modern.js** 是基于 React 的渐进式现代 Web 开发框架。
+
+框架内置多种开箱即用的开发工具，拥有极致的构建性能，支持零配置的渲染范式切换，一体化的 API 调用。并从三种工程方案出发（应用工程方案、模块工程方案，Monorepo 工程方案），支持全链路的前端研发。
+
+Modern.js 是字节跳动的底层前端研发框架，已经直接或间接的服务上千个应用，包括中后台、PC Web、H5 等多种应用场景。框架覆盖完整的生命周期，拥有完善的插件体系，提供高度定制能力。支持通过生成器插件自定义业务线专属的工程方案，定制各种功能扩展和业务需求，帮助开发者更快速的搭建应用。
+
+## 为什么使用 Modern.js
+
+Modern.js 能为开发者提供极致的**开发体验（Development Experience）**，让应用拥有更好的**用户体验（User Experience）**。
+
+在开发 React 应用过程中，开发者通常需要去为某些功能去设计实现方案，或是使用其他的库、框架来解决这些问题。Modern.js 支持 React 应用所需要的所有配置和工具，并内置**额外的功能和优化**。开发者可以使用 React 构建应用的 UI，然后逐步采用 Modern.js 的功能来解决常见的应用需求，如路由、数据获取、状态管理等。
+
+它主要包含以下特点：
+
+- 🪜 **渐进式**：使用最精简的模板创建项目，通过生成器逐步开启插件功能，定制解决方案。
+- 🏠 **一体化**：开发与生产环境 Web Server 唯一，CSR 和 SSR 同构开发，函数即接口的 API 服务调用。
+- 📦 **开箱即用**：默认 TS 支持，内置构建、ESLint、调试工具，全功能可测试。
+- 🌏 **周边生态**：自研状态管理、微前端、模块打包、Monorepo 方案等周边需求。
+- 🕸 **多种路由模式**：包含自控路由、基于文件约定的路由（嵌套路由）等。
+- 🚀 **独立构建核心**：支持多种打包工具，深度优化构建产物。
+
+## 下一步
+
+如果你希望了解如何使用 Modern.js，可以尝试 [创建第一个应用](/tutorials/first-app/c01-start)，或是阅读 [快速上手](/guides/get-started/quick-start)。

package/zh/guides/get-started/quick-start.mdx

@@ -1,6 +1,6 @@
 ---
 title: 快速上手
-sidebar_position: 1
+sidebar_position: 2
 ---
 # 快速上手
 
@@ -45,10 +45,9 @@ import DebugApp from "@site-docs/components/debug-app"
 
 可以通过配置文件来开启功能，或覆盖 Modern.js 的默认行为。例如添加如下配置，开启 SSR：
 
-```ts
+```ts title="modern.config.ts"
 import appTools, { defineConfig } from '@modern-js/app-tools';
 
-// https://modernjs.dev/docs/apis/app/config
 export default defineConfig({
   runtime: {
     router: true,

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

@@ -1,7 +1,8 @@
 ---
 title: 升级
-sidebar_position: 2
+sidebar_position: 3
 ---
+
 # 升级
 
 ## 通过命令行升级

package/zh/guides/topic-detail/_category_.json

@@ -1,5 +1,5 @@
 {
   "label": "专题详解",
-  "position": 5,
-  "collapsed": true
+  "position": 6,
+  "collapsed": false
 }

package/zh/guides/topic-detail/generator/plugin/api/input/addInputBefore.mdx

@@ -45,7 +45,7 @@ context.addInputBefore('packageManager', {
 });
 ```
 
-:::info意事项
+:::info 注意事项
 
 1. 添加问题的 key 不能和 Modern.js 提供的项目类型自身的问题的 key 重复
 

package/zh/guides/topic-detail/micro-frontend/c02-development.mdx

@@ -251,6 +251,31 @@ export default (props: {basename: string}) => {
 
 在完成了微前端整体开发流程的体验后，你可以进一步了解如何 [开发主应用](/guides/topic-detail/micro-frontend/c03-main-app)
 
+## Modern.js 微前端和直接使用 Garfish 的区别
+
+使用纯 `Garfish` API 开发微前端应用时
+- 主应用：
+  - 安装 Garfish 依赖并使用 `Garfish.run` 注册子应用 [参考](https://www.garfishjs.org/api/run)
+  - 提供一个常驻的 `DOM` 节点供子应用挂载 [参考](https://www.garfishjs.org/api/registerApp#domgetter)
+- 子应用：
+  - 导出 `provider` [参考](https://www.garfishjs.org/guide/start#2%E5%AF%BC%E5%87%BA-provider-%E5%87%BD%E6%95%B0)
+  - 设置应用的 `basename` [参考](https://www.garfishjs.org/guide/start#3-%E8%AE%BE%E7%BD%AE%E5%BA%94%E7%94%A8%E8%B7%AF%E7%94%B1-basename)
+
+区别于直接使用 `Garfish` 运行时 API 开发微前端项目，`Modern.js` 的微前端方案更加开箱即用。
+使用 `pnpm new` 启用微前端模式后会自动在 `Modern.js` 应用中集成 `Garfish` 插件，在 `Garfish`
+插件的加持下，你只需要
+- 主应用：
+  - 配置 `runtime.masterApp.apps` 参数注册子应用
+  - 使用 `useModuleApps` API 获取子应用实例并在组件中完成渲染
+- 子应用：
+  - 配置 `deploy.microFrontend`
+
+所以插件中为你做了如下事情
+  - 帮助你通过 `Garfish` 运行时 API 自动注册子应用（主应用）
+  - `useModulesApps` 函数的返回值提供了一个常驻的 `DOM` 节点供子应用挂载（主应用）
+  - 帮助你正确导出了 `provider`（子应用）
+  - 帮助你正确设置了 `basename` 给 `Modern.js` 运行时提供 `Router` 实例，如果是`自控式路由`或`手动引入的 react-router-dom` 那么需要从 `App.tsx` 的 `props` 中获取 `basename` 手动传递给引入的 `Router 实例`（子应用）
+
 ## 常见问题
 
 自查手册: https://www.garfishjs.org/issues/