@modern-js/module-tools-docs 2.0.1 → 2.0.2

package/docs/en/api/config/build-config.md

@@ -4,7 +4,7 @@ sidebar_position: 1
 
 # BuildConfig
 
-This section describes all the configuration of Module tools for building
+This section describes all the configuration of Module Tools for building
 
 ## alias
 
@@ -12,7 +12,7 @@ This section describes all the configuration of Module tools for building
 - default: `{'@': 'src',}`
 
 :::tip
-For TypeScript projects, you only need to configure [compilerOptions.paths](https://www.typescriptlang.org/tsconfig#paths) in `tsconfig.json`, Module tools will automatically recognize the alias in `tsconfig.json`, so there is no need to configure the `alias` field additionally.
+For TypeScript projects, you only need to configure [compilerOptions.paths](https://www.typescriptlang.org/tsconfig#paths) in `tsconfig.json`, Module Tools will automatically recognize the alias in `tsconfig.json`, so there is no need to configure the `alias` field additionally.
 :::
 
 ```js modern.config.ts
@@ -57,7 +57,7 @@ export default {
 
 ### path
 
-Static resource output path, will be based on [outDir](/zh/api/build-config/#outDir)
+Static resource output path, will be based on [outDir](/api/config/build-config#outDir)
 
 - type: `string`
 - default: `assets`
@@ -196,7 +196,7 @@ Path to the tsconfig file
 
 ### distPath
 
-The output path of the dts file, based on [outDir](/zh/api/build-config/#outDir)
+The output path of the dts file, based on [outDir](/api/config/build-config#outDir)
 
 - type: `string`
 - default: `. /types`
@@ -522,7 +522,7 @@ When the value is of type `Object`, it is merged with the default configuration
 
 When the value is of type `Function`, the object returned by the function is merged with the default configuration via `Object.assign`.
 
-The `theme` property is not allowed, otherwise the build will fail, using [`designSystem`](/zh/api/design-system) as the `Tailwind CSS Theme` configuration.
+The `theme` property is not allowed, otherwise the build will fail, using [`designSystem`](/api/config/design-system) as the `Tailwind CSS Theme` configuration.
 
 The rest of the usage is the same as Tailwind CSS: [Quick Portal](https://tailwindcss.com/docs/configuration).
 

package/docs/en/api/plugin-api/plugin-hooks.md

@@ -56,7 +56,7 @@ type Return = BuildConfig;
 
 ### `beforeBuildTask`
 
-Based on the build configuration, module tools will split the overall build into multiple sub-build tasks. The Hook will be triggered before each build subtask.
+Based on the build configuration, Module Tools will split the overall build into multiple sub-build tasks. The Hook will be triggered before each build subtask.
 
 ``` ts
 export default (): CliPlugin<ModuleTools> => ({

package/docs/en/guide/advance/asset.mdx

@@ -4,7 +4,7 @@ sidebar_position: 6
 
 # Handle static resource files
 
-The module project will handle static resources used in the code. If configuration is required, then the [`buildConfig.asset`](/en/api/build-config#asset) API can be used.
+The module project will handle static resources used in the code. If configuration is required, then the [`buildConfig.asset`](/en/api/config/build-config#asset) API can be used.
 
 ## Default behavior
 

package/docs/en/guide/advance/build-umd.mdx

@@ -22,7 +22,7 @@ export default defineConfig({
 
 ## Third-party dependency handling for umd products
 
-In the [[How to handle third-party dependencies]](/en/guide/advance/external-dependency) chapter, we know that we can control whether or not the project packages third-party dependencies via the [`autoExternals`](/en/api/build-config#autoexternal) and [`externals`](/en/api/build-config#externals) APIs.
+In the [[How to handle third-party dependencies]](/en/guide/advance/external-dependency) chapter, we know that we can control whether or not the project packages third-party dependencies via the [`autoExternals`](/en/api/config/build-config#autoexternal) and [`externals`](/en/api/config/build-config#externals) APIs.
 So when building umd products, we can also use it like this:
 
 <CH.Spotlight>
@@ -110,7 +110,7 @@ We know from the above example that when using the `autoExternal` and `externals
 - In a Node.js environment, you can get the react dependency with `require('react')`.
 - In a browser environment, you can get the react dependency via `global.react`.
 
-However, in the browser environment, when getting third-party dependencies, **global variable names are not necessarily identical to the dependency names**, so you have to use the [`buildConfig.umdGlobals`](/en/api/build-config#umdglobals) API.
+However, in the browser environment, when getting third-party dependencies, **global variable names are not necessarily identical to the dependency names**, so you have to use the [`buildConfig.umdGlobals`](/en/api/config/build-config#umdglobals) API.
 
 Again using the previous example, when the `react` dependency exists in the browser environment as a `windows.React` or `global.React` global variable, then:
 
@@ -218,7 +218,7 @@ export default () => {
 });
 ```
 
-If you need to modify it, you need to use the [`buildConfig.umdModuleName`](/en/api/build-config#umdmodulename) API.
+If you need to modify it, you need to use the [`buildConfig.umdModuleName`](/en/api/config/build-config#umdmodulename) API.
 
 When this API is used:
 

package/docs/en/guide/advance/copy.md

@@ -8,10 +8,10 @@ The Module Project provides the Copy utility for copying already existing indivi
 
 ## Understanding the Copy API
 
-We can use the Copy tool via the [`buildConfig.copy`](/en/api/build-config#copy) API, which contains the following two main configurations.
+We can use the Copy tool via the [`buildConfig.copy`](/en/api/config/build-config#copy) API, which contains the following two main configurations.
 
-- [`patterns`](/en/api/build-config#copypatterns)
-- [`options`](/en/api/build-config#copyoptions)
+- [`patterns`](/en/api/config/build-config#copypatterns)
+- [`options`](/en/api/config/build-config#copyoptions)
 
 It is recommended to spend some time getting to know them before you start learning.
 
@@ -34,7 +34,7 @@ export default defineConfig({
 });
 ```
 
-`patterns.context` 一般和 `patterns.from` 配合使用，默认情况下它的值与 [`buildConfig.sourceDir`](/zh/api/build-config#sourcedir) 相同，因此我们可以按照如下方式指定 `src/data.json` 文件为要复制的文件：
+`patterns.context` 一般和 `patterns.from` 配合使用，默认情况下它的值与 [`buildConfig.sourceDir`](/api/config/build-config#sourcedir) 相同，因此我们可以按照如下方式指定 `src/data.json` 文件为要复制的文件：
 
 > 默认情况下，`buildConfig.sourceDir` 为 `src`
 
@@ -70,7 +70,7 @@ export default defineConfig({
 });
 ```
 
-`patterns.to` 用于指定复制文件的输出路径，默认情况下它的值为 [`buildConfig.outDir`](zh/api/build-config#outDir)对应的值。因此我们按照如下方式将 `src/index.html` 复制到 `dist` 目录下：
+`patterns.to` 用于指定复制文件的输出路径，默认情况下它的值为 [`buildConfig.outDir`](/api/config/build-config#outDir)对应的值。因此我们按照如下方式将 `src/index.html` 复制到 `dist` 目录下：
 
 ```ts
 export default defineConfig({

package/docs/en/guide/advance/external-dependency.mdx

@@ -81,8 +81,8 @@ So how do you enable the packaging of third-party dependencies in your module pr
 
 The following APIs are provided in the build configuration to handle third-party dependencies:
 
-- [`buildConfig.autoExternal`](/en/api/build-config#autoexternal)
-- [`buildConfig.externals`](/en/api/build-config#externals)
+- [`buildConfig.autoExternal`](/en/api/config/build-config#autoexternal)
+- [`buildConfig.externals`](/en/api/config/build-config#externals)
 
 ### Turn off default behavior
 

package/docs/en/guide/advance/in-depth-about-build.md

@@ -9,7 +9,7 @@ In the [Basic Usage] section, we already knew that you can modify the output pro
 :::tip{title=notes}
 If you are not sure what `buildConfig` is, it is recommended to take some time to understand it by following this link.
 
-- [[modify-output-product](/en/guide/modify-output-product)]
+- [[modify-output-product](/en/guide/basic/modify-output-product)]
   :::
 
 In this chapter we'll dive into the use of certain build configurations and understand what happens when the `modern build` command is executed.
@@ -24,11 +24,11 @@ A Bundle is a package of build products, which may be a single file or multiple
 
 Bundleless, on the other hand, means that each source file is compiled and built separately, but not packaged together. Each product file can be found with its corresponding source code file. The process of **Bundleless build can also be understood as the process of code conversion of source files only**.
 
-In `buildConfig` you can specify whether the current build task is Bundle or Bundleless by using [`buildConfig.buildType`](/en/api/build-config#buildtype).
+In `buildConfig` you can specify whether the current build task is Bundle or Bundleless by using [`buildConfig.buildType`](/en/api/config/build-config#buildtype).
 
 ### Relationship between `input` and `sourceDir`
 
-[`buildConfig.input`](/en/api/build-config#input) is used to specify the file path or directory path where the source code is read, and its default value differs between Bundle and Bundleless builds.
+[`buildConfig.input`](/en/api/config/build-config#input) is used to specify the file path or directory path where the source code is read, and its default value differs between Bundle and Bundleless builds.
 
 - When `buildType: 'bundle'`, `input` defaults to `['src/index.ts']`
 - When `buildType: 'bundleless'`, `input` defaults to `['src']`
@@ -61,7 +61,7 @@ The Bundleless build process also supports such use, but it is not recommended.
 
 #### `sourceDir`
 
-[`sourceDir`](/en/api/build-config#sourcedir) is used to specify the source code directory, which is related to both.
+[`sourceDir`](/en/api/config/build-config#sourcedir) is used to specify the source code directory, which is related to both.
 
 - type file generation
 - [`outbase`](https://esbuild.github.io/api/#outbase) for specifying the build process
@@ -73,7 +73,7 @@ In general:
 
 ### Declaration Type Files
 
-The [`buildConfig.dts`](/en/api/build-config#dts) configuration is mainly used for type file generation.
+The [`buildConfig.dts`](/en/api/config/build-config#dts) configuration is mainly used for type file generation.
 
 #### Turn off type generation
 
@@ -99,7 +99,7 @@ With `buildType: 'bundleless'`, type files are generated using the project's `ts
 
 The **module engineering solution also supports packaging of type files**, although care needs to be taken when using this feature.
 
-- Some third-party dependencies have incorrect syntax that can cause the packaging process to fail. So in this case, you need to exclude such third-party packages manually with [`buildConfig.externals`](/en/api/build-config#externals).
+- Some third-party dependencies have incorrect syntax that can cause the packaging process to fail. So in this case, you need to exclude such third-party packages manually with [`buildConfig.externals`](/en/api/config/build-config#externals).
 - It is not possible to handle the case where the type file of a third-party dependency points to a `.ts` file. For example, the `package.json` of a third-party dependency contains something like this: `{"types": ". /src/index.ts"}`.
 
 #### Alias Conversion
@@ -165,7 +165,7 @@ export default defineConfig({
 
 ### `buildConfig.define` Usage for different scenarios
 
-[`buildConfig.define`](/en/api/build-config#define) functions somewhat similar to [`webpack.DefinePlugin`](https://webpack.js.org/plugins/define-plugin/). A few usage scenarios are described here.
+[`buildConfig.define`](/en/api/config/build-config#define) functions somewhat similar to [`webpack.DefinePlugin`](https://webpack.js.org/plugins/define-plugin/). A few usage scenarios are described here.
 
 #### Environment variable replacement
 

package/docs/en/guide/advance/in-depth-about-dev-command.md

@@ -9,7 +9,7 @@ sidebar_position: 2
 :::tip{title=注意}
 如果你还不清楚 `buildConfig` 是什么，建议花一些时间通过下面的链接了解一下：
 
-- 【[修改输出产物](/zh/guide/modify-output-product)】
+- 【[修改输出产物](/guide/basic/modify-output-product)】
   :::
 
 而在本章里我们将要深入理解某些构建配置的使用以及了解执行 `modern build` 命令的时候发生了什么。

package/docs/en/guide/advance/theme-config.mdx

@@ -4,7 +4,7 @@ sidebar_position: 7
 
 # Theme Configuration
 
-The module project provides the ability to configure themes through the [`designSystem`](/en/api/design-system) API.
+The module project provides the ability to configure themes through the [`designSystem`](/en/api/config/design-system) API.
 
 ## Motivation and rationale
 
@@ -17,7 +17,7 @@ The so-called `designToken` corresponds to different things in different style d
   - `@apply` custom directive under css/less/sass to use a string with the same name as the HTML class name supported by tailwindcss.
 - css/less/scss: Generate global style variables via `designSystem`.
 
-The data structure of the `designSystem` API is borrowed from the [theme API](https://tailwindcss.com/docs/theme) in the `tailwindcss` configuration object, so a default set of `designToken` exists. For the default values, see the [`designSystem` API](/zh/api/design-system).
+The data structure of the `designSystem` API is borrowed from the [theme API](https://tailwindcss.com/docs/theme) in the `tailwindcss` configuration object, so a default set of `designToken` exists. For the default values, see the [`designSystem` API](/api/config/design-system).
 
 :::info
 The css/less/sass global variables are not supported yet.

package/docs/en/guide/basic/before-getting-started.md

@@ -14,7 +14,7 @@ Once NodeJS is installed, not only can you access the `node` executable from the
 
 Npm is the standard package manager for NodeJS. It started out as a tool for downloading and managing NodeJS package dependencies, but it has since evolved into a tool for front-end JavaScript.
 
-**If you already know something about usage of npm and npm packages, then you can directly see [npm package manager](/en/guide/before-getting-started#npm-package-manager) section.**
+**If you already know something about usage of npm and npm packages, then you can directly see [npm package manager](/en/guide/basic/before-getting-started#npm-package-manager) section.**
 
 ## npm package type project
 

package/docs/en/guide/basic/command-preview.md

@@ -26,7 +26,7 @@ Options:
 When you want to start a project build, you can execute the `modern build` command. When using this command, we can:
 
 - When wanting to start a build in watch mode, use the `--watch` option.
-- When you want to specify the path to the TypeScript configuration file read by the project build, use `-build --tsconfig . /path/config.json` option. This option overrides all [`buildConfig`](/zh/api/build-config) configurations in [`dts.tsconfigPath`](/zh/api/build-config).
+- When you want to specify the path to the TypeScript configuration file read by the project build, use `-build --tsconfig . /path/config.json` option. This option overrides all [`buildConfig`](/api/config/build-config) configurations in [`dts.tsconfigPath`](/api/config/build-config).
 - The `-no-dts` option can be used when the DTS type file generation and type checking behavior of the project needs to be turned off. **Note: The generation of type files depends on the results of type checking. If type checking is turned off, then type files will not be generated either**.
 - The `--no-clear` option can be used when the automatic clearing of the product output directory needs to be turned off.
 
@@ -59,7 +59,7 @@ The following features can currently be enabled.
 - Tailwind CSS support
 - Modern.js Runtime API
 
-You can learn more about these features in the [Using the micro generator](/zh/guide/use-micro-generator) section.
+You can learn more about these features in the [Using the micro generator](/guide/basic/use-micro-generator) section.
 
 ## `modern dev`
 

package/docs/en/guide/basic/modify-output-product.md

@@ -1,6 +1,7 @@
 ---
 sidebar_position: 3
 ---
+
 # modify-output-product
 
 ## Modify output product
@@ -44,7 +45,7 @@ Then the next step is to first explain `buildPreset`.
 
 The value of a **build preset can be in the form of a string**, so a build preset of this form is called a preset string.
 
-The module engineering solution provides generic build preset strings and corresponding variants, depending on the generic scenario in which the npm package is used. All currently supported preset strings can be viewed via the [BuildPreset API](/en/api/build-config). The relationship between **generic preset strings and variants** is explained here.
+The module engineering solution provides generic build preset strings and corresponding variants, depending on the generic scenario in which the npm package is used. All currently supported preset strings can be viewed via the [BuildPreset API](/en/api/config/build-config). The relationship between **generic preset strings and variants** is explained here.
 
 Among the generic preset strings, `"npm-library"` can be used in the scenario of developing npm packages of the library type, which is suitable for most common module type projects. When `"npm-library"` is set, the output product of the project will have the following characteristics:
 
@@ -76,7 +77,7 @@ export default defineConfig({
 
 In the above code implementation, `preset.NPM_LIBRARY` corresponds to the preset string `"npm-library"`, which represents the `"npm-library"` equivalent of a multi-group build-related configuration. We traverse the `NPM_LIBRARY` array, which contains multiple `buildConfig` objects, with the `map` method. We make a shallow copy of the original `buildConfig` object and modify the shallow copy to get `buildConfig.target`, specifying it as `es2017`.
 
-> The specific value of `preset.NPM_LIBRARY` can be viewed via the [BuildPreset API](/en/api/build-config). The `preset` object contains not only `NPM_LIBRARY`, but also other similar constants.
+> The specific value of `preset.NPM_LIBRARY` can be viewed via the [BuildPreset API](/en/api/config/build-config). The `preset` object contains not only `NPM_LIBRARY`, but also other similar constants.
 
 So what is the `buildConfig` object here? And what are the previously mentioned build product features based on?
 
@@ -88,34 +89,34 @@ We explain it next.
 
 **The basic attributes of a build product include:**
 
-- Whether the product is packaged or not: the corresponding API is [`buildConfig.buildType`](/en/api/build-config#buildtype).
-- Product support for syntax: the corresponding API is [`buildConfig.target`](/en/api/build-config#target).
-- Output format: The corresponding API is [`buildConfig.format`](/en/api/build-config#format).
-- How to handle the output type file: the corresponding API is [`buildConfig.dts`](/en/api/build-config#dts).
-- How the sourceMap of the product is handled: the corresponding API is [`buildConfig.sourceMap`](/en/api/build-config#sourcemap).
-- The input (or source file) corresponding to the output: the corresponding API is [`buildConfig.input`](/en/api/build-config#input).
-- The directory of the output of the product: the corresponding API is [`buildConfig.outDir`](/en/api/build-config#outDir).
-- The source directory of the build: the corresponding API is [`buildConfig.sourceDir`](/en/api/build-config#sourcedir).
+- Whether the product is packaged or not: the corresponding API is [`buildConfig.buildType`](/en/api/config/build-config#buildtype).
+- Product support for syntax: the corresponding API is [`buildConfig.target`](/en/api/config/build-config#target).
+- Output format: The corresponding API is [`buildConfig.format`](/en/api/config/build-config#format).
+- How to handle the output type file: the corresponding API is [`buildConfig.dts`](/en/api/config/build-config#dts).
+- How the sourceMap of the product is handled: the corresponding API is [`buildConfig.sourceMap`](/en/api/config/build-config#sourcemap).
+- The input (or source file) corresponding to the output: the corresponding API is [`buildConfig.input`](/en/api/config/build-config#input).
+- The directory of the output of the product: the corresponding API is [`buildConfig.outDir`](/en/api/config/build-config#outDir).
+- The source directory of the build: the corresponding API is [`buildConfig.sourceDir`](/en/api/config/build-config#sourcedir).
 
 **Common functions needed to build products include:**
 
-- Alias: The corresponding API is [`buildConfig.alias`](/en/api/build-config#alias).
-- Static resource handling: The corresponding API is [`buildConfig.asset`](/en/api/build-config#asset).
+- Alias: The corresponding API is [`buildConfig.alias`](/en/api/config/build-config#alias).
+- Static resource handling: The corresponding API is [`buildConfig.asset`](/en/api/config/build-config#asset).
 - Third-party dependency handling: The corresponding APIs are
-  - [`buildConfig.autoExternal`](/en/api/build-config#autoexternal).
-  - [`buildConfig.externals`](/en/api/build-config#externals).
-- Copy: The corresponding API is [`buildConfig.copy`](/en/api/build-config#copy).
-- Global variable substitution: the corresponding API is [`buildConfig.define`](/en/api/build-config#define).
-- Specify [JSX](https://reactjs.org/blog/2020/09/22/introducing-the-new-jsx-transform.html) compilation method, the corresponding API is [`buildConfig.jsx`](/en/api/build-config#jsx).
+  - [`buildConfig.autoExternal`](/en/api/config/build-config#autoexternal).
+  - [`buildConfig.externals`](/en/api/config/build-config#externals).
+- Copy: The corresponding API is [`buildConfig.copy`](/en/api/config/build-config#copy).
+- Global variable substitution: the corresponding API is [`buildConfig.define`](/en/api/config/build-config#define).
+- Specify [JSX](https://reactjs.org/blog/2020/09/22/introducing-the-new-jsx-transform.html) compilation method, the corresponding API is [`buildConfig.jsx`](/en/api/config/build-config#jsx).
 
 **Some advanced properties or less frequently used functions:**
 
-- Product code compression: The corresponding API is [`buildConfig.minify`](/en/api/build-config#minify).
-- Code splitting: [`buildConfig.splitting`](/en/api/build-config#splitting)
-- Specify whether the build product is for the NodeJS environment or the browser environment: the corresponding API is [`buildConfig.platform`](/en/api/build-config#platform).
+- Product code compression: The corresponding API is [`buildConfig.minify`](/en/api/config/build-config#minify).
+- Code splitting: [`buildConfig.splitting`](/en/api/config/build-config#splitting)
+- Specify whether the build product is for the NodeJS environment or the browser environment: the corresponding API is [`buildConfig.platform`](/en/api/config/build-config#platform).
 - umd product-related.
-  - Specifies the global variables imported externally to the umd product: the corresponding API is [`buildConfig.umdGlobals`](/en/api/build-config#umdglobals).
-  - Specify the module name of the umd product: the corresponding API is [`buildConfig.umdModuleName`](/en/api/build-config#umdmodulename).
+  - Specifies the global variables imported externally to the umd product: the corresponding API is [`buildConfig.umdGlobals`](/en/api/config/build-config#umdglobals).
+  - Specify the module name of the umd product: the corresponding API is [`buildConfig.umdModuleName`](/en/api/config/build-config#umdmodulename).
 
 In addition to the above categories, frequently asked questions and best practices about these APIs can be found at the following links.
 

package/docs/en/guide/basic/publish-your-project.md

@@ -20,7 +20,7 @@ An npm-type module project release process consists of two phases.
 
 Once these changes have been made, the current changes need to be documented with the following command.
 
-- [`modern change`](/zh/guide/command-preview#modern-change)
+- [`modern change`](/guide/basic/command-preview#modern-change)
 
 Executing the `modern change` command asks the developer several questions and generates a change log based on the developer's answers. The changelog file contains the type of change and its description, and is committed to the git repository.
 
@@ -53,7 +53,7 @@ publish test
 
 When the project version needs to be updated, execute the following command.
 
-- [`modern bump`](/zh/guide/command-preview#modern-bump)
+- [`modern bump`](/guide/basic/command-preview#modern-bump)
 
 Executing `modern bump` will modify the version number in `package.json` based on the contents of the Markdown file in the `.changeset/` directory where the changes were recorded, and generate the `CHANGELOG.md` file. **These Markdown files are also deleted when the version update is complete, so they are "consumed "**.
 
@@ -71,7 +71,7 @@ Executing `modern bump` will modify the version number in `package.json` based o
 
 To publish a project, you can execute the following command.
 
-- [`modern publish`](/zh/guide/command-preview#modern-release)
+- [`modern publish`](/guide/basic/command-preview#modern-release)
 
 The `modern release` command publishes the project to the npm Registry.
 
@@ -89,7 +89,7 @@ However, if you want to change the version number of the current project to a pr
 
 When a pre-release is needed before the official release, the following command is executed.
 
-- [`modern pre`](/zh/guide/command-preview#modern-pre)
+- [`modern pre`](/guide/basic/command-preview#modern-pre)
 
 First `modern pre enter <tag>` to enter pre-release mode, `<tag>` can be the same as the `tag` specified with the `modern release --tag` command when releasing the project.
 

package/docs/en/guide/basic/test-your-project.mdx

@@ -37,7 +37,7 @@ After execution, you will see the results of the test:
 
 The Module Engineering Program provides the following configurations for testing.
 
-- [`testing`](/zh/api/config-test)
+- [`testing`](/api/config/testing)
 
 You can add it in `modern.config.(j|t)s`.
 
@@ -99,10 +99,12 @@ npm run test
 
 ### Components
 
-For components, Modern.js's [Runtime API](xxx) provides functionality for testing UI components, which is provided by `@modern-js/runtime/testing`.
+{/* 链接待补充 */}
+
+For components, Modern.js's Runtime API provides functionality for testing UI components, which is provided by `@modern-js/runtime/testing`.
 
 :::tip
-If you need to use the Runtime API, then you can turn it on via [microgenerator](/zh/guide/command-preview).
+If you need to use the Runtime API, then you can turn it on via [microgenerator](/guide/basic/command-preview).
 :::
 
 <CH.Spotlight>

package/docs/en/guide/basic/use-micro-generator.md

@@ -12,7 +12,7 @@ The Module Engineering solution provides the Microgenerator tool, which allows f
 
 Thus with these capabilities, **Microgenerator can enable additional feature functionality for the project**.
 
-The microgenerator can be started via [`modern new`](/zh/guide/command-preview). The current Microgenerator features supported by the Module Engineering program are:
+The microgenerator can be started via [`modern new`](/guide/basic/command-preview). The current Microgenerator features supported by the Module Engineering program are:
 
 ## Storybook
 
@@ -20,8 +20,8 @@ The **Storybook feature** can be enabled when we want to debug a component or a
 
 For more information on how to start Storybook and how to use it, check out the following link.
 
-- [`modern dev`](/en/guide/command-preview#modern-dev)
-- [using Storybook](xxx)
+- [`modern dev`](/en/guide/basic/command-preview#modern-dev)
+- [`using Storybook`](/en/guide/basic/using-storybook)
 
 ## Tailwind CSS support
 
@@ -29,10 +29,14 @@ This can be enabled when we want to add [Tailwind CSS](https://v2.tailwindcss.co
 
 For more information on how to use Tailwind CSS in your module projects, check out.
 
-- [Using Tailwind CSS](xxx)
+<!-- 链接待补充 -->
+
+- Using Tailwind CSS
 
 ## Modern.js Runtime API
 
-**Modern.js provides [Runtime API](xxx) capabilities that can only be used in the Modern.js application project environment**. If you need to develop a component for use in a Modern.js application environment, then you can turn on this feature and the microgenerator will add the `"@modern-js/runtime"` dependency.
+<!-- 链接待补充 -->
+
+**Modern.js provides Runtime API capabilities that can only be used in the Modern.js application project environment**. If you need to develop a component for use in a Modern.js application environment, then you can turn on this feature and the microgenerator will add the `"@modern-js/runtime"` dependency.
 
 Also, the Storybook debugging tool will determine if the project needs to use the Runtime API by checking the project's dependencies and providing the same Runtime API runtime environment as the Modern.js application project.

package/docs/en/guide/basic/using-storybook.mdx

@@ -6,8 +6,8 @@ sidebar_position: 5
 
 First of all, if you haven't read the following, take a few minutes to understand it first.
 
-- [use micro-generator to enable Storybook debugging](/en/guide/use-micro-generator#storybook-debug)
-- [`modern dev`](/en/guide/command-preview#modern-dev)
+- [use micro-generator to enable Storybook debugging](/en/guide/basic/use-micro-generator#storybook-debug)
+- [`modern dev`](/en/guide/basic/command-preview#modern-dev)
 
 [Storybook](https://storybook.js.org/) is a tool dedicated to component debugging, providing around component development.
 
@@ -171,7 +171,9 @@ In addition to the configuration file, the module engineering solution also prov
 
 The webpack configuration of Storybook can be modified via this configuration.
 
-- [`dev.storybook.webpack`](xxx)
+{/* 链接待补充 */}
+
+- `dev.storybook.webpack`
 
 ### Building Storybook Products
 
@@ -183,6 +185,6 @@ modern build --platform storybook
 
 For the `modern build --platform` command you can see.
 
-- [`modern build`](/en/guide/command-preview#modern-build)
+- [`modern build`](/en/guide/basic/command-preview#modern-build)
 
 After the build is complete, you can see the build product files in the `dist/storybook-static` directory.