@modern-js/main-doc 0.0.0-next-1686537702987 → 0.0.0-next-1686556197370

package/CHANGELOG.md

@@ -1,15 +1,35 @@
 # @modern-js/main-doc
 
-## 0.0.0-next-1686537702987
+## 0.0.0-next-1686556197370
 
 ### Patch Changes
 
+- 8a932767f: docs(main): update basic features alias doc
+
+  docs(main): 更新基础功能 -- 别名文档
+
 - 7e6fb5fc1: chore: publishConfig add provenance config
 
   chore: publishConfig 增加 provenance 配置
 
+- 372b950c1: docs(main): update plugin config doc
+
+  docs(main): 更新插件配置文档
+
+- f28b4855c: docs(main): update faq doc
+
+  docs(main): 更新 faq 文档
+
+- f264c4a7f: docs(main): update html template doc
+
+  docs(main): 更新 HTML 模板文档
+
+- d6625cb47: docs(main): update bff config doc
+
+  docs(main): 更新 BFF 配置文档
+
 - Updated dependencies [7e6fb5fc1]
-  - @modern-js/builder-doc@0.0.0-next-1686537702987
+  - @modern-js/builder-doc@0.0.0-next-1686556197370
 
 ## 2.22.1
 

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

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

package/docs/en/configure/app/bff/enable-handle-web.mdx

@@ -7,13 +7,13 @@ title: enableHandleWeb
 - **Type:** `boolean`
 - **Default:** `false`
 
-:::caution
-First you need to enable the "BFF" function using [new](/apis/app/commands#modern-new) command.
-:::
+import EnableBFFCaution from "@site-docs-en/components/enable-bff-caution";
 
-By default, the BFF service can only handle requests from the BFF API.
+<EnableBFFCaution />
 
-When this value is set to `true`, page request traffic also goes through the BFF, and the logic built into Modern.js for page rendering defaults to running as the last middleware for the BFF service.
+By default, the BFF service can only handle requests for BFF APIs.
+
+When this value is set to `true`, page request will also pass through BFF, and the default logic for page rendering built into Modern.js will run as the last middleware of the BFF service.
 
 ```ts title="modern.config.ts"
 export default defineConfig({

package/docs/en/configure/app/bff/prefix.mdx

@@ -7,18 +7,18 @@ sidebar_label: prefix
 - **Type:** `string`
 - **Default:** `/api`
 
-:::caution
-First you need to enable the "BFF" function using [new](/apis/app/commands#modern-new) command.
-:::
+import EnableBFFCaution from "@site-docs-en/components/enable-bff-caution";
 
-By default, the route access BFF prefix's directory is `/api`, with the following directory structure:
+<EnableBFFCaution />
+
+By default, the prefix for accessing routes in the BFF API directory is `/api`, as shown in the following directory structure:
 
 ```bash
 api
 └── hello.ts
 ```
 
-The corresponding route for `api/hello.ts` access is `localhost:8080/api/hello`.
+The route corresponding to `api/hello.ts` when accessed is `localhost:8080/api/hello`.
 
 This configuration option can modify the default route prefix:
 
@@ -30,4 +30,4 @@ export default defineConfig({
 });
 ```
 
-The corresponding `api/hello.ts` access route is `localhost:8080/api-demo/hello`.
+The corresponding route for `api/hello.ts` when accessed is `localhost:8080/api-demo/hello`.

package/docs/en/configure/app/bff/proxy.mdx

@@ -7,16 +7,15 @@ sidebar_label: proxy
 - **Type:** `Record<string, string>`
 - **Default:** `{}`
 
-:::caution Caution
-First you need to enable the "BFF" function using [new](/apis/app/commands#modern-new) command.
+import EnableBFFCaution from "@site-docs-en/components/enable-bff-caution";
 
-:::
+<EnableBFFCaution />
 
-With simple configuration, no code is required, Modern.js automatically forwards requests. Requests sent to Modern.js BFF server are proxied to the specified service.
+With simple configuration, Modern.js can automatically proxy requests sent to the BFF server to the specified service.
 
-BFF Proxy uses the powerful [http-proxy-middleware](https://github.com/chimurai/http-proxy-middleware), and if you need more advanced usage, you can check its [documentation](https://github.com/chimurai/http-proxy-middleware#options).
+BFF Proxy uses the powerful [http-proxy-middleware](https://github.com/chimurai/http-proxy-middleware). For more advanced usage, please refer to its [documentation](https://github.com/chimurai/http-proxy-middleware#options).
 
-Add the following configuration to `modern.server-runtime.config.ts`, you can turn on the proxy:
+Add the following configuration to `modern.server-runtime.config.js` to enable proxy:
 
 ```ts title="modern.server-runtime.config.ts"
 import { defineConfig } from '@modern-js/app-tools/server';
@@ -29,9 +28,9 @@ export default defineConfig({
 });
 ```
 
-Assuming that the starting Modern.js BFF server's service address is `localhost:8080`, all requests whose path starts with `api` will be intercepted, such as requests sent to `localhost:8080/api/v1/topics` will be proxied to `https://cnodejs.org/api/v1/topics`.
+Assuming the address of Modern.js BFF server is `localhost:8080`, all requests starting with `api` will be proxied to `https://cnodejs.org`, for example, the request to `localhost:8080/api/v1/topics` will be proxied to `https://cnodejs.org/api/v1/topics`.
 
-You can do path rewriting, such as proxying requests sent to `localhost:8080/api/topics` to `https://cnodejs.org/api/v1/topics`.
+Path rewriting can also be performed here, such as proxying the request sent to `localhost:8080/api/topics` to `https://cnodejs.org/api/v1/topics`.
 
 ```js title="modern.server-runtime.config.js"
 import { defineConfig } from '@modern-js/app-tools/server';
@@ -48,22 +47,25 @@ export default defineConfig({
 });
 ```
 
-Unlike [dev.proxy](/configure/app/dev/proxy), the proxy described in this section only works on requests entering the BFF/API service; at the same time, this configuration can be used not only in the development environment, but also in the production environment. The corresponding request will also be proxied in the production environment.
+Unlike [dev.proxy](/configure/app/dev/proxy), the proxy here only applies to requests entering the BFF/API service; at the same time, this configuration can not only be used in the development environment, but also proxies corresponding requests in the production environment.
+
+import BFFProxyOtherConfig from "@site-docs-en/components/bff-proxy-other-config";
 
-## Common usage
+<BFFProxyOtherConfig />
 
-### Solve interface cross-domain problems
+## Common Usage
 
-In the process of project development, because web pages and interface services are not deployed under the same domain name, cross-domain problems are often encountered.
+### Solving Cross-Domain Issues for APIs
 
-There are many ways to solve cross-domain problems, and here we use `bff.proxy` to easily solve cross-domain problems.
+During project development, cross-domain issues are often encountered because web pages and API services are not deployed under the same domain name.
+There are many ways to solve cross-domain issues, and here we can easily solve them using `bff.proxy`.
 
 :::info
-In BFF proxy mode, if you do not need to write the BFF interface, the API directory can be deleted; at this time, BFF proxy will still be enabled.
+Under BFF proxy mode, if you don't need to write BFF code, the API directory can be deleted; BFF proxy will still be enabled.
 
 :::
 
-As shown below, in the `modern.server-runtime.config.js`, write the following configuration; we send all web pages to the same domain that request proxies starting with `/api` to another domain's service.
+As shown below, the following configuration in `modern.server-runtime.config.ts` will proxy all web page requests starting with `/api` to a service on another domain with the same domain.
 
 ```ts title="modern.server-runtime.config.ts"
 export default defineServerConfig({
@@ -74,3 +76,5 @@ export default defineServerConfig({
   },
 };
 ```
+
+

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

@@ -9,39 +9,39 @@ sidebar_position: 9
 
 Used to configure custom Modern.js framework plugins.
 
-For the way to write custom plugins, please refer to [How to Write Plugins](/guides/topic-detail/framework-plugin/implement).
+Refer to [How to Develop Plugins](/guides/topic-detail/framework-plugin/implement) for how to write custom plugins.
 
-## Precautions
+## Note
 
-This config **is used to configure the Modern.js framework plugin**. If you need to configure other types of plugins, please select the corresponding configs:
+This option is used to configure framework plugins. If you need to configure other types of plugins, please choose the corresponding configuration method:
 
-- Use [builderPlugins](/configure/app/builder-plugins) to configure Modern.js Builder plugins.
-- Use [tools.webpack](/configure/app/tools/webpack) or [tools.webpackChain](/configure/app/tools/webpack-chain) to configure webpack plugins.
-- Use [tools.babel](/configure/app/tools/babel) to configure Babel plugins.
+- To configure Modern.js Builder plugins, use the [builderPlugins](/configure/app/builder-plugins) option.
+- To configure webpack plugins, use the [tools.webpack](/configure/app/tools/webpack) or [tools.webpackChain](/configure/app/tools/webpack-chain) options.
+- To configure Babel plugins, use the [tools.babel](/configure/app/tools/babel) option.
 
-## Plugin type
+## Plugin types
 
-There are three different type of framework plugins built into the Modern.js:
+Modern.js has three types of plugins:
 
-- `CLI Plugin`, for local development, compilation and build phases, can extend various capabilities on the command line and compilation phases.
-- `Server Plugin`, for server-level.
-- `Runtime Plugin`, for runtime.
+- `CLI plugins`, applicable to local development, compilation and construction stages, can extend various capabilities in the command line and compilation stages.
+- `Server plugins`, applicable to the server.
+- `Runtime plugins`, applicable to the front-end runtime.
 
-The ability to customize CLI plugins is currently open Modern.js, and the Server plugin and Runtime plugin will be available in the future.
+Currently, Modern.js has opened up the ability to customize CLI plugins, and Server plugins and Runtime plugins will be opened up later.
 
 ## Plugin execution order
 
-By default, custom plugins are executed sequentially in the order of an array of `plugins`, Modern.js built-in plugins are executed earlier than custom plugins.
+By default, custom plugins are executed in the order of the `plugins` array, and the execution time of built-in Modern.js plugins is earlier than that of custom plugins.
 
-When the plugin uses related fields that control the order, such as `pre` and `post`, the execution order will be adjusted based on the declared fields, see [Relationship between plugins](/guides/topic-detail/framework-plugin/relationship).
+When the plugin sets options that control the order, such as `pre` and `post`, the execution order will be adjusted based on the declared fields. Refer to [Relationship between plugins](/guides/topic-detail/framework-plugin/relationship) for more information.
 
 ## Example
 
-Below is an example of using the CLI plugin.
+The following is an example of using CLI plugins.
 
-### Using plugins on npm
+### Use plugins on npm
 
-To use the plugin on npm, you need to install the plugin through the package manager and import it.
+To use plugins from npm registry, you need to first install the plugins , and import them in `modern.config.ts`.
 
 ```ts title="modern.config.ts"
 import myPlugin from 'my-plugin';
@@ -53,7 +53,7 @@ export default defineConfig({
 
 ### Use local plugins
 
-Using the plugin in the local code repository, you can import it directly through the relative path import.
+To use local plugins, import them directly using a relative path.
 
 ```ts title="modern.config.ts"
 import myPlugin from './config/plugin/myPlugin';
@@ -65,7 +65,7 @@ export default defineConfig({
 
 ### Plugin configuration
 
-If the plugin provides some custom configuration options, you can pass in the configuration through the parameters of the plugin function.
+If the plugin provides some custom configuration options, they can be passed in as parameters to the plugin function.
 
 ```ts title="modern.config.ts"
 import myPlugin from 'my-plugin';

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

@@ -4,7 +4,7 @@ sidebar_position: 8
 ---
 # Alias
 
-Modern.js allow aliases in JS and CSS, and the following aliases are built in:
+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:
 
 ```js
 {
@@ -14,11 +14,11 @@ Modern.js allow aliases in JS and CSS, and the following aliases are built in:
 ```
 
 :::info
-When the optional features is enable, the generator will also add built-in aliases dynamically. For example, when BFF is enabled, the `@api` alias will be added by default.
+When enabling optional features, the `new` command will also dynamically add built-in alias specific to the features. For example, when enabling BFF, the `@api` alias is added by default.
 
 :::
 
-For example, import the modules from the `src/common/` directory in the `src/App.tsx` file:
+For example, importing modules from the `src/common` directory in the `src/App.tsx` file:
 
 ```bash
 .
@@ -27,17 +27,19 @@ For example, import the modules from the `src/common/` directory in the `src/App
 │   │   └── base.css
 │   └── utils
 │       └── index.ts
-├── App.tsx
+└── App.tsx
 ```
 
-the code in `src/App.tsx`:
+The code in `src/App.tsx` is as follows:
 
 ```ts
 import utils from '@/src/common/utils';
 import '@/src/common/styles/base.css';
 ```
 
-Modern.js also provides a way to config aliases. Adding the `@common` alias as an example. For TypeScript projects, you only need to configure `compilerOptions.paths` under the project root directory `tsconfig.json` as follows:
+Modern.js also provides a way to customize alias. For example, adding the `@common` alias is as follows:
+
+For TypeScript projects, just set `compilerOptions.paths` in the project's `tsconfig.json`:
 
 ```json
 {
@@ -50,9 +52,9 @@ Modern.js also provides a way to config aliases. Adding the `@common` alias as a
 }
 ```
 
-JavaScript project can config by [`source.alias`](/configure/app/source/alias) in `modern.config.js`:
+For JavaScript projects, set `source.alias` in `modern.config.js`:
 
-```ts title="modern.config.ts"
+```ts title="modern.config.js"
 export default defineConfig({
   source: {
     alias: {
@@ -62,4 +64,4 @@ export default defineConfig({
 });
 ```
 
-For detailed usage, please refer to [source.alias documentation](/configure/app/source/alias).
+For the specific usage of alias configuration, please refer to the [source.alias documentation](/configure/app/source/alias).

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

@@ -4,13 +4,13 @@ sidebar_position: 9
 ---
 # HTML Template
 
-Modern.js provides **JSX syntax** and **HTML(EJS) syntax** for customizing HTML template.
+Modern.js provides **JSX syntax** and **HTML(EJS) syntax** to customize the HTML template.
 
-## JSX syntax
+## JSX Syntax
 
-Modern.js convention, in the `src/`, or in the entry directory, you can create `Document.[jt]sx` and export a component by default. The rendering result of this component can be used as an HTML template for the entry.
+According to Modern.js conventions, you can create a `Document.[jt]sx` file under `src/` or the entry directory and default export a component". The rendering result of this component can be used as the HTML template of the entry.
 
-For example the following directory structure:
+For example, consider the following directory structure:
 
 ```bash
 .
@@ -24,44 +24,42 @@ For example the following directory structure:
     └── modern-app-env.d.ts
 ```
 
-`entry-a` will take precedence over the `Docoument.[jt]sx` file under the current entry. If the current entry does not have a `Document.[jt]sx` file, such as `entry-b`, it will look for the `Document.[jt]sx` file in the root directory.
+`entry-a` will use the `Docoument.[jt]sx` file under the current entry as the template. If there is no `Document.[jt]sx` file under the current entry, like `entry-b`, it will look for the `Document.[jt]sx` file under the root directory.
 
-If not, it will go to the the logic of traditional templates.
+If not found, default template will be used.
 
-### HTML Component
+### HTML Components
 
-Modern.js provides a list of components for rendering pages to help developers generate templates, which can be exported from `@modern-js/runtime/document`:
+Modern.js provides some components for rendering pages to help developers generate templates. These components can be used from `@modern-js/runtime/document`:
 
 ```tsx
 import { Html, Body, Root, Head, Scripts } from '@modern-js/runtime/document';
 ```
 
-These components are rendered:
+- `Html`: provide the ability of native HTML Element and and render necessary components that the developer did not add by default. `<Head>` and `<Body>` must exist, and other components can be assembled as needed.
 
-- `Html`: Provide the ability of native HTML Elements, and render necessary components that the developer did not add by default. `<Head>` and `<Body>` must exist, and other components can be assembled by selecting appropriate components on demand.
+- `Body`: provide the ability of native Body Element and needs to contain the `<Root>` component internally. It also supports other elements as child elements at the same time, such as adding footers.
 
-- `Body`: Provide the ability of native Body Element, which needs to contain the `<Root>` component internally, and also supports other elements as child elements at the same time, such as adding footers.
+- `Root`: the root node `<div id='root'></div>` to be rendered. The default id of the root node is `id = 'root'`. You can set `props.rootId` to change the id attribute. Child components can be added and will be rendered in the HTML template. After React rendering is complete, it will be overwritten and is generally used to implement global Loading.
 
-- `Root`: React root element `<div id='root'></div>`. the default element id is `id = 'root'`, can set `props.rootId` to change the id.Child components can be added, and will also be rendered into HTML templates, which will be overwritten when React rendering is complete, generally used to implement global Loading.
+- `Head`: provide the ability of native Head Element and automatically fills in `<meta>` and `<Scripts>` components.
 
-- `Head`: Provides native Head Element capabilities and automatically populates `<meta>`, as well as the `<Scripts>` component.
+- `Scripts`: provide the ability to adjust the position of script tags injected into the HTML during the build process. By default, it is placed in the `<Head>` component.
 
-- `Scripts`: The script content generated by the webpack, which can be used to adjust the position of the bundle result, is placed in the `<Head>` component by default.
+- `Comment`: retain user-written comments like `<!-- gateway -->` and outputs them to the rendered HTML.
 
-- `Comment`: Make the comment like `<!-- gateway -->`, could be stay to the html that final render.
+### Template Parameters
 
-### Template Params
+Because it is in JSX format, various variables can be used freely in the component to assign values to various custom components in `Document.[jt]sx`.
 
-Because it is in the form of JSX, in `Document.[jt]sx`, you can use various variables in the component to assign values to various custom components more freely.
+Modern.js also provides `DocumentContext` to provide some configuration and environment parameters for easy access. The main parameters are:
 
-At the same time, Modern.js provides `DocumentContext` to provide some configuration and environment parameters, The main parameters as follow:
+- `processEnv`: provides the `process.env` during the build.
+- `config`: the configuration of the Modern.js project. Currently, only the output configuration is exposed.
+- `entryName`: the current entry name.
+- `templateParams`: parameters of HTML template (compatible with traditional templates, so it's not recommended for use).
 
-- `processEnv`: Provide build-time env vars.
-- `config`: The configuration of the project, only `output` are exposed.
-- `entryName`: current entry name.
-- `templateParams`: HTML template params(in order to be compatible with traditional templates, it is not recommended to use).
-
-### Examples
+### Example
 
 ```tsx
 import React, { useContext } from 'react';
@@ -102,7 +100,7 @@ export default function Document(): React.ReactElement {
 }
 ```
 
-The above JSX component will generate the following HTML template:
+The above JSX components will generate the following HTML template:
 
 ```html
 <!DOCTYPE html>
@@ -149,22 +147,22 @@ The above JSX component will generate the following HTML template:
 
 ```
 
-## Html Synxtax
+## HTML Syntax
 
-Modern.js also supports HTML syntax. By default, an HTML template is built into the Modern.js application project to generate HTML code.
+Modern.js also supports HTML syntax. By default, Modern.js application projects will include a built-in HTML template for generating HTML code.
 
-Based on HTML syntax templates, Modern.js provides **Custom HTML Fragments** and **Fully Custom HTML Templates** two ways to customize templates.
+Based on the HTML syntax template, Modern.js provides two ways to customize the template: **custom HTML fragments** and **custom the whole HTML**.
 
 ### Custom HTML Fragments
 
-In the application root directory, create the `config/html/` directory, which supports the creation of four kinds of HTML fragments.
+Under the application root directory, create the `config/html/` directory, which supports the creation of four types of HTML fragments:
 
 - `top.html`
 - `head.html`
 - `body.html`
 - `bottom.html`
 
-**These fragments will be injected into the default HTML template.**
+**These fragments will be injected into the default HTML template according to their positions.**
 
 ```html
 <!DOCTYPE html>
@@ -189,44 +187,44 @@ In the application root directory, create the `config/html/` directory, which su
 </html>
 ```
 
-HTML Fragments support the use [Lodash template](https://lodash.com/docs/4.17.15#template).
+HTML fragments support the use of [Lodash template](https://lodash.com/docs/4.17.15#template).
 
-For example, insert a script in `body.html`:
+For example, to insert an external script in `body.html`:
 
 ```html title="config/html/body.html"
 <script src="//example.com/assets/a.js"></script>
 ```
 
 :::info
-The implementation of the custom HTML fragment is to merge the fragment with the built-in template of the frame. Since `<title>` already exists in the default template of the frame, the `<title>` in the custom HTML template cannot take effect. Please pass [html.title](/configure/app/html/title) to modify the page title.
+The implementation of custom HTML fragments is to merge the fragments with the built-in template. Since the `<title>` already exists in the default template, the title tag in the custom HTML template will not take effect. Please use [html.title](/configure/app/html/title) to modify the page title.
 
 :::
 
-### Fully Custom HTML Templates
+### Custom the entire HTML Template
 
-In some cases, HTML snippets do not meet the customization requirements, Modern.js provide a fully customized way.
+In some cases, HTML fragments may be is not better meet the customization requirements. Modern.js provides a fully customized way.
 
-:::caution
-It is not recommended to override the default HTML template directly, and some features may be lost. Even if it needs to be replaced, it is recommended to build on the built-in template and modify it as needed.
+:::caution Note
+It is generally not recommended to directly override the default HTML template, as some functional options may be lost. If it is truly necessary to customize the entire HTML template, it is recommended to modify based on the built-in template as needed.
 
 :::
 
-In the `config/html/` directory, create a index.html file that will override the default HTML template.
+Under the `config/html/` directory, create an `index.html` file that will replace the default HTML template.
 
 :::info
-The internal default HTML template can be viewed in `node_modules/.modern-js/${entryName}/index.html`.
+The default HTML template can be viewed in `node_modules/.modern-js/${entryName}/index.html`.
 
 :::
 
-### Template Params
+### Template Parameters
 
-The parameters used in the template can be defined by the [html.templateParameters](/configure/app/html/template-parameters).
+The parameters used in the template can be defined by the [html.templateParameters](/configure/app/html/template-parameters) configuration.
 
 ### Config By Entry
 
-The fragment in the `config/html/` directory are valid for all entries in the application. If you want to customize the HTML by entry, you can create a new directory named with the **entry name** in the `config/html/` directory, and then customize the HTML snippets in this directory.
+The HTML fragments in the `config/html/` directory take effect for all entries in the application. If you want to customize HTML fragments by entry, you can create a directory named after the **entry name** under the `config/html/` directory, and then customize the HTML fragments in this directory.
 
-For example, the following HTML fragment is only valid for `entry1`:
+For example, the following HTML fragments are only effective for the `entry1` entry:
 
 ```bash
 .

package/docs/en/guides/topic-detail/framework-plugin/implement.mdx

@@ -1,10 +1,10 @@
 ---
-title: Write Plugins
+title: Develop Plugins
 sidebar_position: 3
 ---
-# How to Write Plugins
+# How to Develop Plugins
 
-The previous section introduced the Hook models used by Modern.js plugins, while this section describes how to write plugins.
+The previous section introduced the Hook models used by Modern.js plugins, while this section describes how to develop plugins.
 
 ## Implementing a Plugin
 
@@ -115,7 +115,7 @@ Please refer to [Extending Hooks](/guides/topic-detail/framework-plugin/extend)
 
 ### Plugin Configuration
 
-**It is recommended to write plugins in the form of functions**, so that plugins can receive configuration options through function parameters:
+**It is recommended to develop plugins in the form of functions**, so that plugins can receive configuration options through function parameters:
 
 ```ts
 import type { CliPlugin } from '@modern-js/core';

package/docs/en/guides/topic-detail/framework-plugin/introduction.mdx

@@ -33,7 +33,7 @@ Among them, the CLI plugin is the main running flow control model in Modern.js,
 
 ## What Plugins Can Do
 
-All of Modern.js's features are implemented through this set of plugins, which means that all of Modern.js's capabilities are open to developers. Developers can write plugins to extend more functionality and adapt to complex scenarios, including but not limited to:
+All of Modern.js's features are implemented through this set of plugins, which means that all of Modern.js's capabilities are open to developers. Developers can develop plugins to extend more functionality and adapt to complex scenarios, including but not limited to:
 
 - Registering commands
 - Modifying Modern.js configuration and validation schema

package/docs/en/guides/troubleshooting/cli.mdx

@@ -4,21 +4,21 @@ sidebar_position: 2
 
 # CLI FAQ
 
-### Can't pass command line arguments correctly when using pnpm?
+### Unable to pass command line arguments correctly when using pnpm?
 
-The pnpm v6 and pnpm v7 versions do not use the same posture when executing commands. The following should be noted:
+There are some differences between pnpm v6 and pnpm v7 in how they execute commands, and the following should be noted:
 
 pnpm v7:
 
-When using pnpm to invoke a command in `package.json`, if you need to pass arguments to pnpm, you need to put the arguments before the command.
+When using pnpm to call the commands in `package.json`, if you need to pass parameters to pnpm, you need to put the parameters before the command.
 
-For example, execute the prepare command with the pnpm '--filter' parameter:
+For example, using the pnpm `--filter` parameter to run the prepare command:
 
 ```bash
 pnpm run --filter "./packages/**" prepare
 ```
 
-If you need to pass parameters to a command, you need to put the parameters after the command.
+If you need to pass parameters to the command, you need to put the parameters after the command.
 
 For example, in the following `package.json` configuration:
 
@@ -30,7 +30,7 @@ For example, in the following `package.json` configuration:
 }
 ```
 
-The way to carry parameters when executing the command command is:
+The way to pass parameters when running the command is:
 
 ```bash
 pnpm run command --options
@@ -48,16 +48,16 @@ In the following `package.json` configuration:
 }
 ```
 
-If you need to execute `modern command --option`,
+If you need to run `modern command --option`:
 
-When using pnpm, you need to execute the `pnpm run command -- --option`.
+When using pnpm, you need to run `pnpm run command -- --option`.
 
-This is because pnpm does not handle command parameters the same as Yarn, but is similar to npm: when not adding a `--` character string, the parameters of pnpm are passed; when using a `--` character string, the parameters of the execution script are passed.
+This is because pnpm's handling of command parameters is different from that of Yarn, but similar to that of npm: when the `--` string is not added, the parameters passed are for pnpm; when the `--` string is used, the parameters passed are for running the script.
 
-In the above example the parameter `--option` is passed to `modern command`. If `pnpm run command --option` is executed, the parameter `--option` will be passed to pnpm.
+In the above example, the `--option` parameter is passed to `modern command`. If you run `pnpm run command --option`, the `--option` parameter will be passed to pnpm.
 
-Summary:
+In summary:
 
-**When using pnpm v7, if you pass arguments to pnpm, you need to put the arguments before the command**
+**When using pnpm v7, if passing parameters to pnpm, the parameters need to be placed before the command.**
 
-**When using pnpm v6, if the parameter passed to pnpm, you do not need to add `--`; if the parameter passed is for script use, you need to add `--` character string**.
+**When using pnpm v6, if the parameters are passed to pnpm, `--` is not required; if the parameters are passed to the script, the `--` string needs to be added.**

package/docs/en/guides/troubleshooting/dependencies.mdx

@@ -6,15 +6,15 @@ sidebar_position: 1
 
 ### How to check the actual installed version of a dependency in the project?
 
-You can use the `ls` command that provided by the package manager to view the dependencies version.
+You can use the `ls` command provided by the package manager to view the version of the dependency in the project.
 
-The following are some basic examples, please refer to the documentation of each package manager for detailed usage.
+Here are some basic examples. For detailed usage, please refer to the documentation of each package manager.
 
 **npm / yarn**
 
-For projects using npm or yarn, the `npm ls` command can be used.
+For projects using npm or yarn, you can use the `npm ls` command.
 
-For example, execute `npm ls @modern-js/core`, you can see the following results:
+For example, running `npm ls @modern-js/core` will show the following result:
 
 ```
 project
@@ -24,9 +24,9 @@ project
 
 **pnpm**
 
-For projects using pnpm, you can use `pnpm ls` command.
+For projects using pnpm, you can use the `pnpm ls` command.
 
-For example, execute `pnpm ls @modern-js/core --depth Infinity`, you can see the following results:
+For example, running `pnpm ls @modern-js/core --depth Infinity` will show the following result:
 
 ```
 devDependencies:
@@ -36,9 +36,9 @@ devDependencies:
 
 ---
 
-### The engine "node" is incompatible when installing dependencies?
+### Getting "The engine "node" is incompatible" error during dependency installation?
 
-If the following error message appears when installing dependencies, it means that the version of Node.js used in the current environment is too low, and Node.js needs to be upgraded to a higher version.
+If you encounter the following error message during dependency installation, it means that the current environment is using a Node.js version that is too low, and you need to upgrade Node.js to a higher version.
 
 ```bash
 The engine "node" is incompatible with this module.
@@ -46,11 +46,11 @@ The engine "node" is incompatible with this module.
 Expected version ">=14.17.6". Got "12.20.1"
 ```
 
-When using Modern.js, it is recommended to use [Node.js 14.x](https://nodejs.org/download/release/latest-v14.x/) or [Node.js 16.x](https://nodejs.org/download/release/latest-v16.x/).
+When using Modern.js, it is recommended to use the latest version of [Node.js 14.x](https://nodejs.org/download/release/latest-v14.x/) or [Node.js 16.x](https://nodejs.org/download/release/latest-v16.x/).
 
-If the Node.js version in the current environment is lower than the required version, you can use [nvm](https://github.com/nvm-sh/nvm) or [fnm](https://github.com/Schniz /fnm) and other tools for version switching.
+If the Node.js version of the current environment is lower than the above requirement, you can use tools such as [nvm](https://github.com/nvm-sh/nvm) or [fnm](https://github.com/Schniz/fnm) to switch versions.
 
-Here's an example using nvm:
+Here is an example of using nvm:
 
 ```
 # Install Node.js v14
@@ -63,13 +63,13 @@ nvm use 14
 nvm default 14
 ```
 
-It is recommended to use [fnm](https://github.com/Schniz/fnm) in the local development environment. Its usage is similar to nvm, but it has better performance than nvm.
+For local development environments, it is recommended to use [fnm](https://github.com/Schniz/fnm), which has better performance than nvm and has similar usage.
 
 ---
 
-### ReactNode type error after upgrading dependencies?
+### Getting a ReactNode type error after upgrading dependencies?
 
-If the following types of errors are reported after upgrading the project's dependencies, it means that the wrong `@types/react` version is installed in the project.
+After upgrading the dependencies of the project, if the following type error occurs, it means that the wrong version of `@types/react` is installed in the project.
 
 ```bash
 The types returned by 'render()' are incompatible between these types.
@@ -77,9 +77,9 @@ Type 'React.ReactNode' is not assignable to type 'import("/node_modules/@types/r
 Type '{}' is not assignable to type 'ReactNode'.
 ```
 
-The reason for this problem is that the ReactNode type definitions in React 18 and React 16/17 are different. If there are multiple different `@types/react` versions in the project, there will be a ReactNode type conflict, resulting in the above error.
+The reason for this problem is that the ReactNode type definition in React 18 is different from that in React 16/17. If there are multiple different versions of `@types/react` in the project, a ReactNode type conflict will occur, resulting in the above error.
 
-The solution is to lock `@types/react` and `@types/react-dom` in the project to a unified version, such as `v17`.
+The solution is to lock the `@types/react` and `@types/react-dom` in the project to a unified version, such as `v17`.
 
 ```json
 {
@@ -88,23 +88,23 @@ The solution is to lock `@types/react` and `@types/react-dom` in the project to
 }
 ```
 
-For the method of locking the dependency version, please refer to [Lock nested dependency](/guides/get-started/upgrade.html#lock-nested-dependency).
+For methods of locking dependency versions, please refer to [Lock nested dependency](/guides/get-started/upgrade.html#lock-nested-dependency).
 
 ---
 
-### After pnpm install, there are some peer dependencies warnings in the console?
+### Getting peer dependencies warnings in the console after running `pnpm install`?
 
-The reason for this warning is that the version range of peer dependencies declared by some third-party npm packages does not match the version range installed in Modern.js.
+The reason for this warning is that the version range of peer dependencies declared by some third-party npm packages is inconsistent with the version range installed in Modern.js.
 
-In most cases, you can ignore the peer dependency warnings because it will not affect the use of Modern.js.
+In most cases, peer dependencies warnings will not affect the project operation and do not need to be processed separately. Please ignore the relevant warnings.
 
 ---
 
-### What is the minimum React version supported by the Modern.js framework?
+### What is the minimum supported version of React for the Modern.js framework?
 
-The recommended React version for **Modern.js framework is >= 18.0.0**, and different features have different React version requirements.
+**The recommended React version for the Modern.js framework is >= 18.0.0**, and different functions have different requirements for the React version.
 
-- If you are using React 17, some framework features, such as Steaming SSR, will not be available as they rely on new features provided by React 18.
-- If you're still using React 16, you won't be able to use Modern.js's runtime or server-side featurs. You can consider using Modern.js's build mode, that is, only use Modern.js as a builder. In this case, you can still use React 16.
+- If you are using React 17, some framework functions will not be available, such as Steaming SSR, because it relies on new features provided by React 18.
+- If you are still using React 16, you will not be able to use Modern.js's runtime or server-side capabilities. You can consider using the build mode of Modern.js, that is, only using Modern.js's build capabilities. In this case, React 16 can still be used.
 
-In a future major release of Modern.js, we will remove support for React 16 and React 17. Please upgrade to React 18+ as soon as possible.
+In future major versions of Modern.js, we will gradually remove support for React 16 and React 17. Therefore, please upgrade to React 18 or higher as soon as possible.

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

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

package/docs/zh/configure/app/bff/enable-handle-web.mdx

@@ -7,9 +7,9 @@ title: enableHandleWeb
 - **类型：** `boolean`
 - **默认值：** `false`
 
-:::caution 注意
-请先在当前应用项目根目录使用【[new](/apis/app/commands#modern-new)】 启用 BFF 功能。
-:::
+import EnableBFFCaution from "@site-docs/components/enable-bff-caution";
+
+<EnableBFFCaution />
 
 默认情况下，BFF 服务只能处理 BFF API 的请求。
 

package/docs/zh/configure/app/bff/prefix.mdx

@@ -7,10 +7,9 @@ sidebar_label: prefix
 - **类型：** `string`
 - **默认值：** `/api`
 
-:::caution 注意
-请先在当前应用项目根目录使用【[new](/apis/app/commands#modern-new)】 启用 BFF 功能。
+import EnableBFFCaution from "@site-docs/components/enable-bff-caution";
 
-:::
+<EnableBFFCaution />
 
 默认情况下，BFF API 目录下的路由访问前缀是 `/api`, 如下目录结构：
 

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

@@ -7,12 +7,11 @@ sidebar_label: proxy
 - **类型：** `Record<string, string>`
 - **默认值：** `{}`
 
-:::info 补充信息
-请先在当前应用项目根目录使用【[new](/apis/app/commands#modern-new)】 启用 BFF 功能。
+import EnableBFFCaution from "@site-docs/components/enable-bff-caution";
 
-:::
+<EnableBFFCaution />
 
-通过简单配置，无需编写代码，Modern.js 会自动转发请求。发送给 Modern.js BFF server 的请求，会代理到指定的服务上。
+通过简单配置，Modern.js 可以将发送给 BFF server 的请求，自动代理到指定的服务上。
 BFF Proxy 使用了强大的 [http-proxy-middleware](https://github.com/chimurai/http-proxy-middleware)，如果需要更多高级的用法， 可以查看它的[文档](https://github.com/chimurai/http-proxy-middleware#options)。
 
 在 `modern.server-runtime.config.js` 中加入以下配置；即可开启代理：
@@ -28,9 +27,9 @@ export default defineConfig({
 });
 ```
 
-假设启动的 Modern.js BFF server 的服务地址是 `localhost:8080`，所有 path 以 `api` 开头的请求都会被拦截，如发送到 `localhost:8080/api/v1/topics` 的请求会被代理到 `https://cnodejs.org/api/v1/topics`。
+假设 Modern.js BFF server 的地址是 `localhost:8080`，所有以 `api` 开头的请求都会被代理到 `https://cnodejs.org`，如 `localhost:8080/api/v1/topics` 的请求会被代理到 `https://cnodejs.org/api/v1/topics`。
 
-你可以做路径的重写，如将发送到 `localhost:8080/api/topics` 的请求代理到 `https://cnodejs.org/api/v1/topics`。
+这里还可以进行路径重写，如将发送到 `localhost:8080/api/topics` 的请求代理到 `https://cnodejs.org/api/v1/topics`。
 
 ```ts title="modern.server-runtime.config.ts"
 import { defineConfig } from '@modern-js/app-tools/server';
@@ -49,6 +48,10 @@ export default defineConfig({
 
 与 [dev.proxy](/configure/app/dev/proxy) 不同，本节所介绍的代理只作用于进入 BFF/API 服务的请求；同时，这一配置不但可以在开发环境中使用，在生产环境中也会代理相应的请求。
 
+import BFFProxyOtherConfig from "@site-docs/components/bff-proxy-other-config";
+
+<BFFProxyOtherConfig />
+
 ## 常见用法
 
 ### 解决接口跨域问题
@@ -72,3 +75,4 @@ export default defineServerConfig({
   },
 };
 ```
+

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

@@ -14,7 +14,7 @@ Modern.js 允许在 JS 和 CSS 中使用别名导入自定义目录下的模块
 ```
 
 :::info
-在开启可选功能时，生成器也会动态的添加内置别名，例如启用 BFF 时默认会添加 `@api` 别名。
+在开启可选功能时，new 命令也会动态的添加内置别名，例如启用 BFF 时默认会添加 `@api` 别名。
 
 :::
 
@@ -27,7 +27,7 @@ Modern.js 允许在 JS 和 CSS 中使用别名导入自定义目录下的模块
 │   │   └── base.css
 │   └── utils
 │       └── index.ts
-├── App.tsx
+└── App.tsx
 ```
 
 `src/App.tsx` 中写法如下：
@@ -37,7 +37,9 @@ import utils from '@/src/common/utils';
 import '@/src/common/styles/base.css';
 ```
 
-Modern.js 也提供了自定义别名的方式，以添加 `@common` 别名为例，对于 TypeScript 项目，只需要在项目根目录 `tsconfig.json` 下配置 `compilerOptions.paths` 如下：
+Modern.js 也提供了自定义别名的方式，以添加 `@common` 别名为例：
+
+对于 TypeScript 项目，只需要在项目根目录 `tsconfig.json` 下配置 `compilerOptions.paths`：
 
 ```json
 {

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

@@ -9,7 +9,7 @@ Modern.js 提供了 **JSX 语法**和 **HTML(EJS) 语法**两种方式用于自
 
 ## JSX 语法
 
-Modern.js 约定，在 `src/` 目录下，或在入口目录下，可以创建 `Document.[jt]sx` 并默认导出组件。该组件的渲染结果可以作为入口的 HTML 模板。
+Modern.js 约定，在 `src/` 或入口目录下，可以创建 `Document.[jt]sx` 文件并默认导出组件，该组件的渲染结果可以作为入口的 HTML 模板。
 
 例如以下目录结构：
 
@@ -27,17 +27,17 @@ Modern.js 约定，在 `src/` 目录下，或在入口目录下，可以创建 `
 
 `entry-a` 会优先使用当前入口下的 `Docoument.[jt]sx` 文件。如果当前入口没有 `Document.[jt]sx` 文件，例如 `entry-b`，则会查找根目录下的 `Document.[jt]sx` 文件。
 
-如果还没有，则会兜底到传统模板的逻辑。
+如果未找到，将会使用 Modern.js 的默认模板。
 
 ### HTML 组件
 
-Modern.js 提供了一些列渲染页面的组件，用来帮助开发者生成模板，可以从 `@modern-js/runtime/document` 中导出这些组件：
+Modern.js 提供了一些列渲染页面的组件，用来帮助开发者生成模板，可以从 `@modern-js/runtime/document` 中使用这些组件：
 
 ```tsx
 import { Html, Body, Root, Head, Scripts } from '@modern-js/runtime/document';
 ```
 
-这些组件分别渲染：
+这些组件分别用于渲染：
 
 - `Html`：提供原生 HTML Element 的能力，并能默认渲染开发者未添加的必须的组件。`<Head>` 和 `<Body>` 是必须要存在的，其它组件可以按需选择合适的组件进行组装。
 
@@ -57,10 +57,10 @@ import { Html, Body, Root, Head, Scripts } from '@modern-js/runtime/document';
 
 Modern.js 也提供了 `DocumentContext` 来提供一些配置、环境参数，方便直接获取。主要以下参数：
 
-- `processEnv`：提供构建时的 `process.env`
-- `config`：Modern.js 项目的配置。目前只暴露出 output 相关的配置
-- `entryName`：当前的入口名
-- `templateParams`：HTML 模板的参数（为了兼容传统模板，不推荐使用）
+- `processEnv`：提供构建时的 `process.env`。
+- `config`：Modern.js 项目的配置。目前只暴露出 output 相关的配置。
+- `entryName`：当前的入口名。
+- `templateParams`：HTML 模板的参数（为了兼容传统模板，不推荐使用）。
 
 ### 示例
 
@@ -151,7 +151,7 @@ export default function Document(): React.ReactElement {
 
 Modern.js 也支持 HTML 语法。默认情况下，Modern.js 的应用工程中会内置一份 HTML 模板，用于生成 HTML 代码。
 
-基于 HTML 语法的模板，Modern.js 提供了 **自定义 HTML 片段**和**完全自定义 HTML 模板**两种方式来自定义模板。
+基于 HTML 语法的模板，Modern.js 提供了**自定义 HTML 片段**和**完全自定义 HTML 模板**两种方式来自定义模板。
 
 ### 自定义 HTML 片段
 

package/docs/zh/guides/troubleshooting/cli.mdx

@@ -58,6 +58,6 @@ pnpm v6:
 
 总结来说：
 
-**在使用 pnpm v7 时，如果传递参数给 pnpm，需要将参数放置到命令前**
+**在使用 pnpm v7 时，如果传递参数给 pnpm，需要将参数放置到命令前**。
 
 **在使用 pnpm v6 时，如果传递的参数给 pnpm，不需要加 `--`；如果传递的参数是给脚本使用，需要增加 `--` 字符串**。

package/docs/zh/guides/troubleshooting/dependencies.mdx

@@ -105,6 +105,6 @@ Type '{}' is not assignable to type 'ReactNode'.
 **Modern.js 框架推荐使用的 React 版本为 >= 18.0.0**，并且不同功能对 React 版本的要求有所不同。
 
 - 如果你在使用 React 17，那么部分框架功能将无法使用，比如 Steaming SSR，因为它依赖 React 18 提供的新特性。
-- 如果你仍然在使用 React 16，那么将无法使用 Modern.js 的运行时或服务端能力。你可以考虑使用 Modern.js 的构建模式，即只使用 Modern.js 的构建能力，这种情况是可以继续使用 React 16 的。
+- 如果你仍然在使用 React 16，那么将无法使用 Modern.js 的运行时或服务端能力。你可以考虑使用 Modern.js 的构建模式，即只使用 Modern.js 的构建能力，这种情况可以继续使用 React 16。
 
 在 Modern.js 未来的 major 版本中，我们会逐步移除对 React 16 和 React 17 的支持。因此，请尽快升级到 React 18 以上版本。

package/package.json

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