@modern-js/module-tools-docs 2.0.0-beta.4 → 2.0.2

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

@@ -1,10 +1,14 @@
+---
+sidebar_position: 2
+---
+
 # 命令预览
 
 模块工程项目可以使用的命令：
 
 ## `modern build`
 
-``` bash
+```bash
 Usage: modern build [options]
 
 构建模块命令
@@ -22,7 +26,7 @@ Options:
 当想要启动项目构建的时候，可以执行 `modern build` 命令。在使用这个命令的时候，我们可以：
 
 - 当想要以观察模式启动构建时，使用 `--watch` 选项。
-- 当想要指定项目编译读取的 TypeScript 配置文件的路径时，使用 `build --tsconfig ./path/config.json` 选项。使用该选项后，会覆盖所有 [`buildConfig`](/zh/api/build-config) 里 [`dts.tsconfigPath`](/zh/api/build-config) 配置。
+- 当想要指定项目编译读取的 TypeScript 配置文件的路径时，使用 `build --tsconfig ./path/config.json` 选项。使用该选项后，会覆盖所有 [`buildConfig`](/api/config/build-config) 里 [`dts.tsconfigPath`](/api/config/build-config) 配置。
 - 当需要关闭项目的 DTS 类型文件生成和类型检查行为时，可以使用 `--no-dts` 选项。**注意：类型文件的生成依赖类型检查的结果。如果关闭了类型检查，那么类型文件也不会生成**。
 - 当需要关闭自动清除产物输出目录的行为时，可以使用 `--no-clear` 选项。
 
@@ -34,7 +38,7 @@ Options:
 
 ## `modern new`
 
-``` bash
+```bash
 Usage: modern new [options]
 
 模块化工程方案中执行生成器
@@ -55,11 +59,11 @@ Options:
 - Tailwind CSS 支持
 - Modern.js Runtime API
 
-关于这些功能，可以通过[【使用微生成器】](/zh/guide/use-micro-generator) 章节了解更多。
+关于这些功能，可以通过[【使用微生成器】](/guide/basic/use-micro-generator) 章节了解更多。
 
 ## `modern dev`
 
-``` bash
+```bash
 Usage: modern dev [options]
 
 本地开发命令
@@ -71,24 +75,24 @@ Commands:
 [dev-tools-subCommand]
 ```
 
-模块工程解决方案提供了使用调试工具的能力，可以通过 `modern dev` 命令来启动。不过要注意的是，默认情况下是没有提供调试相关的插件，因此此时执行 `modern dev` 会提示： *"No dev tools found available"*。
+模块工程解决方案提供了使用调试工具的能力，可以通过 `modern dev` 命令来启动。不过要注意的是，默认情况下是没有提供调试相关的插件，因此此时执行 `modern dev` 会提示： _"No dev tools found available"_。
 
 目前官方支持的调试工具有 [Storybook](https://storybook.js.org/)，因此在你执行 `modern new` 命令开启它后，就可以执行 `modern dev` 或者 `modern dev storybook` 执行它。
 
 ## `modern test`
 
-``` bash
+```bash
 Usage: modern test [options]
 
 Options:
   -h, --help  display help for command
 ```
-`modern test` 命令会自动将 `src/tests/*.test.(js|ts|jsx|tsx)` 文件当做测试用例运行。
 
+`modern test` 命令会自动将 `src/tests/*.test.(js|ts|jsx|tsx)` 文件当做测试用例运行。
 
 ## `modern lint`
 
-``` bash
+```bash
 Usage: modern lint [options] [...files]
 
 lint and fix source files
@@ -104,7 +108,7 @@ Options:
 
 ## `modern change`
 
-``` bash
+```bash
 Usage: modern change [options]
 
 创建变更集
@@ -119,7 +123,7 @@ Options:
 
 ## `modern pre`
 
-``` bash
+```bash
 Usage: modern pre [options] <enter|exit> [tag]
 
 进入和退出预发布模式
@@ -132,7 +136,7 @@ Options:
 
 ## `modern bump`
 
-``` bash
+```bash
 Usage: modern bump [options]
 
 使用变更集自动更新发布版本和变更日志
@@ -148,7 +152,7 @@ Options:
 
 ## `modern release`
 
-``` bash
+```bash
 Usage: modern release [options]
 
 发布 npm 包
@@ -166,7 +170,7 @@ Options:
 
 ## `modern gen-release-note`
 
-``` bash
+```bash
 Usage: modern gen-release-note [options]
 
 根据当前仓库 changeset 信息生成 Release Note
@@ -185,7 +189,7 @@ Options:
 
 ## `modern upgrade`
 
-``` bash
+```bash
 Usage: modern upgrade [options]
 
 升级 Modern.js 到最新版本

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

@@ -1,10 +1,14 @@
+---
+sidebar_position: 3
+---
+
 # 修改输出产物
 
 ## 默认输出产物
 
 当在初始化的项目里使用 `modern build` 命令的时候，会根据 Module Tools 默认支持的配置生成相应的产物。默认支持的配置具体如下：
 
-``` typescript
+```typescript
 import { defineConfig } from '@modern-js/module-tools';
 
 export default defineConfig({
@@ -20,8 +24,9 @@ export default defineConfig({
 - 产物输出根目录为项目下的 `dist` 目录，类型文件输出的目录为 `dist/types`。
 
 :::tip
+
 1. 所谓“代码语法支持到 ES6”的意思是指：产物代码所支持的语法不会超过 `ES6`。如果源码中使用语法是 `ES6` 以上的语法（例如 `ES2017`），则会被进行转换。
-:::
+   :::
 
 看到这里你可能会有以下疑问：
 
@@ -38,7 +43,7 @@ export default defineConfig({
 
 **构建预设的值可以是字符串形式**，因此这样形式的构建预设叫做预设字符串。
 
-模块工程解决方案根据 npm 包使用的通用场景，提供了通用的构建预设字符串以及相应的变体。目前支持的所有预设字符串可以通过 [BuildPreset API](/zh/api/build-config) 查看。这里讲解一下关于**通用的预设字符串与变体之间的关系**。
+模块工程解决方案根据 npm 包使用的通用场景，提供了通用的构建预设字符串以及相应的变体。目前支持的所有预设字符串可以通过 [BuildPreset API](/api/config/build-config) 查看。这里讲解一下关于**通用的预设字符串与变体之间的关系**。
 
 在通用的预设字符串中，`"npm-library"` 可以用于在开发库类型的 npm 包的场景下使用，它适合大多数普通的模块类型项目。当设置 `"npm-library"` 的时候，项目的输出产物会有以下特点：
 
@@ -56,8 +61,8 @@ export default defineConfig({
 
 例如，如果使用预设函数的形式达到预设字符串 `"npm-library-es2017"` 同样的效果，可以按照如下的方式：
 
-``` typescript
-import { defineConfig } from "@modern-js/module-tools";
+```typescript
+import { defineConfig } from '@modern-js/module-tools';
 
 export default defineConfig({
   buildPreset({ preset }) {
@@ -69,7 +74,8 @@ export default defineConfig({
 ```
 
 在上面的代码实现中，`preset.NPM_LIBRARY` 与预设字符串 `"npm-library"` 是相对应的，它代表着 `"npm-library"` 等价的多组构建相关的配置。我们通过 `map` 方法遍历了 `NPM_LIBRARY` 这个数组，在这个数组中包含了多个 `buildConfig` 对象。我们将原本的 `buildConfig` 对象进行了浅拷贝并修改了浅拷贝后得到 `buildConfig.target`，将它指定为 `es2017`。
-> 关于 `preset.NPM_LIBRARY` 具体对应的值，可以通过 [BuildPreset API](/zh/api/build-config) 查看。在 `preset` 对象下不仅包含了 `NPM_LIBRARY`，还包含了其他类似的常量。
+
+> 关于 `preset.NPM_LIBRARY` 具体对应的值，可以通过 [BuildPreset API](/api/config/build-config) 查看。在 `preset` 对象下不仅包含了 `NPM_LIBRARY`，还包含了其他类似的常量。
 
 那么这里的 `buildConfig` 对象是什么呢？之前提到的构建产物特点又是根据什么呢？
 
@@ -77,54 +83,55 @@ export default defineConfig({
 
 ## 构建配置（对象）
 
-**`buildConfig` 是一个用来描述如何编译、生成构建产物的配置对象**。在最开始提到的关于“*构建产物的特点*”，其实都是 `buildConfig` 所支持的属性。目前所支持的属性覆盖了大部分模块类型项目在构建产物时的需求，`buildConfig` 不仅包含一些产物所具备的属性，也包含了构建产物所需要的一些特性功能。接下来从分类的角度简单罗列一下：
+**`buildConfig` 是一个用来描述如何编译、生成构建产物的配置对象**。在最开始提到的关于“_构建产物的特点_”，其实都是 `buildConfig` 所支持的属性。目前所支持的属性覆盖了大部分模块类型项目在构建产物时的需求，`buildConfig` 不仅包含一些产物所具备的属性，也包含了构建产物所需要的一些特性功能。接下来从分类的角度简单罗列一下：
 
 **构建产物的基本属性包括：**
 
-- 产物是否被打包：对应的 API 是 [`buildConfig.buildType`](/zh/api/build-config#buildtype)。
-- 产物对于语法的支持：对应的 API 是 [`buildConfig.target`](/zh/api/build-config#target)。
-- 产物格式：对应的 API 是 [`buildConfig.format`](/zh/api/build-config#format)。
-- 产物类型文件如何处理，对应的 API 是 [`buildConfig.dts`](/zh/api/build-config#dts)。
-- 产物的 sourceMap 如何处理：对应的 API 是 [`buildConfig.sourceMap`](/zh/api/build-config#sourcemap)。
-- 产物对应的输入（或者是源文件）：对应的 API 是 [`buildConfig.input`](/zh/api/build-config#input)。
-- 产物输出的目录：对应的 API 是 [`buildConfig.outdir`](/zh/api/build-config#outdir)。
-- 构建的源码目录：对应的 API 是 [`buildConfig.sourceDir`](/zh/api/build-config#sourcedir)。
+- 产物是否被打包：对应的 API 是 [`buildConfig.buildType`](/api/config/build-config#buildtype)。
+- 产物对于语法的支持：对应的 API 是 [`buildConfig.target`](/api/config/build-config#target)。
+- 产物格式：对应的 API 是 [`buildConfig.format`](/api/config/build-config#format)。
+- 产物类型文件如何处理，对应的 API 是 [`buildConfig.dts`](/api/config/build-config#dts)。
+- 产物的 sourceMap 如何处理：对应的 API 是 [`buildConfig.sourceMap`](/api/config/build-config#sourcemap)。
+- 产物对应的输入（或者是源文件）：对应的 API 是 [`buildConfig.input`](/api/config/build-config#input)。
+- 产物输出的目录：对应的 API 是 [`buildConfig.outDir`](/api/config/build-config#outDir)。
+- 构建的源码目录：对应的 API 是 [`buildConfig.sourceDir`](/api/config/build-config#sourcedir)。
 
 **构建产物所需的常用功能包括：**
 
-- 别名：对应的 API 是 [`buildConfig.alias`](/zh/api/build-config#alias)。
-- 静态资源处理：对应的 API 是 [`buildConfig.asset`](/zh/api/build-config#asset)。
+- 别名：对应的 API 是 [`buildConfig.alias`](/api/config/build-config#alias)。
+- 静态资源处理：对应的 API 是 [`buildConfig.asset`](/api/config/build-config#asset)。
 - 第三方依赖处理：对应的 API 有：
-  * [`buildConfig.autoExternal`](/zh/api/build-config#autoexternal)。
-  * [`buildConfig.externals`](/zh/api/build-config#externals)。
-- 拷贝：对应的 API 是 [`buildConfig.copy`](/zh/api/build-config#copy)。
-- 全局变量替换：对应的 API 是 [`buildConfig.define`](/zh/api/build-config#define)。
-- 指定 [JSX](https://reactjs.org/blog/2020/09/22/introducing-the-new-jsx-transform.html) 编译方式，对应的 API 是 [`buildConfig.jsx`](/zh/api/build-config#jsx)。
+  - [`buildConfig.autoExternal`](/api/config/build-config#autoexternal)。
+  - [`buildConfig.externals`](/api/config/build-config#externals)。
+- 拷贝：对应的 API 是 [`buildConfig.copy`](/api/config/build-config#copy)。
+- 全局变量替换：对应的 API 是 [`buildConfig.define`](/api/config/build-config#define)。
+- 指定 [JSX](https://reactjs.org/blog/2020/09/22/introducing-the-new-jsx-transform.html) 编译方式，对应的 API 是 [`buildConfig.jsx`](/api/config/build-config#jsx)。
 
 **一些高级属性或者使用频率不高的功能：**
 
-- 产物代码压缩：对应的 API 是 [`buildConfig.minify`](/zh/api/build-config#minify)。
-- 代码分割：[`buildConfig.spitting`](/zh/api/build-config#splitting)
-- 指定构建产物用于 NodeJS 环境还是浏览器环境：对应的 API 是 [`buildConfig.platform`](/zh/api/build-config#platform)。
+- 产物代码压缩：对应的 API 是 [`buildConfig.minify`](/api/config/build-config#minify)。
+- 代码分割：[`buildConfig.spitting`](/api/config/build-config#splitting)
+- 指定构建产物用于 NodeJS 环境还是浏览器环境：对应的 API 是 [`buildConfig.platform`](/api/config/build-config#platform)。
 - umd 产物相关：
-  * 指定 umd 产物外部导入的全局变量：对应的 API 是 [`buildConfig.umdGlobals`](/zh/api/build-config#umdglobals)。
-  * 指定 umd 产物的模块名：对应的 API 是 [`buildConfig.umdModuleName`](/zh/api/build-config#umdmodulename)。
+  - 指定 umd 产物外部导入的全局变量：对应的 API 是 [`buildConfig.umdGlobals`](/api/config/build-config#umdglobals)。
+  - 指定 umd 产物的模块名：对应的 API 是 [`buildConfig.umdModuleName`](/api/config/build-config#umdmodulename)。
 
 除了以上分类以外，关于这些 API 的常见问题和最佳实践可以通过下面的链接来了解，敬请期待。
-* [什么是 `bundle` 和 `bundleless`?](/zh/guide/advance/in-depth-about-build#bundle-和-bundleless)
-* [`input` 与 `sourceDir` 的关系](/zh/guide/advance/in-depth-about-build#input-与-sourcedir-的关系)。
-* [产物中类型文件的多种生成方式](/zh/guide/advance/in-depth-about-build#类型文件)。
-* [`buildConfig.define` 不同场景的使用方式。](/zh/guide/advance/in-depth-about-build#buildconfigdefine-不同场景的使用方式)
-* [如何处理第三方依赖？](/zh/guide/advance/external-dependency)
-* [如何使用拷贝？](/zh/guide/advance/copy)
-* [如何构建 umd 产物？](/zh/guide/advance/build-umd#设置项目的全局变量名称)
-* [静态资源目前所支持的能力。](/zh/guide/advance/asset)
+
+- [什么是 `bundle` 和 `bundleless`?](/guide/advance/in-depth-about-build#bundle-和-bundleless)
+- [`input` 与 `sourceDir` 的关系](/guide/advance/in-depth-about-build#input-与-sourcedir-的关系)。
+- [产物中类型文件的多种生成方式](/guide/advance/in-depth-about-build#类型文件)。
+- [`buildConfig.define` 不同场景的使用方式。](/guide/advance/in-depth-about-build#buildconfigdefine-不同场景的使用方式)
+- [如何处理第三方依赖？](/guide/advance/external-dependency)
+- [如何使用拷贝？](/guide/advance/copy)
+- [如何构建 umd 产物？](/guide/advance/build-umd#设置项目的全局变量名称)
+- [静态资源目前所支持的能力。](/guide/advance/asset)
 
 ## 什么时候使用 `buildConfig`
 
 `buildConfig` 是用于修改产物的方式之一，**当与 `buildPreset` 配置同时存在的时候，只有 `buildConfig` 才会生效**。因此如果按照如下方式配置：
 
-``` typescript
+```typescript
 import { defineConfig } from '@modern-js/module-tools';
 
 export default defineConfig({
@@ -135,10 +142,10 @@ export default defineConfig({
 
 那么此时就会看到如下提示：
 
-``` bash
+```bash
 因为同时出现 'buildConfig' 和 'buildPreset' 配置，因此仅 'buildConfig' 配置生效
 ```
 
 `buildPreset` 代表的一组或者多组构建相关的配置都是由 `buildConfig` 组成，**当使用 `buildPreset` 无法满足当前项目需求的时候，就可以使用 `buildConfig` 来自定义输出产物**。
 
-在使用 `buildConfig` 的过程，就是对“*获得怎样的构建产物*”的思考过程。
+在使用 `buildConfig` 的过程，就是对“_获得怎样的构建产物_”的思考过程。

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

@@ -1,26 +1,30 @@
+---
+sidebar_position: 7
+---
+
 # 版本管理与发布
 
 一个 npm 类型的模块项目发布流程包含了两个阶段：
 
-* 第一阶段是在开发期间，开发者需要提供一个变更文件来记录需要发布的变动；
-* 第二阶段是在发布期间，Module Tools 可以收集所有的变更文件来更新版本、更新发布日志，并发布新的包到 [npm Registry](https://www.npmjs.com/) 上。
+- 第一阶段是在开发期间，开发者需要提供一个变更文件来记录需要发布的变动；
+- 第二阶段是在发布期间，Module Tools 可以收集所有的变更文件来更新版本、更新发布日志，并发布新的包到 [npm Registry](https://www.npmjs.com/) 上。
 
 ## 跟踪变更
 
 **当项目发生变化的时候需要将变化的内容记录下来**。项目发生的变化一般是指：
 
-* 新功能
-* 修复问题
-* 配置文件修改
-* ...
+- 新功能
+- 修复问题
+- 配置文件修改
+- ...
 
 当这些变化一旦完成后，需要通过以下命令来对当前的变化进行记录：
 
-* [`modern change`](/zh/guide/command-preview#modern-change)
+- [`modern change`](/guide/basic/command-preview#modern-change)
 
 执行 `modern change` 命令后会向开发者提出几个问题，并根据开发者的回答生成变更记录。变更记录文件包含了版本变化的类型和其描述，该文件会被提交到 git 仓库中。
 
-``` bash
+```bash
 $ npx modern change
 🦋  What kind of change is this for module-example? (current version is 0.1.0) · patch
 🦋  Please enter a summary for this change (this will be in the changelogs). Submit empty line to open external editor
@@ -37,9 +41,9 @@ $ npx modern change
 
 当执行成功后，生成的包含变更记录的 Markdown 文件会保存在项目的 `.changeset` 目录下面。其内容类似下面这样：
 
-``` markdown .changeset/brave-dryers-agree.md
+```markdown .changeset/brave-dryers-agree.md
 ---
-"module-example": patch
+'module-example': patch
 ---
 
 publish test
@@ -49,14 +53,15 @@ publish test
 
 当需要更新项目版本的时候，执行以下命令：
 
-* [`modern bump`](/zh/guide/command-preview#modern-bump)
+- [`modern bump`](/guide/basic/command-preview#modern-bump)
 
 执行 `modern bump` 将会基于 `.changeset/` 目录下记录了变更的 Markdown 文件内容来修改 `package.json` 中的版本号，同时生成 `CHANGELOG.md` 文件。**而当版本更新完成后，这些记录变更的 Markdown 文件也会被删除，也可说这些 Markdown 文件被“消耗”掉了**。
 
-``` markdown CHANGELOG.md
+```markdown CHANGELOG.md
 # module
 
 ## 0.1.1
+
 ### Patch Changes
 
 - publish test
@@ -66,13 +71,13 @@ publish test
 
 发布项目可以执行以下命令：
 
-* [`modern publish`](/zh/guide/command-preview#modern-release)
+- [`modern publish`](/guide/basic/command-preview#modern-release)
 
 `modern release` 命令可以将项目发布到 npm Registry。
 
 此时发布的是 `latest` 版本，也可以说是正式版本。如果想要修改 `dist-tag`，可以通过 `modern release --tag` 命令来指定。例如：
 
-``` bash
+```bash
 modern release --tag beta
 ```
 
@@ -84,11 +89,11 @@ modern release --tag beta
 
 当需要在正式发布之前进行预发布，则需要执行以下命令：
 
-* [`modern pre`](/zh/guide/command-preview#modern-pre)
+- [`modern pre`](/guide/basic/command-preview#modern-pre)
 
 首先 `modern pre enter <tag>` 进入预发布模式，`<tag>` 可以与发布项目的时候使用 `modern release --tag` 命令指定的 `tag` 一致。
 
-``` bash
+```bash
 $ npx modern pre enter next
 🦋  success Entered pre mode with tag next
 🦋  info Run `changeset version` to version packages with prerelease versions
@@ -97,7 +102,7 @@ $ npx modern pre enter next
 
 接着可以使用 `modern bump` 命令更新具体的版本号，**此时不会真正的“消耗”记录变更的 Markdown 文件**：
 
-``` bash
+```bash
 $ npx modern bump
 🦋  warn ===============================IMPORTANT!===============================
 🦋  warn You are in prerelease mode

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

@@ -1,3 +1,7 @@
+---
+sidebar_position: 6
+---
+
 # 测试项目
 
 本章将要介绍如何测试可复用模块。
@@ -6,20 +10,19 @@
 
 想要使用项目的测试功能，需要确保项目中包含以下依赖：
 
-* `"@modern-js/plugin-testing"`
+- `"@modern-js/plugin-testing"`
 
 在模块工程方案中，对于测试用例或者说编写测试的文件有如下约定：
 
-* 项目目录下的 `tests` 目录为测试用例和测试文件的目录，**不支持更改运行测试用例的目录**。
-* 默认会自动将后缀为 `.test.[tj]sx?` 的文件识别为测试文件。
-* 其他的 `.[tj]sx?` 后缀的文件被识别为普通的文件，可以用于测试的 `utils` 文件或者其他用途。
-
+- 项目目录下的 `tests` 目录为测试用例和测试文件的目录，**不支持更改运行测试用例的目录**。
+- 默认会自动将后缀为 `.test.[tj]sx?` 的文件识别为测试文件。
+- 其他的 `.[tj]sx?` 后缀的文件被识别为普通的文件，可以用于测试的 `utils` 文件或者其他用途。
 
 ## 运行测试
 
 当准备好了依赖以及了解了测试用例在哪里编写后，我们可以通过以下命令来执行测试：
 
-``` bash
+```bash
 modern test
 
 // 更新 snapshot
@@ -28,13 +31,14 @@ modern test --updateSnapshot
 
 执行之后，会看到测试的结果：
 
-![test-result](/test-result.png)
+![test-result](https://lf3-static.bytednsdoc.com/obj/eden-cn/uhbfnupenuhf/test-result.png)
 
 ## 使用配置
 
+/obj/eden-cn/uhbfnupenuhf/test-result.png
 模块工程方案对测试提供了以下配置：
 
-* [`testing`](/zh/api/config-test)
+- [`testing`](/api/config/testing)
 
 可以在 `modern.config.(j|t)s` 中增加它。
 
@@ -46,7 +50,7 @@ modern test --updateSnapshot
 
 <CH.Spotlight>
 
-``` typescript ./src/index.ts
+```typescript ./src/index.ts
 export default function () {
   return 'hello world';
 }
@@ -56,7 +60,7 @@ export default function () {
 
 首先是模块的代码。
 
-``` typescript ./src/index.ts
+```typescript ./src/index.ts
 export default function () {
   return 'hello world';
 }
@@ -68,7 +72,7 @@ export default function () {
 
 其中 `@` 指向了源码目录，在初始化项目的 `tests/tsconfig.json` 中定义了。
 
-``` typescript ./tests/index.test.ts
+```typescript ./tests/index.test.ts
 import main from '@/index';
 
 describe('默认值 cases', () => {
@@ -84,7 +88,7 @@ describe('默认值 cases', () => {
 
 最后我们可以执行 `modern test`。
 
-``` bash
+```bash
 pnpm test
 ## or
 yarn test
@@ -96,15 +100,17 @@ npm run test
 
 ### 组件
 
-对于组件，Modern.js 的 [Runtime API](xxx) 提供了用于测试 UI 组件的功能，其功能由 `@modern-js/runtime/testing` 提供。
+{/* 链接待补充 */}
+
+对于组件，Modern.js 的 Runtime API 提供了用于测试 UI 组件的功能，其功能由 `@modern-js/runtime/testing` 提供。
 
 :::tip
-如果需要使用 Runtime API，那么可以通过 [微生成器](/zh/guide/command-preview) 开启。
+如果需要使用 Runtime API，那么可以通过 [微生成器](/guide/basic/command-preview) 开启。
 :::
 
 <CH.Spotlight>
 
-``` tsx ./src/index.tsx
+```tsx ./src/index.tsx
 export const default () {
   return (
     <div>This is a UI Component</div>
@@ -116,7 +122,7 @@ export const default () {
 
 首先是组件的代码。
 
-``` tsx ./src/index.tsx
+```tsx ./src/index.tsx
 export const default () {
   return (
     <div>This is a UI Component</div>
@@ -130,7 +136,7 @@ export const default () {
 
 其中 `@` 指向了源码目录，在初始化项目的 `tests/tsconfig.json` 中定义了。
 
-``` tsx ./tests/index.test.tsx
+```tsx ./tests/index.test.tsx
 import { render, screen } from '@modern-js/runtime/testing';
 
 import Component from '@/index';
@@ -147,7 +153,7 @@ describe('默认值 cases', () => {
 
 最后我们可以执行 `modern test`。
 
-``` bash
+```bash
 pnpm test
 ## or
 yarn test

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

@@ -1,14 +1,18 @@
+---
+sidebar_position: 4
+---
+
 # 使用微生成器
 
 模块工程解决方案提供了微生成器工具，它可以为当前项目：
 
-* 新增目录和文件
-* 修改 `package.json` 文件内容
-* 执行命令
+- 新增目录和文件
+- 修改 `package.json` 文件内容
+- 执行命令
 
 因此通过这些能力，**微生成器可以为项目开启额外的特性功能**。
 
-可以通过 [`modern new`](/zh/guide/command-preview) 启动微生成器。目前模块工程方案支持的微生成器功能有：
+可以通过 [`modern new`](/guide/basic/command-preview) 启动微生成器。目前模块工程方案支持的微生成器功能有：
 
 ## Storybook 调试
 
@@ -16,8 +20,8 @@
 
 关于如何启动 Storybook 以及如何使用 Storybook，可以查看下面的链接：
 
-* [`modern dev`](/zh/guide/command-preview#modern-dev)
-* [使用 Storybook](/zh/guide/using-storybook)
+- [`modern dev`](/guide/basic/command-preview#modern-dev)
+- [使用 Storybook](/guide/basic/using-storybook)
 
 ## Tailwind CSS 支持
 
@@ -25,11 +29,10 @@
 
 关于如何在模块工程里使用 Tailwind CSS，可以查看：
 
-* [使用 Tailwind CSS](xxx)
-
+- [使用 Tailwind CSS](https://modernjs.dev/docs/apis/module/config/tools/tailwindcss)
 
 ## 启动 Modern.js Runtime API
 
-**Modern.js 提供了 [Runtime API](xxx) 能力，这些 API 只能在 Modern.js 的应用项目环境中使用**。如果你需要开发一个 Modern.js 应用环境中使用的组件，那么你可以开启该特性，微生成器会增加 `"@modern-js/runtime"`依赖。
+**Modern.js 提供了 [Runtime API](https://modernjs.dev/docs/apis/module/runtime/) 能力，这些 API 只能在 Modern.js 的应用项目环境中使用**。如果你需要开发一个 Modern.js 应用环境中使用的组件，那么你可以开启该特性，微生成器会增加 `"@modern-js/runtime"`依赖。
 
 另外，Storybook 调试工具也会通过检测项目的依赖确定项目是否需要使用 Runtime API，并且提供与 Modern.js 应用项目一样的 Runtime API 运行环境。