docs: update runtime doc (#7076)

Author: caohuilin

packages/document/main-doc/docs/en/configure/app/runtime/0-intro.mdx

@@ -2,12 +2,20 @@
 
 Modern.js runtime configuration should be centralized in the `src/modern.runtime.ts` file.
 
+:::warning
+
+Using the `src/modern.runtime.ts` configuration approach requires Modern.js version **MAJOR_VERSION.66.0** or higher.
+
+:::
+
 :::info
+
 If this file doesn't exist in your project yet, create it with the following command:
 
 ```bash
 touch src/modern.runtime.ts
 ```
+
 :::
 
 ## Basic Configuration
@@ -33,7 +41,7 @@ For multi-entry applications, `defineRuntimeConfig` can accept a function that r
 ```tsx
 import { defineRuntimeConfig } from '@modern-js/runtime';
 
-export default defineRuntimeConfig((entryName) => {
+export default defineRuntimeConfig(entryName => {
   if (entryName === 'main') {
     return {
       router: {
@@ -53,12 +61,11 @@ export default defineRuntimeConfig((entryName) => {
   };
 });
 ```
+
 :::tip
+
 Using the `src/modern.runtime.ts` configuration approach does not support exporting asynchronous functions, which is related to the rendering method of Modern.js. If you need to add asynchronous logic, please use the **[Runtime Plugin](/plugin/introduction.html#runtime-plugin)**.
-:::
 
-:::warning
-Using the `src/modern.runtime.ts` configuration approach requires Modern.js version **MAJOR_VERSION.66.0** or higher.
 :::
 
 import RuntimeCliConfig from '@site-docs/components/runtime-cli-config';
@@ -79,15 +86,23 @@ To improve maintainability, Modern.js introduced the unified `src/modern.runtime
 ```ts
 // modern.config.ts
 export default {
-  runtime: { /* ... */ },
-  runtimeByEntries: { /* ... */ },
+  runtime: {
+    /* ... */
+  },
+  runtimeByEntries: {
+    /* ... */
+  },
 };
 
 // App.config
-App.config = {/* ... */}
+App.config = {
+  /* ... */
+};
 
 // layout file
-export const config = () => { /* Dynamic configuration logic */ };
+export const config = () => {
+  /* Dynamic configuration logic */
+};
 ```
 
 ### Migration Recommendation

packages/document/main-doc/docs/en/guides/basic-features/routes.mdx

@@ -7,7 +7,9 @@ sidebar_position: 2
 Modern.js routing is based on [React Router 6](https://reactrouter.com/en/main), offering file convention-based routing capabilities and supporting the industry-popular **nested routing** pattern. When an entry is recognized as [conventional routing](/guides/concept/entries.html#conventional-routing), Modern.js automatically generates the corresponding routing structure based on the file system.
 
 :::note
+
 The routing mentioned in this section all refers to conventional routing.
+
 :::
 
 ## What is Nested Routing
@@ -38,7 +40,9 @@ In the `routes/` directory, subdirectory names are mapped to route URLs. Modern.
 - `layout.tsx`: This is the layout component and controls the layout of all sub-routes in its directory by using `<Outlet>` to represent child components.
 
 :::tip
+
 `.ts`, `.js`, `.jsx`, or `.tsx` file extensions can be used for the above convention files.
+
 :::
 
 ### Page
@@ -83,7 +87,9 @@ export default () => {
 ```
 
 :::note
+
 `<Outlet>` is an API provided by React Router 6. For more details, see [Outlet](https://reactrouter.com/en/main/components/outlet#outlet).
+
 :::
 
 Under different directory structures, the components represented by `<Outlet>` are also different. To illustrate the relationship between `<Layout>` and `<Outlet>`, let's consider the following directory structure:
@@ -219,7 +225,7 @@ When you visit `/blog/a` and no routes match, the page will render the `routes/b
 </RootLayout>
 ```
 
-If you want `/blog` to match the `blog/$.tsx` file as well, you need to remove the `blog.tsx` file from the same directory and ensure there are no other sub-routes under `blog`.
+If you want `/blog` to match the `blog/$.tsx` file as well, you need to remove the `blog/layout.tsx` file from the same directory and ensure there are no other sub-routes under `blog`.
 
 Similarly, you can use [useParams](/apis/app/runtime/router/router#useparams) to capture the remaining part of the URL in the `$.tsx` component.
 
@@ -480,6 +486,8 @@ The `prefetch` attribute has three optional values:
 
 :::
 
+import Motivation from '@site-docs-en/components/convention-routing-motivation';
+
 <Motivation />
 
 ## FAQ
@@ -496,4 +504,34 @@ Additionally, when using conventional routing, make sure to use the API from `@m
 If you must directly use the React Router package's API (e.g., route behavior wrapped in a unified npm package), you can set [`source.alias`](/configure/app/source/alias) to point `react-router` and `react-router-dom` to the project's dependencies, avoiding the issue of two versions of React Router.
 :::
 
-import Motivation from '@site-docs-en/components/convention-routing-motivation';
+2. About `config` function and `init` function
+
+:::warning Not Recommended
+
+Modern.js early versions supported runtime configuration and initialization operations through `config` function and `init` function exported in route layout files. These methods are still **supported**, but we **strongly recommend** using the [Runtime Configuration File](/configure/app/runtime/0-intro) and [Runtime Plugin](/plugin/introduction.html#runtime-plugin) to implement the corresponding functions.
+
+:::
+
+**config**
+
+In route components, you can add dynamic Runtime configuration by exporting a `config` function:
+
+```tsx
+// routes/layout.tsx
+export const config = () => {
+  return {
+    // dynamic Runtime configuration
+  };
+};
+```
+
+**init**
+
+In route components, you can execute pre-rendering logic by exporting an `init` function:
+
+```tsx
+// routes/layout.tsx
+export const init = () => {
+  // initialization logic
+};
+```

packages/document/main-doc/docs/zh/configure/app/runtime/0-intro.mdx

@@ -2,6 +2,12 @@
 
 Modern.js 的运行时（Runtime）配置需集中在 `src/modern.runtime.ts` 文件中声明。
 
+:::warning
+
+使用 `src/modern.runtime.ts` 配置方式需要 Modern.js 版本 **MAJOR_VERSION.66.0** 或更高版本。
+
+:::
+
 :::info
 如果项目中还没有此文件，请执行以下命令创建：
 
@@ -59,9 +65,7 @@ export default defineRuntimeConfig(entryName => {
 使用 `src/modern.runtime.ts` 配置方式不支持导出异步函数，这与 Modern.js 的渲染方式有关。如果需要添加异步逻辑，请使用 **[Runtime 插件 (Runtime Plugin)](/plugin/introduction.html#runtime-插件)**。
 :::
 
-:::warning
-使用 `src/modern.runtime.ts` 配置方式需要 Modern.js 版本 **MAJOR_VERSION.66.0** 或更高版本。
-:::
+
 
 import RuntimeCliConfig from '@site-docs/components/runtime-cli-config';
 

packages/document/main-doc/docs/zh/guides/basic-features/routes.mdx

@@ -7,7 +7,9 @@ sidebar_position: 2
 Modern.js 的路由基于 [React Router 6](https://reactrouter.com/en/main)，提供了基于文件约定的路由能力，并支持了业界流行的约定式路由模式：**嵌套路由**。当入口被识别为 [约定式路由](/guides/concept/entries.html#约定式路由) 时，Modern.js 会自动基于文件系统，生成对应的路由结构。
 
 :::note
+
 本小节提到的路由，都是约定式路由。
+
 :::
 
 ## 什么是嵌套路由
@@ -84,7 +86,9 @@ export default () => {
 ```
 
 :::note
+
 `<Outlet>` 是 React Router 6 中提供的 API，详情可以查看 [Outlet](https://reactrouter.com/en/main/components/outlet#outlet)。
+
 :::
 
 不同目录结构下，`<Outlet>` 所代表的组件也不同。为了方便介绍 `<Layout>` 与 `<Outlet>` 的关系，以下面的文件目录举例：
@@ -192,11 +196,15 @@ export default Blog;
 如果在某个子目录下存在 `$.tsx` 文件，该文件会作为通配路由组件，当没有匹配的路由时，会渲染该路由组件。
 
 :::note
+
 `$.tsx` 可以认为是一种特殊的 `<Page>` 组件，如果路由无法匹配，则 `$.tsx` 会作为 `<Layout>` 的子组件渲染。
+
 :::
 
 :::warning
+
 如果当前目录下不存在 `<Layout>` 组件时，则 `$.tsx` 不会生效。
+
 :::
 
 例如以下目录结构：
@@ -498,7 +506,39 @@ import Motivation from '@site-docs/components/convention-routing-motivation';
 在使用约定式路由的情况下，务必使用 `@modern-js/runtime/router` 中的 API，不直接使用 React Router 的 API。因为 Modern.js 内部会安装 React Router，如果应用中使用了 React Router 的 API，可能会导致两个版本的 React Router 同时存在，出现不符合预期的行为。
 
 :::note
+
 如果应用中必须直接使用 React Router 包的 API，例如部分路由行为被封装在统一的 npm 包中，那应用可以通过设置 [`source.alias`](/configure/app/source/alias)，将 `react-router` 和 `react-router-dom` 统一指向项目的依赖，避免两个版本的 React Router 同时存在的问题。
+
 :::
 
+2. 关于 `config` 函数和 `init` 函数的说明
 
+:::warning 不推荐使用
+
+Modern.js 早期版本支持在路由 layout 文件中通过导出 `config` 函数和 `init` 函数进行运行时配置和执行初始化操作。这些方式目前仍然**被支持**，但我们**强烈推荐**使用 [Runtime 配置文件](/configure/app/runtime/0-intro) 和 [Runtime 插件](/plugin/introduction.html#runtime-插件) 实现对应功能。
+
+:::
+
+**config**
+
+在路由组件中，你可以通过导出 `config` 函数来添加动态 Runtime 配置：
+
+```tsx
+// routes/layout.tsx
+export const config = () => {
+  return {
+    // 动态 Runtime 配置
+  };
+};
+```
+
+**init**
+
+在路由组件中，你可以通过导出 `init` 函数来执行预渲染逻辑：
+
+```tsx
+// routes/layout.tsx
+export const init = () => {
+  // 初始化逻辑
+};
+```