@modern-js/main-doc 2.4.0 → 2.6.0

package/zh/apis/app/runtime/core/use-module-apps.mdx

@@ -25,20 +25,31 @@ import EnableMicroFrontend from "@site-docs/components/enable-micro-frontend";
 
 <EnableMicroFrontend />
 
+这里演示主应用为自控式路由的场景，全部场景参考 [体验微前端](/guides/topic-detail/micro-frontend/c02-development.html)
 ```tsx title=App.tsx
 function App() {
-  const { Home, Contact } = useModuleApps();
+  const { apps, MApp, Table, Dashboard } = useModuleApps();
+
+  // 使用的不是 MApp 组件，需要使用 createBrowserRouter 来创建路由
+  const router = createBrowserRouter(
+    createRoutesFromElements(
+      <Route path="/" element={<AppLayout />}>
+        <Route key={'table'} path={'table/*'} element={<Table />} />
+        <Route key={'dashboard'} path={'dashboard/*'} element={<Dashboard />} />
+      </Route>
+    )
+  );
 
   return (
-    <div>
-      Master APP
-      <Route exact path="/home">
-        <Home />
-      </Route>
-      <Route exact path="/home">
-        <Contact />
-      </Route>
-    </div>
+    // 方法一：使用 MApp 自动根据配置的 activeWhen 参数加载子应用(本项目配置在 modern.config.ts 中)
+    // <BrowserRouter>
+    //   <MApp />
+    // </BrowserRouter>
+
+    // 方法二：手动写 Route 组件方式加载子应用，方便于需要鉴权等需要前置操作的场景
+    <>
+      <RouterProvider router={router} />
+    </>
   );
 }
 
@@ -47,11 +58,11 @@ defineConfig(App, {
     apps: [
       {
         // name 区分大小写，name 提供的是什么 useModuleApps 返回的就是什么
-        name: 'Home',
+        name: 'Table',
         entry: 'http://127.0.0.1:8081/',
       },
       {
-        name: 'Contact',
+        name: 'Dashboard',
         entry: 'http://localhost:8082',
       },
     ],
@@ -59,7 +70,7 @@ defineConfig(App, {
 });
 ```
 
-通过 `useModuleApps()` 获取到 `Home` 和 `Contact` 子应用组件（名称和配置里的 `name` 字段对应），之后就可以像使用普通的 React 组件一样去加载子应用。
+通过 `useModuleApps()` 获取到 `Table` 和 `Dashboard` 子应用组件（名称和配置里的 `name` 字段对应），之后就可以像使用普通的 React 组件一样去加载子应用。
 
 ### 集中式路由
 
@@ -89,13 +100,13 @@ defineConfig(App, {
     apps: [
       {
         // name 区分大小写，name 提供的是什么 useModuleApps 返回的就是什么
-        name: 'Dashboard',
-        activeWhen: '/dashboard',
+        name: 'Table',
+        activeWhen: '/table',
         entry: 'http://127.0.0.1:8081/',
       },
       {
-        name: 'TableList',
-        activeWhen: '/table',
+        name: 'Dashboard',
+        activeWhen: '/dashboard',
         entry: 'http://localhost:8082',
       },
     ],
@@ -103,36 +114,66 @@ defineConfig(App, {
 });
 ```
 
-这样启动应用后，访问 `/dashboard` 路由，会渲染 `Dashboard` 子应用，访问 `/table` 路由，会渲染 `TableList` 子应用。
+这样启动应用后，访问 `/dashboard` 路由，会渲染 `Dashboard` 子应用，访问 `/table` 路由，会渲染 `Table` 子应用。
 
 ## 加载动画
 
 可以通过以下方式，自定义组件加载过程的过渡动画。
 
-```tsx title=App.tsx
-function App() {
-  const { Home } = useModuleApps();
+```js title="App.tsx"
+import { useModuleApps } from '@modern-js/plugin-garfish/runtime';
 
-  return (
-    <div>
-      Master APP
-      <Route exact path="/home">
-        <Home
-          loadable={{
-            loading: ({ pastDelay, error }: any) => {
-              if (error) {
-                console.error(error);
-                return <div>error: {error?.message}</div>;
-              } else if (pastDelay) {
-                return <div>loading</div>;
-              } else {
-                return null;
+import { RouterProvider, Route, createBrowserRouter, createRoutesFromElements, BrowserRouter, Link, Outlet } from '@modern-js/runtime/router';
+
+const AppLayout = () => (
+  <>
+    <div><Link to={'/table'}>加载约定式路由子应用</Link></div>
+    <div><Link to={'/dashboard'}>加载自控式路由子应用</Link></div>
+    <div><Link to={'/'}>卸载子应用</Link></div>
+    <Outlet />
+  </>
+)
+
+export default () => {
+  const { apps } = useModuleApps();
+
+  // 使用的不是 MApp 组件，需要使用 createBrowserRouter 来创建路由
+  const router = createBrowserRouter(
+    createRoutesFromElements(
+      <Route path="/" element={<AppLayout />}>
+        {apps.map(app => {
+          const { Component } = app;
+          // 模糊匹配，path 需要写成类似 abc/* 的模式
+          return (
+            <Route
+              key={app.name}
+              path={`${app.name.toLowerCase()}/*`}
+              element={
+              <Component
+                loadable={{
+                  loading: ({ pastDelay, error }: any) => {
+                    if (error) {
+                      return <div>error: {error?.message}</div>;
+                    } else if (pastDelay) {
+                      return <div>loading</div>;
+                    } else {
+                      return null;
+                    }
+                  },
+                }}
+              />
               }
-            },
-          }}
-        />
+            />
+          )
+        })}
       </Route>
-    </div>
+    )
   );
-}
+
+  return (
+    <>
+      <RouterProvider router={router} />
+    </>
+  );
+};
 ```

package/zh/apis/app/runtime/model/Provider.mdx

@@ -21,8 +21,8 @@ interface ProviderProps {
 
 ### 参数
 
-- store：[`createStore`](./create-store.md) 创建的 Store 对象。
-- config：创建 Reduck Store 的配置，同 [`createApp`](./create-app.md) 的 `config` 参数。
+- store：[`createStore`](./create-store.mdx) 创建的 Store 对象。
+- config：创建 Reduck Store 的配置，同 [`createApp`](./create-app.mdx) 的 `config` 参数。
 
 ## 示例
 

package/zh/apis/app/runtime/model/create-app.mdx

@@ -29,19 +29,19 @@ function createApp(config: AppConfig): object;
 ### 参数
 
 - config：`Record<string, any>`
-  - StoreConfig：同 [`createStore`](./create-store.md) 的参数。
+  - StoreConfig：同 [`createStore`](./create-store.mdx) 的参数。
   - devTools：默认值为 true。是否开启 Redux DevTools，当为对象类型时，支持配置 Redux DevTools 的 [Options](https://github.com/reduxjs/redux-devtools/blob/main/extension/docs/API/Arguments.md)。
-  - autoActions：默认值为 true。是否[自动生成 Actions](./auto-actions.md)。
+  - autoActions：默认值为 true。是否[自动生成 Actions](./auto-actions.mdx)。
 
 ### 返回值
 
 Reduck App，有以下属性组成：
 
-- Provider：为应用局部的组件树注入共享 Store 的组件。用法同 [`Provider`](./Provider.md)。
-- useModel：获取应用局部 Store 挂载的 Model 对象。用法同 [`useModel`](./use-model.md)。
-- useStaticModel：获取应用局部 Store 挂载的 Model 对象。用法同 [`useStaticModel`](./use-static-model.md)。
-- useLocalModel：获取应用局部 Store 挂载的 Model 对象。用法同 [`useLocalModel`](./use-local-model.md)。
-- useStore：获取应用局部使用的 Store 对象。用法同 [`useStore`](./use-store.md)。
+- Provider：为应用局部的组件树注入共享 Store 的组件。用法同 [`Provider`](./Provider.mdx)。
+- useModel：获取应用局部 Store 挂载的 Model 对象。用法同 [`useModel`](./use-model.mdx)。
+- useStaticModel：获取应用局部 Store 挂载的 Model 对象。用法同 [`useStaticModel`](./use-static-model.mdx)。
+- useLocalModel：获取应用局部 Store 挂载的 Model 对象。用法同 [`useLocalModel`](./use-local-model.mdx)。
+- useStore：获取应用局部使用的 Store 对象。用法同 [`useStore`](./use-store.mdx)。
 
 ## 示例
 

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

@@ -10,7 +10,7 @@ import ReduckTip from "@site-docs/components/reduck-tip"
 
 `createStore` 用于创建一个 Store 对象。Reduck 的 Store 基于 Redux 的 [Store](https://redux.js.org/api/store) 实现，用于存储应用的状态，同时提供一组用于管理状态和 Model 的方法。
 
-一般情况下，不需要使用这个 API，只有需要完全掌控 Store 的创建时，才会使用这个 API。例如，自定义一个 Store，传入 [`Provider`](./Provider.md) 组件使用。
+一般情况下，不需要使用这个 API，只有需要完全掌控 Store 的创建时，才会使用这个 API。例如，自定义一个 Store，传入 [`Provider`](./Provider.mdx) 组件使用。
 
 ## 函数签名
 
@@ -44,7 +44,7 @@ function createStore(config: StoreConfig): ReduckStore;
 
 Reduck Store 对象：
 
-- use：动态挂载和获取 Model 对象。用法与 [`useModel`](./use-model.md) 相同，但可以在 React 组件外使用。
+- use：动态挂载和获取 Model 对象。用法与 [`useModel`](./use-model.mdx) 相同，但可以在 React 组件外使用。
 - unmount：卸载 Model 对象，Model 的 State 会从 Store 中清除。
 - ReduxStore：Redux Store 对象具有的方法，[详见](https://redux.js.org/tutorials/fundamentals/part-4-store#redux-store)。
 

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/init-app.mdx

@@ -31,11 +31,11 @@ Modern.js 生成器除了在项目初始化时工作外，也能在后续研发
 .
 ├── node_modules
 ├── 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
 ├── modern.config.ts
 ├── package.json
 ├── pnpm-lock.yaml

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/bff/prefix.mdx

@@ -8,7 +8,7 @@ sidebar_label: prefix
 - **默认值：** `/api`
 
 :::caution 注意
-请先在当前应用项目根目录使用【[new](/apis/app/commands/new)】 启用 BFF 功能。
+请先在当前应用项目根目录使用【[new](/apis/app/commands#modern-new)】 启用 BFF 功能。
 
 :::
 

package/zh/configure/app/bff/proxy.mdx

@@ -8,7 +8,7 @@ sidebar_label: proxy
 - **默认值：** `{}`
 
 :::info 补充信息
-请先在当前应用项目根目录使用【[new](/apis/app/commands/new)】 启用 BFF 功能。
+请先在当前应用项目根目录使用【[new](/apis/app/commands#modern-new)】 启用 BFF 功能。
 
 :::
 

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/dev/before-start-url.mdx

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

package/zh/configure/app/dev/host.mdx

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

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

@@ -66,7 +66,7 @@ import SelfRouteExample from "@site-docs/components/self-route-example";
 ```bash
 。
 ├── src
-│   ├── entryA
+│   ├── entryA
 │   │   └── routes
 │   │       ├── layout.tsx
 │   │       ├── page.tsx
@@ -75,8 +75,8 @@ import SelfRouteExample from "@site-docs/components/self-route-example";
 │   │           ├── page.tsx
 │   │           └── profile
 │   │               └── page.tsx
-│   └── entryB
-│       └── App.tsx
+│   └── entryB
+│       └── App.tsx
 ```
 
 默认情况下，所有约定式路由的入口，在设置 `output.ssg` 配置为 `true` 后都会在构建阶段渲染。可以配置 `false` 来取消指定入口的的默认行为，例如取消上述 entryA 入口在构建时的渲染：

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/source/entries-dir.mdx

@@ -25,7 +25,7 @@ export default defineConfig({
 └── src
     └── pages
         ├── a
-        │   └── App.jsx
+        │   └── App.jsx
         └── b
             └── App.jsx
 ```

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/rspack-start.mdx

@@ -0,0 +1,69 @@
+---
+title: 使用 Rspack
+sidebar_position: 12
+---
+
+# 使用 Rspack
+
+[Rspack](https://www.rspack.org/) 是字节跳动 Web Infra 团队自研的 Rust Bundler，核心架构对齐 webpack 实现，并对社区常用的构建能力做了开箱即用的支持。
+
+Rspack 通过以下方式来提升编译性能：
+
+- 高度 LTO 优化的 Native code。
+- 充分利用多核优势，整个编译过程充分进行多线程优化。
+- 基于请求的按需编译（Lazy Compilation），减小每次编译的模块数目，以提升冷启动的速度。
+
+## 初始化 rspack 项目
+
+Modern.js 生成器会提供一个可交互的问答界面，只需将构建工具选择为**rspack**，即可创建一个 rspack 项目:
+
+```bash
+$ npx @modern-js/create myapp
+? 请选择你想创建的工程类型 应用
+? 请选择开发语言 TS
+? 请选择包管理工具 pnpm
+? 请选择构建工具 rspack
+```
+
+项目创建完成后，在项目中执行 `pnpm run dev` 即可体验项目。更多项目信息可参考[快速上手](/guides/get-started/quick-start.html)。
+
+:::tip
+使用 rspack 作为打包工具时，以下功能暂不支持使用:
+
+- 服务端渲染（SSR）
+- 静态站点生成（SSG）
+- 微前端（Micro Frontend）
+- Storybook 调试
+
+:::
+
+## 从 webpack 迁移至 rspack
+
+通过执行 `pnpm run new` 可启用 rspack 构建：
+
+```bash
+$ pnpm run new
+? 请选择你想要的操作 启用可选功能
+? 启用可选功能 启用「rspack 构建」
+```
+
+执行命令后，在 modern.config.ts 中开启 rspack 构建：
+
+```ts title=modern.config.ts
+import appTools, { defineConfig } from '@modern-js/app-tools';
+
+export default defineConfig<'rspack'>({
+  runtime: {
+    router: true,
+  },
+  plugins: [
+    appTools({
+      bundler: 'experimental-rspack',
+    }),
+  ],
+});
+```
+
+:::tip
+从 webpack 迁移至 rspack，会有一些构建和配置能力上的差异，详情可参考：[配置差异](https://modernjs.dev/builder/guide/advanced/rspack-start.html#从-webpack-迁移到-rspack)
+:::

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,
@@ -38,14 +37,14 @@ SSG 在**约定式路由**和**自控式路由**下的使用方式不同。
 ```
 .
 ├── src
-│   └── routes
-│       ├── layout.tsx
-│       ├── page.tsx
-│       └── user
-│           ├── layout.tsx
-│           ├── page.tsx
-│           └── profile
-│               └── page.tsx
+│   └── routes
+│       ├── layout.tsx
+│       ├── page.tsx
+│       └── user
+│           ├── layout.tsx
+│           ├── page.tsx
+│           └── profile
+│               └── page.tsx
 ```
 
 上述文件目录将会生成以下三条路由：

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

@@ -20,8 +20,8 @@ sidebar_position: 3
 
 Modern.js 中提供了 Data Loader，方便开发者在 SSR、CSR 下同构的获取数据。每个路由模块，如 `layout.tsx` 和 `page.tsx` 都可以定义自己的 Data Loader：
 
-```ts title="src/routes/page.tsx"
-export const loader = () => {
+```ts title="src/routes/page.loader.ts"
+export default () => {
   return {
     message: 'Hello World',
   };
@@ -31,6 +31,7 @@ export const loader = () => {
 在组件中可以通过 Hooks API 的方式获取 `loader` 函数返回的数据：
 
 ```tsx
+import { useLoaderData } from '@modern-js/runtime/router'
 export default () => {
   const data = useLoaderData();
   return <div>{data.message}</div>;

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
 }