From dff3bf6034bf34d2d7953218348d0525711b7284 Mon Sep 17 00:00:00 2001
From: honlyHuang <huangliyn@gmail.com>
Date: Sat, 21 Nov 2020 12:14:47 +0800
Subject: [PATCH 1/9] =?UTF-8?q?docs(fix):=20=E6=9A=97=E9=BB=91=E6=A8=A1?=
 =?UTF-8?q?=E5=BC=8F=E4=BB=A3=E7=A0=81=E5=8C=BA=E5=9D=97=E8=83=8C=E6=99=AF?=
 =?UTF-8?q?=E4=B8=8E=E5=AD=97=E4=BD=93=E5=90=8C=E8=89=B2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 static/css/custom.css | 4 ----
 1 file changed, 4 deletions(-)

diff --git a/static/css/custom.css b/static/css/custom.css
index 4e5ae8449a79..39b1ee4ece51 100644
--- a/static/css/custom.css
+++ b/static/css/custom.css
@@ -325,10 +325,6 @@ html[data-theme='dark'] .docusaurus-highlight-code-line {
   overflow: hidden;
 }
 
-pre {
-  background-color: #f8f8f8 !important;
-}
-
 .hljs {
   display: block;
   overflow-x: auto;

From 9086811cf3c4345adb704ed8c060cace78fe6931 Mon Sep 17 00:00:00 2001
From: honlyHuang <huangliyn@gmail.com>
Date: Sat, 21 Nov 2020 14:38:08 +0800
Subject: [PATCH 2/9] =?UTF-8?q?docs(fix):=20=E6=9A=97=E9=BB=91=E6=A8=A1?=
 =?UTF-8?q?=E5=BC=8F=E4=B8=8B=E8=AE=BE=E7=BD=AElogo?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 docusaurus.config.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/docusaurus.config.js b/docusaurus.config.js
index 534bf9b37cb1..66a50d51a22c 100644
--- a/docusaurus.config.js
+++ b/docusaurus.config.js
@@ -57,6 +57,7 @@ const siteConfigGithub = {
       logo: {
         alt: 'Taro logo',
         src: 'img/logo-taro.png',
+        srcDark: 'img/logo-taro.png'
       },
       items: [
         {

From 1edb0ef26856a92dfd62f190069358ddbb1f1809 Mon Sep 17 00:00:00 2001
From: honlyHuang <huangliyn@gmail.com>
Date: Tue, 24 Nov 2020 20:13:37 +0800
Subject: [PATCH 3/9] =?UTF-8?q?docs(fix):=20=E6=96=87=E6=A1=A3=20blog=20?=
 =?UTF-8?q?=E9=87=8C=E9=94=99=E8=AF=AF=E9=93=BE=E6=8E=A5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 blog/2020-02-13-taro-next-alpha.md                   |  6 +++---
 blog/2020-04-27-taro-build-jd.md                     |  2 +-
 blog/2020-04-27-taro-vs-jd.md                        |  2 +-
 blog/2020-05-26-taro-3-rc.md                         |  6 +++---
 blog/2020-07-01-taro-3-0-0.md                        | 10 +++++-----
 blog/2020-4-13-taro-components.md                    |  2 +-
 docs/README.md                                       |  2 +-
 docs/taro-quickapp-manifest.md                       |  2 +-
 versioned_docs/version-1.x/GETTING-STARTED.md        |  2 +-
 versioned_docs/version-1.x/migration.md              |  2 +-
 versioned_docs/version-1.x/taro-quickapp-manifest.md |  2 +-
 versioned_docs/version-2.x/GETTING-STARTED.md        |  2 +-
 versioned_docs/version-2.x/taro-quickapp-manifest.md |  2 +-
 versioned_docs/version-3.x/README.md                 |  2 +-
 versioned_docs/version-3.x/taro-quickapp-manifest.md |  2 +-
 15 files changed, 23 insertions(+), 23 deletions(-)

diff --git a/blog/2020-02-13-taro-next-alpha.md b/blog/2020-02-13-taro-next-alpha.md
index 16eba7fe3500..3926e3a0e401 100644
--- a/blog/2020-02-13-taro-next-alpha.md
+++ b/blog/2020-02-13-taro-next-alpha.md
@@ -117,10 +117,10 @@ export default
 
 [1] 小程序跨框架开发的探索与实践: https://www.infoq.cn/article/TMqBzVFTSiQTUbgxydPm
 
-[2] Taro Next 旧版本迁移指南：https://docs.taro.zone/taro/docs/migration.html
+[2] Taro Next 旧版本迁移指南：https://docs.taro.zone/docs/migration
 
-[3] Prerender: https://docs.taro.zone/taro/docs/prerender.html
+[3] Prerender: https://docs.taro.zone/docs/prerender
 
 [4] 性能测试：https://github.com/NervJS/taro-benchmark/tree/next
 
-[5] 与其它新型小程序的对比：https://docs.taro.zone/taro/docs/difference-to-others.html
+[5] 与其它新型小程序的对比：https://docs.taro.zone/docs/difference-to-others
diff --git a/blog/2020-04-27-taro-build-jd.md b/blog/2020-04-27-taro-build-jd.md
index d6e39bd6d9e2..e054cc79a379 100644
--- a/blog/2020-04-27-taro-build-jd.md
+++ b/blog/2020-04-27-taro-build-jd.md
@@ -54,7 +54,7 @@ npm install -g @tarojs/cli
 taro init [projectName]
 ```
 
-3.进入项目根目录，使用 CLI 编译项目，根据 [Taro 文档](https://docs.taro.zone/taro/docs/README.html) 进行开发：
+3.进入项目根目录，使用 CLI 编译项目，根据 [Taro 文档](https://docs.taro.zone/docs/README) 进行开发：
 
 ```bash
 taro build --type jd [--watch]
diff --git a/blog/2020-04-27-taro-vs-jd.md b/blog/2020-04-27-taro-vs-jd.md
index e12674c6cb97..78150a42385c 100644
--- a/blog/2020-04-27-taro-vs-jd.md
+++ b/blog/2020-04-27-taro-vs-jd.md
@@ -182,7 +182,7 @@ Taro 完美支持 Typescript，自带代码智能提示和代码实时检查功
 
 > [Taro 官方网站](https://taro.jd.com)
 
-> [Taro 文档](https://docs.taro.zone/taro/docs/README.html)
+> [Taro 文档](https://docs.taro.zone/docs/README)
 
 > [Taro 论坛](https://taro-club.jd.com/)
 
diff --git a/blog/2020-05-26-taro-3-rc.md b/blog/2020-05-26-taro-3-rc.md
index 2a4ba880113e..0f860ca6326a 100644
--- a/blog/2020-05-26-taro-3-rc.md
+++ b/blog/2020-05-26-taro-3-rc.md
@@ -48,7 +48,7 @@ $ taro convert
 - 给已经渲染的 HTML 标签绑定事件
 - 在 HTML 解析和渲染都提供了钩子函数满足个性化渲染需求
 
-你可以访问文档[渲染 HTML](https://docs.taro.zone/taro/docs/html.html "渲染 HTML")了解更多信息。
+你可以访问文档[渲染 HTML](https://docs.taro.zone/docs/html "渲染 HTML")了解更多信息。
 
 ## CSS-in-JS
 
@@ -60,7 +60,7 @@ $ taro convert
 
 其中零运行时对于打包体积有要求的小程序尤为重要。
 
-你可以访问文档[使用 CSS-in-JS](https://docs.taro.zone/taro/docs/css-in-js.html "使用 CSS-in-JS")了解更多信息。
+你可以访问文档[使用 CSS-in-JS](https://docs.taro.zone/docs/css-in-js "使用 CSS-in-JS")了解更多信息。
 
 ## 虚拟列表（VirtualList）
 
@@ -80,7 +80,7 @@ $ taro convert
 import VirtualList from '@tarojs/components/virtual-list'
 ```
 
-你可以访问文档[长列表渲染](https://docs.taro.zone/taro/docs/virtual-list.html "长列表渲染")了解更多信息。
+你可以访问文档[长列表渲染](https://docs.taro.zone/docs/virtual-list "长列表渲染")了解更多信息。
 
 ## 插件功能
 
diff --git a/blog/2020-07-01-taro-3-0-0.md b/blog/2020-07-01-taro-3-0-0.md
index f8ca0dc6f09b..43c95d378940 100644
--- a/blog/2020-07-01-taro-3-0-0.md
+++ b/blog/2020-07-01-taro-3-0-0.md
@@ -24,7 +24,7 @@ description: 今天我们很高兴地在党的生日发布 Taro 3（Taro Next）
 
 在 Taro 3 中我们内置了 React、Nerv、Vue 2、Vue 3 四种框架的支持，开发者可以通过 `taro init` 命令创建对应的模板，并编写与框架本身生命周期、调用方法合乎一致的代码（idiomatic code），在语法上也没有任何的限制。
 
-在四类框架之外，Taro 3 还提供 [jQuery-like API](https://docs.taro.zone/taro/docs/jquery-like) 的支持，作为现代开发框架的补充和实现跨框架组件的方案。
+在四类框架之外，Taro 3 还提供 [jQuery-like API](https://docs.taro.zone/docs/jquery-like) 的支持，作为现代开发框架的补充和实现跨框架组件的方案。
 
 ## 跨端：H5、微信、支付宝、百度、字节跳动...小程序
 
@@ -66,7 +66,7 @@ $ taro convert
 * 给已经渲染的 HTML 标签绑定事件
 * 在 HTML 解析和渲染都提供了钩子函数满足个性化渲染需求
 
-你可以访问文档[渲染 HTML](https://docs.taro.zone/taro/docs/html)了解更多信息。
+你可以访问文档[渲染 HTML](https://docs.taro.zone/docs/html)了解更多信息。
 
 ## CSS-In-JS
 在 React 社区有一个著名的 CSS-in-JS 解决方案: [styled-components](https://github.com/styled-components/styled-components)。但遗憾的是，`styled-components` 使用 `<style>` 标签来动态地控制样式，在小程序端没有类似的方案。但在 Taro 中我们可以通过 [linaria](https://github.com/callstack/linaria) 实现同样的功能，`linaria` 主要提供以下特性：
@@ -77,7 +77,7 @@ $ taro convert
 
 其中零运行时对于打包体积有要求的小程序尤为重要。
 
-你可以访问文档[使用 CSS-in-JS](https://docs.taro.zone/taro/docs/css-in-js)了解更多信息。
+你可以访问文档[使用 CSS-in-JS](https://docs.taro.zone/docs/css-in-js)了解更多信息。
 
 ## 虚拟列表（VirtualList）
 当我们渲染数据量非常大的列表时，框架会根据数据尝试全量渲染视图，这就可能会产生性能问题导致视图无法响应操作一段时间。为了解决这个问题，我们可以采用另一种方式：比起全量渲染数据生成的视图，可以只渲染 **当前可视区域(visable viewport)** 的视图，非可视区域的视图在用户滚动到可视区域再渲染：
@@ -98,7 +98,7 @@ $ taro convert
 import VirtualList from '@tarojs/components/virtual-list'
 ```
 
-你可以访问文档[长列表渲染](https://docs.taro.zone/taro/docs/virtual-list.html)了解更多信息。
+你可以访问文档[长列表渲染](https://docs.taro.zone/docs/virtual-list)了解更多信息。
 
 ## 预渲染
 
@@ -106,7 +106,7 @@ import VirtualList from '@tarojs/components/virtual-list'
 
 为了解决这个问题，Taro 从服务端渲染受到启发，在 Taro CLI 将页面初始化的状态直接渲染为无状态的 wxml，在框架和业务逻辑运行之前执行渲染流程。我们将这一技术称之为预渲染（Prerender），经过 Prerender 的页面初始渲染速度通常会和原生小程序一致甚至更快。
 
-你可以访问文档[预渲染](https://docs.taro.zone/taro/docs/prerender)了解更多信息。
+你可以访问文档[预渲染](https://docs.taro.zone/docs/prerender)了解更多信息。
 
 ## 更快的构建速度和 source-map 支持
 
diff --git a/blog/2020-4-13-taro-components.md b/blog/2020-4-13-taro-components.md
index 041f5a62ecad..5d55e3ae935c 100644
--- a/blog/2020-4-13-taro-components.md
+++ b/blog/2020-4-13-taro-components.md
@@ -10,7 +10,7 @@ author_image_url: https://storage.jd.com/cjj-pub-images/11807297.png
 
 [Taro](https://github.com/NervJS/taro) 是一款多端开发框架。开发者只需编写一份代码，即可生成各小程序端、H5 以及 React Native 的应用。
 
-> [Taro Next](https://docs.taro.zone/taro/docs/README.html) 近期已发布 beta 版本，全面完善对小程序以及 H5 的支持，欢迎体验！
+> [Taro Next](https://docs.taro.zone/docs/README) 近期已发布 beta 版本，全面完善对小程序以及 H5 的支持，欢迎体验！
 
 本文将重点介绍对 **Taro H5 端组件库**的改造工作。
 
diff --git a/docs/README.md b/docs/README.md
index 322cb572d7c9..388748504f0b 100644
--- a/docs/README.md
+++ b/docs/README.md
@@ -16,7 +16,7 @@ title: Taro 介绍
 
 ## 学习资源
 
-[【教程】5 分钟上手 Taro 开发](https://docs.taro.zone/taro/docs/guide)
+[【教程】5 分钟上手 Taro 开发](https://docs.taro.zone/docs/guide)
 
 [【视频】5分钟快速上手 Taro 开发小程序](https://mp.weixin.qq.com/s?__biz=MzU3NDkzMTI3MA==&mid=2247484205&idx=1&sn=935bb7a35c11c33563eeb7c3aaca3321&chksm=fd2bab04ca5c2212b4cd8aeb5858bd08517aeb31e20727b22d1eee00b394184e7e61359e7dd9&token=1180618535&lang=zh_CN#rd)
 
diff --git a/docs/taro-quickapp-manifest.md b/docs/taro-quickapp-manifest.md
index 3fe58bf38a34..651b58e7df8d 100644
--- a/docs/taro-quickapp-manifest.md
+++ b/docs/taro-quickapp-manifest.md
@@ -40,7 +40,7 @@
 
 - pages **VS** router.pages
 
-微信的pages只是一个路径字符串数组，没有额外的信息，而快应用的pages有很多细腻的属性，比如filter属性，声明该属性之后，页面中可以使用$page获取打开页面的参数，还有launchMode可以指定启动模式，Taro为了兼容这一差异，使用customPageConfig属性进行适配，参考https://docs.taro.zone/taro/docs/quick-app.html。
+微信的pages只是一个路径字符串数组，没有额外的信息，而快应用的pages有很多细腻的属性，比如filter属性，声明该属性之后，页面中可以使用$page获取打开页面的参数，还有launchMode可以指定启动模式，Taro为了兼容这一差异，使用customPageConfig属性进行适配，参考 https://docs.taro.zone/docs/quick-app 。
 
 - window **VS** display
 
diff --git a/versioned_docs/version-1.x/GETTING-STARTED.md b/versioned_docs/version-1.x/GETTING-STARTED.md
index 6307c253c106..11cf33c9d267 100644
--- a/versioned_docs/version-1.x/GETTING-STARTED.md
+++ b/versioned_docs/version-1.x/GETTING-STARTED.md
@@ -188,7 +188,7 @@ $ npx taro build --type quickapp
 
 [快应用开发者工具如何使用？点击了解](https://doc.quickapp.cn/tutorial/ide/overview.html)
 
-[快应用端开发流程](https://docs.taro.zone/taro/docs/quick-app.html)
+[快应用端开发流程](https://docs.taro.zone/docs/quick-app)
 
 ### H5
 
diff --git a/versioned_docs/version-1.x/migration.md b/versioned_docs/version-1.x/migration.md
index 23c4e9c02f61..81f08bbae4ac 100644
--- a/versioned_docs/version-1.x/migration.md
+++ b/versioned_docs/version-1.x/migration.md
@@ -257,7 +257,7 @@ function C () {
 }
 ```
 
-旧版本文档所提到的[最佳实践](https://docs.taro.zone/taro/docs/1.3.45/best-practice.html)也不必再遵循。也就是说，即便你不给组件设置 `defaultProps`，自定义事件名不以 `on` 开头（还有其它的旧版本代码风格最佳实践），你的代码也能运行。但值得注意的是，遵循这样的 **代码风格最佳实践** 可以让你的代码更健壮，你的应用也会因此而收益。而对于另外的一些由于旧版本 Taro 执行机制的 hack（例如 render 调用两次，state 和 props 无法重名，不要打印组件），这类最佳实践可以不必理会。
+旧版本文档所提到的[最佳实践](/best-practice.md)也不必再遵循。也就是说，即便你不给组件设置 `defaultProps`，自定义事件名不以 `on` 开头（还有其它的旧版本代码风格最佳实践），你的代码也能运行。但值得注意的是，遵循这样的 **代码风格最佳实践** 可以让你的代码更健壮，你的应用也会因此而收益。而对于另外的一些由于旧版本 Taro 执行机制的 hack（例如 render 调用两次，state 和 props 无法重名，不要打印组件），这类最佳实践可以不必理会。
 
 ## Ref & DOM
 
diff --git a/versioned_docs/version-1.x/taro-quickapp-manifest.md b/versioned_docs/version-1.x/taro-quickapp-manifest.md
index 3fe58bf38a34..651b58e7df8d 100644
--- a/versioned_docs/version-1.x/taro-quickapp-manifest.md
+++ b/versioned_docs/version-1.x/taro-quickapp-manifest.md
@@ -40,7 +40,7 @@
 
 - pages **VS** router.pages
 
-微信的pages只是一个路径字符串数组，没有额外的信息，而快应用的pages有很多细腻的属性，比如filter属性，声明该属性之后，页面中可以使用$page获取打开页面的参数，还有launchMode可以指定启动模式，Taro为了兼容这一差异，使用customPageConfig属性进行适配，参考https://docs.taro.zone/taro/docs/quick-app.html。
+微信的pages只是一个路径字符串数组，没有额外的信息，而快应用的pages有很多细腻的属性，比如filter属性，声明该属性之后，页面中可以使用$page获取打开页面的参数，还有launchMode可以指定启动模式，Taro为了兼容这一差异，使用customPageConfig属性进行适配，参考 https://docs.taro.zone/docs/quick-app 。
 
 - window **VS** display
 
diff --git a/versioned_docs/version-2.x/GETTING-STARTED.md b/versioned_docs/version-2.x/GETTING-STARTED.md
index ce54f4248d97..183ee55cba08 100644
--- a/versioned_docs/version-2.x/GETTING-STARTED.md
+++ b/versioned_docs/version-2.x/GETTING-STARTED.md
@@ -217,7 +217,7 @@ $ npx taro build --type quickapp
 
 [快应用开发者工具如何使用？点击了解](https://doc.quickapp.cn/tutorial/ide/overview.html)
 
-[快应用端开发流程](https://docs.taro.zone/taro/docs/quick-app.html)
+[快应用端开发流程](https://docs.taro.zone/docs/quick-app)
 
 ### H5
 
diff --git a/versioned_docs/version-2.x/taro-quickapp-manifest.md b/versioned_docs/version-2.x/taro-quickapp-manifest.md
index 3fe58bf38a34..352b724da935 100644
--- a/versioned_docs/version-2.x/taro-quickapp-manifest.md
+++ b/versioned_docs/version-2.x/taro-quickapp-manifest.md
@@ -40,7 +40,7 @@
 
 - pages **VS** router.pages
 
-微信的pages只是一个路径字符串数组，没有额外的信息，而快应用的pages有很多细腻的属性，比如filter属性，声明该属性之后，页面中可以使用$page获取打开页面的参数，还有launchMode可以指定启动模式，Taro为了兼容这一差异，使用customPageConfig属性进行适配，参考https://docs.taro.zone/taro/docs/quick-app.html。
+微信的pages只是一个路径字符串数组，没有额外的信息，而快应用的pages有很多细腻的属性，比如filter属性，声明该属性之后，页面中可以使用$page获取打开页面的参数，还有launchMode可以指定启动模式，Taro为了兼容这一差异，使用customPageConfig属性进行适配，参考 https://docs.taro.zone/docs/quick-app。
 
 - window **VS** display
 
diff --git a/versioned_docs/version-3.x/README.md b/versioned_docs/version-3.x/README.md
index 322cb572d7c9..388748504f0b 100644
--- a/versioned_docs/version-3.x/README.md
+++ b/versioned_docs/version-3.x/README.md
@@ -16,7 +16,7 @@ title: Taro 介绍
 
 ## 学习资源
 
-[【教程】5 分钟上手 Taro 开发](https://docs.taro.zone/taro/docs/guide)
+[【教程】5 分钟上手 Taro 开发](https://docs.taro.zone/docs/guide)
 
 [【视频】5分钟快速上手 Taro 开发小程序](https://mp.weixin.qq.com/s?__biz=MzU3NDkzMTI3MA==&mid=2247484205&idx=1&sn=935bb7a35c11c33563eeb7c3aaca3321&chksm=fd2bab04ca5c2212b4cd8aeb5858bd08517aeb31e20727b22d1eee00b394184e7e61359e7dd9&token=1180618535&lang=zh_CN#rd)
 
diff --git a/versioned_docs/version-3.x/taro-quickapp-manifest.md b/versioned_docs/version-3.x/taro-quickapp-manifest.md
index 3fe58bf38a34..651b58e7df8d 100644
--- a/versioned_docs/version-3.x/taro-quickapp-manifest.md
+++ b/versioned_docs/version-3.x/taro-quickapp-manifest.md
@@ -40,7 +40,7 @@
 
 - pages **VS** router.pages
 
-微信的pages只是一个路径字符串数组，没有额外的信息，而快应用的pages有很多细腻的属性，比如filter属性，声明该属性之后，页面中可以使用$page获取打开页面的参数，还有launchMode可以指定启动模式，Taro为了兼容这一差异，使用customPageConfig属性进行适配，参考https://docs.taro.zone/taro/docs/quick-app.html。
+微信的pages只是一个路径字符串数组，没有额外的信息，而快应用的pages有很多细腻的属性，比如filter属性，声明该属性之后，页面中可以使用$page获取打开页面的参数，还有launchMode可以指定启动模式，Taro为了兼容这一差异，使用customPageConfig属性进行适配，参考 https://docs.taro.zone/docs/quick-app 。
 
 - window **VS** display
 

From e457653695a70e2868f3b183cb81304a249956b9 Mon Sep 17 00:00:00 2001
From: honlyHuang <huangliyn@gmail.com>
Date: Wed, 25 Nov 2020 11:12:02 +0800
Subject: [PATCH 4/9] =?UTF-8?q?docs(feat):=20=E6=B7=BB=E5=8A=A0=E7=9B=B8?=
 =?UTF-8?q?=E5=85=B3=E9=93=BE=E6=8E=A5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 docs/css-modules.md   | 4 ++++
 docs/vue3.md          | 5 +++++
 src/pages/showcase.js | 1 +
 3 files changed, 10 insertions(+)

diff --git a/docs/css-modules.md b/docs/css-modules.md
index 7d550484bb36..5768e96f0b51 100644
--- a/docs/css-modules.md
+++ b/docs/css-modules.md
@@ -93,3 +93,7 @@ export default class Test extends Component {
   }
 }
 ```
+
+## 相关阅读
+
+[开源插件 weapp-css-modules - 极致追求，让小程序代码包立减 10% 的插件](https://taro-club.jd.com/topic/2264/%E6%9E%81%E8%87%B4%E8%BF%BD%E6%B1%82-%E8%AE%A9%E5%B0%8F%E7%A8%8B%E5%BA%8F%E4%BB%A3%E7%A0%81%E5%8C%85%E7%AB%8B%E5%87%8F-10-%E7%9A%84%E6%8F%92%E4%BB%B6-weapp-css-modules)
\ No newline at end of file
diff --git a/docs/vue3.md b/docs/vue3.md
index 9a029b48ddad..174965306c09 100644
--- a/docs/vue3.md
+++ b/docs/vue3.md
@@ -63,3 +63,8 @@ export default {
 * 小程序端非类似 HTML 表单标签规范的表单组件，如 Picker，暂不兼容 v-model。Vue3 的 v-model 绑定属性改为了 modelValue，事件绑定改为了 update:modelValue。对于 HTML 表单标签会自动对接表单的值与事件，例如 input 会自动对应 modelValue 与 value、update:modelValue 与 @input。但对于 Picker 这种小程序特有表单则无法对应，建议这种情况不使用 v-model。
 * VirtualList 组件需要实现一份 Vue3 版本（待实现）
 * 所有组件的 `id` 必须在整个应用中保持唯一（即使他们在不同的页面），否则可能导致事件不触发的问题，[#7317](https://github.com/NervJS/taro/issues/7317)
+
+
+## 相关阅读
+
+[使用 Vue3 开发小程序](https://taro-club.jd.com/topic/2267/%E4%BD%BF%E7%94%A8-vue3-%E5%BC%80%E5%8F%91%E5%B0%8F%E7%A8%8B%E5%BA%8F) by lillian
\ No newline at end of file
diff --git a/src/pages/showcase.js b/src/pages/showcase.js
index 5ed2867a9098..258fba5f5794 100644
--- a/src/pages/showcase.js
+++ b/src/pages/showcase.js
@@ -33,6 +33,7 @@ function Showcase() {
       permalink="/showcase"
       description="Taro 案例页，微信小程序、H5、支付宝小程序、百度小程序、移动端应用、QQ小程序、字节跳动小程序、京东小程序, 如果你也使用 Taro，提交你的案例让我们知道你，以便更好地为你服务，同时也让更多的人了解 Taro 的能力">
       <div className="container margin-vert--xl">
+        <p className="tip">如果你想要找的是开源的可参考代码案例，点击 <a href="https://nervjs.github.io/taro/docs/composition">Taro 资源合集</a></p>
         <p className="tip">提交案例，只需二维码和简单的信息，既展示你的作品，也给使用 Taro 的小伙伴信心，给 Taro 贡献者以鼓励，<a href="https://github.com/NervJS/taro-user-cases/edit/master/index.js">点击提交案例</a></p>
         <div className="app" id="app"></div>
       </div>

From a1fdfe2c9975133fd94e10abdd59be3fd58442a3 Mon Sep 17 00:00:00 2001
From: honlyHuang <huangliyn@gmail.com>
Date: Wed, 25 Nov 2020 20:09:41 +0800
Subject: [PATCH 5/9] =?UTF-8?q?docs(fix):=20=E8=AF=AD=E6=B3=95=E9=AB=98?=
 =?UTF-8?q?=E4=BA=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 docs/react.md |  14 +-
 docs/size.md  |  62 +++++++-
 docs/vue.md   |   8 +-
 docs/vue3.md  |   3 +-
 package.json  |  22 ++-
 yarn.lock     | 393 +++++++++++++++++++++++++++-----------------------
 6 files changed, 287 insertions(+), 215 deletions(-)

diff --git a/docs/react.md b/docs/react.md
index 148845894022..5439f718f004 100644
--- a/docs/react.md
+++ b/docs/react.md
@@ -8,7 +8,7 @@ title: React
 
 每一个 Taro 应用都需要一个入口组件用来注册应用，入口文件默认是 `src` 目录下的 `app.js`，在 Taro 中使用 React，入口组件必须导出一个 React 组件，在入口组件中我们可以设置全局状态或访问小程序入口实例的生命周期：
 
-```jsx
+```jsx title="app.js"
 import React, { Component } from 'react'
 // 假设我们要使用 Redux
 import { Provider } from 'react-redux'
@@ -46,8 +46,7 @@ export default App
 
 对于一个入口文件(例如`app.jsx`)而言，我们可以新增一个 `app.config.js` 的文件进行全局配置，`app.config.js` 的默认导出就是全局配置，配置规范基于微信小程序的[全局配置](https://developers.weixin.qq.com/miniprogram/dev/framework/config.html#%E5%85%A8%E5%B1%80%E9%85%8D%E7%BD%AE)进行制定，所有平台进行统一:
 
-```js
-// app.config.js
+```js  title="app.config.js"
 export default {
   pages: [
     'pages/index/index'
@@ -190,8 +189,7 @@ export default Index
 ### 配置文件
 和入口组件一样，对于一个页面文件(例如`./pages/index/index.jsx`)而言，我们可以新增一个 `./pages/index/index.config.js` 的文件进行页面配置，`index.config.js` 的默认导出就是[页面配置](https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/app.html):
 
-```js
-// ./pages/index/index.jsx
+```js title="./pages/index/index.jsx"
 export default {
   navigationBarTitleText: '首页'
 }
@@ -325,8 +323,7 @@ Object 参数说明：
 
 示例代码
 
-```jsx
-// page.js
+```jsx title="page.js"
 export default class Index extends Component {
   onShareAppMessage (res) {
     if (res.from === 'button') {
@@ -417,8 +414,7 @@ onAddToFavorites(res) {
 | query | 自定义页面路径中携带的参数 | 当前页面路径携带的参数 |
 | imageUrl | 自定义图片路径，可以是本地文件或者网络图片。支持 PNG 及 JPG，显示图片长宽比是 1:1。 | 默认使用小程序 Logo |
 
-```jsx
-// page.js
+```jsx title="page.js"
 class Index extends Component {
   onShareTimeline () {
     console.log('onShareTimeline')
diff --git a/docs/size.md b/docs/size.md
index 91e167157728..79d97d12d89a 100644
--- a/docs/size.md
+++ b/docs/size.md
@@ -30,7 +30,7 @@ const DEVICE_RATIO = {
 建议使用 Taro 时，设计稿以 iPhone 6 `750px` 作为设计尺寸标准。
 
 如果你的设计稿是 `375` ，不在以上三种之中，那么你需要把 `designWidth` 配置为 `375`，同时在 `DEVICE_RATIO` 中添加换算规则如下：
-```jsx
+```jsx {5}
 const DEVICE_RATIO = {
   '640': 2.34 / 2,
   '750': 1,
@@ -139,9 +139,9 @@ REM 单位允许的小数位。
 }
 ```
 
-## 忽略
+## CSS 编译时忽略（过滤）
 
-### 属性
+### 忽略单个属性
 
 当前忽略单个属性的最简单的方法，就是 px 单位使用大写字母。
 
@@ -158,6 +158,58 @@ REM 单位允许的小数位。
 }
 ```
 
-### 文件
+### 忽略样式文件
+
+对于头部包含注释 `/*postcss-pxtransform disable*/` 的文件，插件不予处理。
+
+### 忽略样式举例
+
+样式文件里多行文本省略时我们一般如下面的代码：
+
+```css {3}
+.textHide {
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp:2;
+  text-overflow: ellipsis;
+  overflow: hidden;
+}
+```
+
+但 Taro 编译后少了 `-webkit-box-orient: vertical;` 这条样式属性，此时我们需要忽略掉这条样式
+
+#### 忽略样式方法 1 加入 CSS 注释强制声明忽略下一行
+
+```css {1}
+/* autoprefixer: ignore next */
+-webkit-box-orient: vertical;
+```
+
+#### 忽略样式方法 2 加入 CSS 注释强制声明注释中间多行
+
+```css {1,3}
+/* autoprefixer: off */
+-webkit-box-orient: vertical;
+/* autoprefixer: on */
+```
+
+#### 忽略样式方法 3 写成行内样式
+
+```HTML {2-9}
+<View 
+  style={{
+    display: '-webkit-box',
+    '-webkit-box-orient': 'vertical',
+    '-webkit-line-clamp': 2,
+    'text-overflow': 'ellipsis',
+    overflow: 'hidden',
+    'line-height': 2
+  }}
+>
+  这是要省略的内容这是要省略的内容这是要省略的内容
+</View>
+```
+
+### 相关链接
 
-对于头部包含注释 `/*postcss-pxtransform disable*/` 的文件，插件不予处理。
\ No newline at end of file
+- [Taro多行文本省略不生效](https://taro-club.jd.com/topic/2270/taro%E5%A4%9A%E8%A1%8C%E6%96%87%E6%9C%AC%E7%9C%81%E7%95%A5%E4%B8%8D%E7%94%9F%E6%95%88)
\ No newline at end of file
diff --git a/docs/vue.md b/docs/vue.md
index 522b4442a4a2..1019ef6f14fd 100644
--- a/docs/vue.md
+++ b/docs/vue.md
@@ -9,7 +9,7 @@ title: Vue
 每一个 Taro 应用都需要一个入口组件用来注册应用，入口文件默认是 `src` 目录下的 `app.js`。
 在 Taro 中使用 Vue，入口组件必须导出一个 Vue 组件，在入口组件中我们可以设置全局状态或访问小程序入口实例的生命周期：
 
-```jsx
+```jsx title="src/app.js"
 import Vue from 'vue'
 // 假设我们已经在 './store' 配置好了 vuex
 import store from './store'
@@ -29,8 +29,7 @@ export default App
 
 对于一个入口文件(例如`app.js`)而言，我们可以新增一个 `app.config.js` 的文件进行全局配置，`app.config.js` 的默认导出就是小程序的[全局配置](https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/app.html):
 
-```js
-// app.config.js
+```js title="app.config.js"
 export default {
   pages: [
     'pages/index/index'
@@ -439,8 +438,7 @@ onAddToFavorites(res) {
 以上成员方法在 Taro 的页面中同样可以使用，书写同名方法即可，不过需要注意的，目前暂时只有小程序端支持（支持程度如上）这些方法，编译到 H5/RN 端后这些方法均会失效。
 
 
-```js
-// ./pages/index/index.jsx
+```js title="./pages/index/index.jsx"
 export default {
   navigationBarTitleText: '首页'
 }
diff --git a/docs/vue3.md b/docs/vue3.md
index 174965306c09..9ba5513e421e 100644
--- a/docs/vue3.md
+++ b/docs/vue3.md
@@ -14,8 +14,7 @@ Taro 是如何兼容 Vue3 的，可参阅 [Taro RFC](https://github.com/NervJS/t
 
 由于 Vue3 Global API 有变化（[0009-global-api-change](https://github.com/vuejs/rfcs/blob/master/active-rfcs/0009-global-api-change.md)），Vue3 的入口组件写法将会变成：
 
-```js
-// app.js
+```js title="src/app.js"
 import { createApp } from 'vue'
 
 const app = createApp({
diff --git a/package.json b/package.json
index 32dc3f62de70..e5b2ae44c737 100644
--- a/package.json
+++ b/package.json
@@ -12,21 +12,19 @@
     "serve": "docusaurus serve"
   },
   "dependencies": {
-    "@docusaurus/core": "2.0.0-alpha.68",
-    "@docusaurus/plugin-client-redirects": "2.0.0-alpha.68",
-    "@docusaurus/plugin-ideal-image": "2.0.0-alpha.68",
-    "@docusaurus/plugin-pwa": "2.0.0-alpha.68",
-    "@docusaurus/preset-classic": "2.0.0-alpha.68",
-    "@docusaurus/theme-live-codeblock": "2.0.0-alpha.68",
-    "@docusaurus/remark-plugin-npm2yarn": "2.0.0-alpha.68",
-    "@mdx-js/react": "^1.5.8",
+    "@docusaurus/core": "2.0.0-alpha.69",
+    "@docusaurus/plugin-client-redirects": "2.0.0-alpha.69",
+    "@docusaurus/plugin-ideal-image": "2.0.0-alpha.69",
+    "@docusaurus/plugin-pwa": "2.0.0-alpha.69",
+    "@docusaurus/preset-classic": "2.0.0-alpha.69",
+    "@docusaurus/theme-live-codeblock": "2.0.0-alpha.69",
+    "@docusaurus/remark-plugin-npm2yarn": "2.0.0-alpha.69",
     "clsx": "^1.1.1",
-    "classnames": "^2.2.6",
-    "prism-react-renderer": "^1.1.0",
+    "color": "^3.1.2",
+    "npm-to-yarn": "^1.0.0-2",
     "react": "^16.13.1",
     "react-dom": "^16.13.1",
-    "workbox-routing": "^5.0.0",
-    "workbox-strategies": "^5.0.0"
+    "workbox-routing": "^5.0.0"
   },
   "browserslist": {
     "production": [
diff --git a/yarn.lock b/yarn.lock
index 5d40cf9d0824..a9c4def230a1 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1793,10 +1793,10 @@
     "@francoischalifour/autocomplete-preset-algolia" "^1.0.0-alpha.28"
     algoliasearch "^4.0.0"
 
-"@docusaurus/core@2.0.0-alpha.68":
-  version "2.0.0-alpha.68"
-  resolved "https://registry.npm.taobao.org/@docusaurus/core/download/@docusaurus/core-2.0.0-alpha.68.tgz#7773c43dfd5b92ee97e3221b0062ba17197bff88"
-  integrity sha1-d3PEPf1bku6X4yIbAGK6Fxl7/4g=
+"@docusaurus/core@2.0.0-alpha.69":
+  version "2.0.0-alpha.69"
+  resolved "https://registry.npm.taobao.org/@docusaurus/core/download/@docusaurus/core-2.0.0-alpha.69.tgz#1452b9b2f2c5f67f75a45275e7eb5943c1f43a24"
+  integrity sha1-FFK5svLF9n91pFJ15+tZQ8H0OiQ=
   dependencies:
     "@babel/core" "^7.12.3"
     "@babel/plugin-proposal-nullish-coalescing-operator" "^7.12.1"
@@ -1808,10 +1808,10 @@
     "@babel/preset-typescript" "^7.12.1"
     "@babel/runtime" "^7.12.5"
     "@babel/runtime-corejs3" "^7.12.5"
-    "@docusaurus/cssnano-preset" "2.0.0-alpha.68"
-    "@docusaurus/types" "2.0.0-alpha.68"
-    "@docusaurus/utils" "2.0.0-alpha.68"
-    "@docusaurus/utils-validation" "2.0.0-alpha.68"
+    "@docusaurus/cssnano-preset" "2.0.0-alpha.69"
+    "@docusaurus/types" "2.0.0-alpha.69"
+    "@docusaurus/utils" "2.0.0-alpha.69"
+    "@docusaurus/utils-validation" "2.0.0-alpha.69"
     "@endiliey/static-site-generator-webpack-plugin" "^4.0.0"
     "@svgr/webpack" "^5.4.0"
     babel-loader "^8.2.1"
@@ -1830,7 +1830,7 @@
     eta "^1.11.0"
     express "^4.17.1"
     file-loader "^6.2.0"
-    fs-extra "^8.1.0"
+    fs-extra "^9.0.1"
     globby "^10.0.1"
     html-minifier-terser "^5.1.1"
     html-tags "^3.1.0"
@@ -1858,7 +1858,7 @@
     react-loadable-ssr-addon "^0.3.0"
     react-router "^5.2.0"
     react-router-config "^5.1.1"
-    react-router-dom "^5.1.2"
+    react-router-dom "^5.2.0"
     resolve-pathname "^3.0.0"
     semver "^6.3.0"
     serve-handler "^6.1.3"
@@ -1874,20 +1874,20 @@
     webpack-merge "^4.2.2"
     webpackbar "^4.0.0"
 
-"@docusaurus/cssnano-preset@2.0.0-alpha.68":
-  version "2.0.0-alpha.68"
-  resolved "https://registry.npm.taobao.org/@docusaurus/cssnano-preset/download/@docusaurus/cssnano-preset-2.0.0-alpha.68.tgz#8b31e25eb15c24f93598e731c90d45422aba69a9"
-  integrity sha1-izHiXrFcJPk1mOcxyQ1FQiq6aak=
+"@docusaurus/cssnano-preset@2.0.0-alpha.69":
+  version "2.0.0-alpha.69"
+  resolved "https://registry.npm.taobao.org/@docusaurus/cssnano-preset/download/@docusaurus/cssnano-preset-2.0.0-alpha.69.tgz#19bc826850c9107c7bae507589284ac6f66b8485"
+  integrity sha1-GbyCaFDJEHx7rlB1iShKxvZrhIU=
   dependencies:
     cssnano-preset-advanced "^4.0.7"
     postcss "^7.0.2"
     postcss-combine-duplicated-selectors "^9.1.0"
     postcss-sort-media-queries "^1.7.26"
 
-"@docusaurus/lqip-loader@2.0.0-alpha.68":
-  version "2.0.0-alpha.68"
-  resolved "https://registry.npm.taobao.org/@docusaurus/lqip-loader/download/@docusaurus/lqip-loader-2.0.0-alpha.68.tgz#02aee29394ef35d846b27af482e326e1a8178399"
-  integrity sha1-Aq7ik5TvNdhGsnr0guMm4agXg5k=
+"@docusaurus/lqip-loader@2.0.0-alpha.69":
+  version "2.0.0-alpha.69"
+  resolved "https://registry.npm.taobao.org/@docusaurus/lqip-loader/download/@docusaurus/lqip-loader-2.0.0-alpha.69.tgz#1ac69dcd0ce7be1e3e6d99e066e39b8373b58f61"
+  integrity sha1-GsadzQznvh4+bZngZuObg3O1j2E=
   dependencies:
     file-loader "^6.2.0"
     loader-utils "^1.2.3"
@@ -1895,20 +1895,20 @@
     node-vibrant "^3.1.5"
     sharp "^0.25.2"
 
-"@docusaurus/mdx-loader@2.0.0-alpha.68":
-  version "2.0.0-alpha.68"
-  resolved "https://registry.npm.taobao.org/@docusaurus/mdx-loader/download/@docusaurus/mdx-loader-2.0.0-alpha.68.tgz#dc80624d325bb62150f9b1f73151c8fda85117f7"
-  integrity sha1-3IBiTTJbtiFQ+bH3MVHI/ahRF/c=
+"@docusaurus/mdx-loader@2.0.0-alpha.69":
+  version "2.0.0-alpha.69"
+  resolved "https://registry.npm.taobao.org/@docusaurus/mdx-loader/download/@docusaurus/mdx-loader-2.0.0-alpha.69.tgz#cf882670d2cb05902197776bba471d04696ceae9"
+  integrity sha1-z4gmcNLLBZAhl3drukcdBGls6uk=
   dependencies:
     "@babel/parser" "^7.12.5"
     "@babel/traverse" "^7.12.5"
-    "@docusaurus/core" "2.0.0-alpha.68"
-    "@docusaurus/utils" "2.0.0-alpha.68"
+    "@docusaurus/core" "2.0.0-alpha.69"
+    "@docusaurus/utils" "2.0.0-alpha.69"
     "@mdx-js/mdx" "^1.6.21"
     "@mdx-js/react" "^1.6.21"
     escape-html "^1.0.3"
     file-loader "^6.2.0"
-    fs-extra "^8.1.0"
+    fs-extra "^9.0.1"
     github-slugger "^1.3.0"
     gray-matter "^4.0.2"
     loader-utils "^2.0.0"
@@ -1919,35 +1919,35 @@
     url-loader "^4.1.1"
     webpack "^4.44.1"
 
-"@docusaurus/plugin-client-redirects@2.0.0-alpha.68":
-  version "2.0.0-alpha.68"
-  resolved "https://registry.npm.taobao.org/@docusaurus/plugin-client-redirects/download/@docusaurus/plugin-client-redirects-2.0.0-alpha.68.tgz#037ee7a31c7e7c56427a003309f712e625c51be0"
-  integrity sha1-A37noxx+fFZCegAzCfcS5iXFG+A=
+"@docusaurus/plugin-client-redirects@2.0.0-alpha.69":
+  version "2.0.0-alpha.69"
+  resolved "https://registry.npm.taobao.org/@docusaurus/plugin-client-redirects/download/@docusaurus/plugin-client-redirects-2.0.0-alpha.69.tgz#a31c1f4b11d98b362803d8878dafb952d4a3508e"
+  integrity sha1-oxwfSxHZizYoA9iHja+5UtSjUI4=
   dependencies:
-    "@docusaurus/core" "2.0.0-alpha.68"
-    "@docusaurus/types" "2.0.0-alpha.68"
-    "@docusaurus/utils" "2.0.0-alpha.68"
-    "@docusaurus/utils-validation" "2.0.0-alpha.68"
+    "@docusaurus/core" "2.0.0-alpha.69"
+    "@docusaurus/types" "2.0.0-alpha.69"
+    "@docusaurus/utils" "2.0.0-alpha.69"
+    "@docusaurus/utils-validation" "2.0.0-alpha.69"
     chalk "^3.0.0"
     eta "^1.11.0"
-    fs-extra "^8.1.0"
+    fs-extra "^9.0.1"
     globby "^10.0.1"
     joi "^17.2.1"
     lodash "^4.17.20"
 
-"@docusaurus/plugin-content-blog@2.0.0-alpha.68":
-  version "2.0.0-alpha.68"
-  resolved "https://registry.npm.taobao.org/@docusaurus/plugin-content-blog/download/@docusaurus/plugin-content-blog-2.0.0-alpha.68.tgz#50216523d5f751c34d2448529af51d8f59d89c4a"
-  integrity sha1-UCFlI9X3UcNNJEhSmvUdj1nYnEo=
+"@docusaurus/plugin-content-blog@2.0.0-alpha.69":
+  version "2.0.0-alpha.69"
+  resolved "https://registry.npm.taobao.org/@docusaurus/plugin-content-blog/download/@docusaurus/plugin-content-blog-2.0.0-alpha.69.tgz#ba96b65c1d19452487330c860677ee20a5af5275"
+  integrity sha1-upa2XB0ZRSSHMwyGBnfuIKWvUnU=
   dependencies:
-    "@docusaurus/core" "2.0.0-alpha.68"
-    "@docusaurus/mdx-loader" "2.0.0-alpha.68"
-    "@docusaurus/types" "2.0.0-alpha.68"
-    "@docusaurus/utils" "2.0.0-alpha.68"
-    "@docusaurus/utils-validation" "2.0.0-alpha.68"
+    "@docusaurus/core" "2.0.0-alpha.69"
+    "@docusaurus/mdx-loader" "2.0.0-alpha.69"
+    "@docusaurus/types" "2.0.0-alpha.69"
+    "@docusaurus/utils" "2.0.0-alpha.69"
+    "@docusaurus/utils-validation" "2.0.0-alpha.69"
     chalk "^3.0.0"
     feed "^4.2.1"
-    fs-extra "^8.1.0"
+    fs-extra "^9.0.1"
     globby "^10.0.1"
     joi "^17.2.1"
     loader-utils "^1.2.3"
@@ -1956,19 +1956,19 @@
     remark-admonitions "^1.2.1"
     webpack "^4.44.1"
 
-"@docusaurus/plugin-content-docs@2.0.0-alpha.68":
-  version "2.0.0-alpha.68"
-  resolved "https://registry.npm.taobao.org/@docusaurus/plugin-content-docs/download/@docusaurus/plugin-content-docs-2.0.0-alpha.68.tgz#d37e58c098ed385d64b3e9bbb1476d864705fed3"
-  integrity sha1-035YwJjtOF1ks+m7sUdthkcF/tM=
+"@docusaurus/plugin-content-docs@2.0.0-alpha.69":
+  version "2.0.0-alpha.69"
+  resolved "https://registry.npm.taobao.org/@docusaurus/plugin-content-docs/download/@docusaurus/plugin-content-docs-2.0.0-alpha.69.tgz#5ef4d293765d02e11ffb2a201c491a34f92e2a83"
+  integrity sha1-XvTSk3ZdAuEf+yogHEkaNPkuKoM=
   dependencies:
-    "@docusaurus/core" "2.0.0-alpha.68"
-    "@docusaurus/mdx-loader" "2.0.0-alpha.68"
-    "@docusaurus/types" "2.0.0-alpha.68"
-    "@docusaurus/utils" "2.0.0-alpha.68"
-    "@docusaurus/utils-validation" "2.0.0-alpha.68"
+    "@docusaurus/core" "2.0.0-alpha.69"
+    "@docusaurus/mdx-loader" "2.0.0-alpha.69"
+    "@docusaurus/types" "2.0.0-alpha.69"
+    "@docusaurus/utils" "2.0.0-alpha.69"
+    "@docusaurus/utils-validation" "2.0.0-alpha.69"
     chalk "^3.0.0"
     execa "^3.4.0"
-    fs-extra "^8.1.0"
+    fs-extra "^9.0.1"
     globby "^10.0.1"
     import-fresh "^3.2.2"
     joi "^17.2.1"
@@ -1984,16 +1984,16 @@
     utility-types "^3.10.0"
     webpack "^4.44.1"
 
-"@docusaurus/plugin-content-pages@2.0.0-alpha.68":
-  version "2.0.0-alpha.68"
-  resolved "https://registry.npm.taobao.org/@docusaurus/plugin-content-pages/download/@docusaurus/plugin-content-pages-2.0.0-alpha.68.tgz#a72ef246a941e644a7e1fc48042bd14e2360e89d"
-  integrity sha1-py7yRqlB5kSn4fxIBCvRTiNg6J0=
+"@docusaurus/plugin-content-pages@2.0.0-alpha.69":
+  version "2.0.0-alpha.69"
+  resolved "https://registry.npm.taobao.org/@docusaurus/plugin-content-pages/download/@docusaurus/plugin-content-pages-2.0.0-alpha.69.tgz#215c52c7788b3794dc692ceb3d0a563adddc0435"
+  integrity sha1-IVxSx3iLN5TcaSzrPQpWOt3cBDU=
   dependencies:
-    "@docusaurus/core" "2.0.0-alpha.68"
-    "@docusaurus/mdx-loader" "2.0.0-alpha.68"
-    "@docusaurus/types" "2.0.0-alpha.68"
-    "@docusaurus/utils" "2.0.0-alpha.68"
-    "@docusaurus/utils-validation" "2.0.0-alpha.68"
+    "@docusaurus/core" "2.0.0-alpha.69"
+    "@docusaurus/mdx-loader" "2.0.0-alpha.69"
+    "@docusaurus/types" "2.0.0-alpha.69"
+    "@docusaurus/utils" "2.0.0-alpha.69"
+    "@docusaurus/utils-validation" "2.0.0-alpha.69"
     globby "^10.0.1"
     joi "^17.2.1"
     loader-utils "^1.2.3"
@@ -2002,53 +2002,53 @@
     slash "^3.0.0"
     webpack "^4.44.1"
 
-"@docusaurus/plugin-debug@2.0.0-alpha.68":
-  version "2.0.0-alpha.68"
-  resolved "https://registry.npm.taobao.org/@docusaurus/plugin-debug/download/@docusaurus/plugin-debug-2.0.0-alpha.68.tgz#c98dd79d020110b259135dc8f53c841ec1034f4e"
-  integrity sha1-yY3XnQIBELJZE13I9TyEHsEDT04=
+"@docusaurus/plugin-debug@2.0.0-alpha.69":
+  version "2.0.0-alpha.69"
+  resolved "https://registry.npm.taobao.org/@docusaurus/plugin-debug/download/@docusaurus/plugin-debug-2.0.0-alpha.69.tgz#643c3119d688ffa318eeb7d719942e1e24ad5a95"
+  integrity sha1-ZDwxGdaI/6MY7rfXGZQuHiStWpU=
   dependencies:
-    "@docusaurus/core" "2.0.0-alpha.68"
-    "@docusaurus/types" "2.0.0-alpha.68"
-    "@docusaurus/utils" "2.0.0-alpha.68"
+    "@docusaurus/core" "2.0.0-alpha.69"
+    "@docusaurus/types" "2.0.0-alpha.69"
+    "@docusaurus/utils" "2.0.0-alpha.69"
     react-json-view "^1.19.1"
 
-"@docusaurus/plugin-google-analytics@2.0.0-alpha.68":
-  version "2.0.0-alpha.68"
-  resolved "https://registry.npm.taobao.org/@docusaurus/plugin-google-analytics/download/@docusaurus/plugin-google-analytics-2.0.0-alpha.68.tgz#ec233219b5b19c9eaf9919dff07636ea9cdeb108"
-  integrity sha1-7CMyGbWxnJ6vmRnf8HY26pzesQg=
+"@docusaurus/plugin-google-analytics@2.0.0-alpha.69":
+  version "2.0.0-alpha.69"
+  resolved "https://registry.npm.taobao.org/@docusaurus/plugin-google-analytics/download/@docusaurus/plugin-google-analytics-2.0.0-alpha.69.tgz#031e0e4431842b1c9ba99fb6dd6dd258ee91f05e"
+  integrity sha1-Ax4ORDGEKxybqZ+23W3SWO6R8F4=
   dependencies:
-    "@docusaurus/core" "2.0.0-alpha.68"
+    "@docusaurus/core" "2.0.0-alpha.69"
 
-"@docusaurus/plugin-google-gtag@2.0.0-alpha.68":
-  version "2.0.0-alpha.68"
-  resolved "https://registry.npm.taobao.org/@docusaurus/plugin-google-gtag/download/@docusaurus/plugin-google-gtag-2.0.0-alpha.68.tgz#66675f58082a605568c0f0eee8fa9d66d0430734"
-  integrity sha1-ZmdfWAgqYFVowPDu6PqdZtBDBzQ=
+"@docusaurus/plugin-google-gtag@2.0.0-alpha.69":
+  version "2.0.0-alpha.69"
+  resolved "https://registry.npm.taobao.org/@docusaurus/plugin-google-gtag/download/@docusaurus/plugin-google-gtag-2.0.0-alpha.69.tgz#b6d9c77e99f60dbffe2622f0567fce589bc420b3"
+  integrity sha1-ttnHfpn2Db/+JiLwVn/OWJvEILM=
   dependencies:
-    "@docusaurus/core" "2.0.0-alpha.68"
+    "@docusaurus/core" "2.0.0-alpha.69"
 
-"@docusaurus/plugin-ideal-image@2.0.0-alpha.68":
-  version "2.0.0-alpha.68"
-  resolved "https://registry.npm.taobao.org/@docusaurus/plugin-ideal-image/download/@docusaurus/plugin-ideal-image-2.0.0-alpha.68.tgz#b95261e5b816adab842c929e4dbb9665400f1956"
-  integrity sha1-uVJh5bgWrauELJKeTbuWZUAPGVY=
+"@docusaurus/plugin-ideal-image@2.0.0-alpha.69":
+  version "2.0.0-alpha.69"
+  resolved "https://registry.npm.taobao.org/@docusaurus/plugin-ideal-image/download/@docusaurus/plugin-ideal-image-2.0.0-alpha.69.tgz#1b1eb6a5225cced864ded9e11d1d4b33317c5e93"
+  integrity sha1-Gx62pSJczthk3tnhHR1LMzF8XpM=
   dependencies:
-    "@docusaurus/core" "2.0.0-alpha.68"
-    "@docusaurus/lqip-loader" "2.0.0-alpha.68"
-    "@docusaurus/types" "2.0.0-alpha.68"
+    "@docusaurus/core" "2.0.0-alpha.69"
+    "@docusaurus/lqip-loader" "2.0.0-alpha.69"
+    "@docusaurus/types" "2.0.0-alpha.69"
     "@endiliey/react-ideal-image" "^0.0.11"
     "@endiliey/responsive-loader" "^1.3.2"
     react-waypoint "^9.0.2"
     sharp "^0.25.2"
     webpack "^4.44.1"
 
-"@docusaurus/plugin-pwa@2.0.0-alpha.68":
-  version "2.0.0-alpha.68"
-  resolved "https://registry.npm.taobao.org/@docusaurus/plugin-pwa/download/@docusaurus/plugin-pwa-2.0.0-alpha.68.tgz#3ef1471b5879c0bd508a9ac52a9219706e59596a"
-  integrity sha1-PvFHG1h5wL1QiprFKpIZcG5ZWWo=
+"@docusaurus/plugin-pwa@2.0.0-alpha.69":
+  version "2.0.0-alpha.69"
+  resolved "https://registry.npm.taobao.org/@docusaurus/plugin-pwa/download/@docusaurus/plugin-pwa-2.0.0-alpha.69.tgz#864f6f6250992d21d6e6742d546e8c1323b061a7"
+  integrity sha1-hk9vYlCZLSHW5nQtVG6MEyOwYac=
   dependencies:
     "@babel/plugin-proposal-nullish-coalescing-operator" "^7.12.1"
     "@babel/plugin-proposal-optional-chaining" "^7.12.1"
     "@babel/preset-env" "^7.12.1"
-    "@docusaurus/core" "2.0.0-alpha.68"
+    "@docusaurus/core" "2.0.0-alpha.69"
     babel-loader "^8.2.1"
     clsx "^1.1.1"
     core-js "^2.6.5"
@@ -2060,98 +2060,98 @@
     workbox-precaching "^5.1.4"
     workbox-window "^5.1.4"
 
-"@docusaurus/plugin-sitemap@2.0.0-alpha.68":
-  version "2.0.0-alpha.68"
-  resolved "https://registry.npm.taobao.org/@docusaurus/plugin-sitemap/download/@docusaurus/plugin-sitemap-2.0.0-alpha.68.tgz#2584ea37c44753e044fd8a52c24c4cdcd4a616ae"
-  integrity sha1-JYTqN8RHU+BE/YpSwkxM3NSmFq4=
+"@docusaurus/plugin-sitemap@2.0.0-alpha.69":
+  version "2.0.0-alpha.69"
+  resolved "https://registry.npm.taobao.org/@docusaurus/plugin-sitemap/download/@docusaurus/plugin-sitemap-2.0.0-alpha.69.tgz#ffda02b4be468b3dfeed8fde3c2f2971ee839078"
+  integrity sha1-/9oCtL5Giz3+7Y/ePC8pce6DkHg=
   dependencies:
-    "@docusaurus/core" "2.0.0-alpha.68"
-    "@docusaurus/types" "2.0.0-alpha.68"
-    fs-extra "^8.1.0"
+    "@docusaurus/core" "2.0.0-alpha.69"
+    "@docusaurus/types" "2.0.0-alpha.69"
+    fs-extra "^9.0.1"
     joi "^17.2.1"
     sitemap "^3.2.2"
 
-"@docusaurus/preset-classic@2.0.0-alpha.68":
-  version "2.0.0-alpha.68"
-  resolved "https://registry.npm.taobao.org/@docusaurus/preset-classic/download/@docusaurus/preset-classic-2.0.0-alpha.68.tgz#1c807f648c2ac3efc8ff06326074097a06fe7b5a"
-  integrity sha1-HIB/ZIwqw+/I/wYyYHQJegb+e1o=
-  dependencies:
-    "@docusaurus/core" "2.0.0-alpha.68"
-    "@docusaurus/plugin-content-blog" "2.0.0-alpha.68"
-    "@docusaurus/plugin-content-docs" "2.0.0-alpha.68"
-    "@docusaurus/plugin-content-pages" "2.0.0-alpha.68"
-    "@docusaurus/plugin-debug" "2.0.0-alpha.68"
-    "@docusaurus/plugin-google-analytics" "2.0.0-alpha.68"
-    "@docusaurus/plugin-google-gtag" "2.0.0-alpha.68"
-    "@docusaurus/plugin-sitemap" "2.0.0-alpha.68"
-    "@docusaurus/theme-classic" "2.0.0-alpha.68"
-    "@docusaurus/theme-search-algolia" "2.0.0-alpha.68"
-
-"@docusaurus/remark-plugin-npm2yarn@2.0.0-alpha.68":
-  version "2.0.0-alpha.68"
-  resolved "https://registry.npm.taobao.org/@docusaurus/remark-plugin-npm2yarn/download/@docusaurus/remark-plugin-npm2yarn-2.0.0-alpha.68.tgz#146e023329b1f5eaaa068c68cbd202c82e75a580"
-  integrity sha1-FG4CMymx9eqqBoxoy9ICyC51pYA=
+"@docusaurus/preset-classic@2.0.0-alpha.69":
+  version "2.0.0-alpha.69"
+  resolved "https://registry.npm.taobao.org/@docusaurus/preset-classic/download/@docusaurus/preset-classic-2.0.0-alpha.69.tgz#f8ecfd610852e6754037f006edc38dc4d6146da6"
+  integrity sha1-+Oz9YQhS5nVAN/AG7cONxNYUbaY=
+  dependencies:
+    "@docusaurus/core" "2.0.0-alpha.69"
+    "@docusaurus/plugin-content-blog" "2.0.0-alpha.69"
+    "@docusaurus/plugin-content-docs" "2.0.0-alpha.69"
+    "@docusaurus/plugin-content-pages" "2.0.0-alpha.69"
+    "@docusaurus/plugin-debug" "2.0.0-alpha.69"
+    "@docusaurus/plugin-google-analytics" "2.0.0-alpha.69"
+    "@docusaurus/plugin-google-gtag" "2.0.0-alpha.69"
+    "@docusaurus/plugin-sitemap" "2.0.0-alpha.69"
+    "@docusaurus/theme-classic" "2.0.0-alpha.69"
+    "@docusaurus/theme-search-algolia" "2.0.0-alpha.69"
+
+"@docusaurus/remark-plugin-npm2yarn@2.0.0-alpha.69":
+  version "2.0.0-alpha.69"
+  resolved "https://registry.npm.taobao.org/@docusaurus/remark-plugin-npm2yarn/download/@docusaurus/remark-plugin-npm2yarn-2.0.0-alpha.69.tgz#6ecfa2eaae1b0f492d8df56d01d325575bdfed27"
+  integrity sha1-bs+i6q4bD0ktjfVtAdMlV1vf7Sc=
   dependencies:
     npm-to-yarn "^1.0.1"
 
-"@docusaurus/theme-classic@2.0.0-alpha.68":
-  version "2.0.0-alpha.68"
-  resolved "https://registry.npm.taobao.org/@docusaurus/theme-classic/download/@docusaurus/theme-classic-2.0.0-alpha.68.tgz#e9afe258e9a3ecd096dd13984798351b0601cda2"
-  integrity sha1-6a/iWOmj7NCW3ROYR5g1GwYBzaI=
-  dependencies:
-    "@docusaurus/core" "2.0.0-alpha.68"
-    "@docusaurus/plugin-content-blog" "2.0.0-alpha.68"
-    "@docusaurus/plugin-content-docs" "2.0.0-alpha.68"
-    "@docusaurus/plugin-content-pages" "2.0.0-alpha.68"
-    "@docusaurus/theme-common" "2.0.0-alpha.68"
-    "@docusaurus/types" "2.0.0-alpha.68"
-    "@docusaurus/utils-validation" "2.0.0-alpha.68"
+"@docusaurus/theme-classic@2.0.0-alpha.69":
+  version "2.0.0-alpha.69"
+  resolved "https://registry.npm.taobao.org/@docusaurus/theme-classic/download/@docusaurus/theme-classic-2.0.0-alpha.69.tgz#64885b973df695e52356e3484fd9a03101b86e58"
+  integrity sha1-ZIhblz32leUjVuNIT9mgMQG4blg=
+  dependencies:
+    "@docusaurus/core" "2.0.0-alpha.69"
+    "@docusaurus/plugin-content-blog" "2.0.0-alpha.69"
+    "@docusaurus/plugin-content-docs" "2.0.0-alpha.69"
+    "@docusaurus/plugin-content-pages" "2.0.0-alpha.69"
+    "@docusaurus/theme-common" "2.0.0-alpha.69"
+    "@docusaurus/types" "2.0.0-alpha.69"
+    "@docusaurus/utils-validation" "2.0.0-alpha.69"
     "@mdx-js/mdx" "^1.6.21"
     "@mdx-js/react" "^1.6.21"
     "@types/react-toggle" "^4.0.2"
     clsx "^1.1.1"
     copy-text-to-clipboard "^2.2.0"
-    infima "0.2.0-alpha.17"
+    infima "0.2.0-alpha.18"
     joi "^17.2.1"
     lodash "^4.17.19"
     parse-numeric-range "^1.2.0"
     prism-react-renderer "^1.1.1"
     prismjs "^1.22.0"
     prop-types "^15.7.2"
-    react-router-dom "^5.1.2"
+    react-router-dom "^5.2.0"
     react-toggle "^4.1.1"
 
-"@docusaurus/theme-common@2.0.0-alpha.68":
-  version "2.0.0-alpha.68"
-  resolved "https://registry.npm.taobao.org/@docusaurus/theme-common/download/@docusaurus/theme-common-2.0.0-alpha.68.tgz#7815737396ef863446e695d41546349c55f02dc1"
-  integrity sha1-eBVzc5bvhjRG5pXUFUY0nFXwLcE=
+"@docusaurus/theme-common@2.0.0-alpha.69":
+  version "2.0.0-alpha.69"
+  resolved "https://registry.npm.taobao.org/@docusaurus/theme-common/download/@docusaurus/theme-common-2.0.0-alpha.69.tgz#4fd13db9fdd2b94e2010cd579ccfacde41824839"
+  integrity sha1-T9E9uf3SuU4gEM1XnM+s3kGCSDk=
   dependencies:
-    "@docusaurus/core" "2.0.0-alpha.68"
-    "@docusaurus/plugin-content-blog" "2.0.0-alpha.68"
-    "@docusaurus/plugin-content-docs" "2.0.0-alpha.68"
-    "@docusaurus/plugin-content-pages" "2.0.0-alpha.68"
-    "@docusaurus/types" "2.0.0-alpha.68"
+    "@docusaurus/core" "2.0.0-alpha.69"
+    "@docusaurus/plugin-content-blog" "2.0.0-alpha.69"
+    "@docusaurus/plugin-content-docs" "2.0.0-alpha.69"
+    "@docusaurus/plugin-content-pages" "2.0.0-alpha.69"
+    "@docusaurus/types" "2.0.0-alpha.69"
 
-"@docusaurus/theme-live-codeblock@2.0.0-alpha.68":
-  version "2.0.0-alpha.68"
-  resolved "https://registry.npm.taobao.org/@docusaurus/theme-live-codeblock/download/@docusaurus/theme-live-codeblock-2.0.0-alpha.68.tgz#19e26c4f1661d977ce9ae95b6117c411aee64082"
-  integrity sha1-GeJsTxZh2XfOmulbYRfEEa7mQII=
+"@docusaurus/theme-live-codeblock@2.0.0-alpha.69":
+  version "2.0.0-alpha.69"
+  resolved "https://registry.npm.taobao.org/@docusaurus/theme-live-codeblock/download/@docusaurus/theme-live-codeblock-2.0.0-alpha.69.tgz#e9c0cbee261ebbe32cbd06057941d4cdc64c6e60"
+  integrity sha1-6cDL7iYeu+MsvQYFeUHUzcZMbmA=
   dependencies:
-    "@docusaurus/core" "2.0.0-alpha.68"
+    "@docusaurus/core" "2.0.0-alpha.69"
     "@philpl/buble" "^0.19.7"
     clsx "^1.1.1"
     parse-numeric-range "^1.2.0"
     prism-react-renderer "^1.1.1"
     react-live "^2.2.3"
 
-"@docusaurus/theme-search-algolia@2.0.0-alpha.68":
-  version "2.0.0-alpha.68"
-  resolved "https://registry.npm.taobao.org/@docusaurus/theme-search-algolia/download/@docusaurus/theme-search-algolia-2.0.0-alpha.68.tgz#f4a039afe4a9b46f7812cd08b2e884c5ffcad6c6"
-  integrity sha1-9KA5r+SptG94Es0IsuiExf/K1sY=
+"@docusaurus/theme-search-algolia@2.0.0-alpha.69":
+  version "2.0.0-alpha.69"
+  resolved "https://registry.npm.taobao.org/@docusaurus/theme-search-algolia/download/@docusaurus/theme-search-algolia-2.0.0-alpha.69.tgz#955da97fd3052118fee1b5ffa1abfa33043fd67a"
+  integrity sha1-lV2pf9MFIRj+4bX/oav6MwQ/1no=
   dependencies:
     "@docsearch/react" "^1.0.0-alpha.27"
-    "@docusaurus/core" "2.0.0-alpha.68"
-    "@docusaurus/utils" "2.0.0-alpha.68"
+    "@docusaurus/core" "2.0.0-alpha.69"
+    "@docusaurus/utils" "2.0.0-alpha.69"
     algoliasearch "^4.0.0"
     algoliasearch-helper "^3.1.1"
     clsx "^1.1.1"
@@ -2159,34 +2159,34 @@
     joi "^17.2.1"
     lodash "^4.17.19"
 
-"@docusaurus/types@2.0.0-alpha.68":
-  version "2.0.0-alpha.68"
-  resolved "https://registry.npm.taobao.org/@docusaurus/types/download/@docusaurus/types-2.0.0-alpha.68.tgz#8709de8b7e6a535f3e835ef20b04b6f12bf328af"
-  integrity sha1-hwnei35qU18+g17yCwS28SvzKK8=
+"@docusaurus/types@2.0.0-alpha.69":
+  version "2.0.0-alpha.69"
+  resolved "https://registry.npm.taobao.org/@docusaurus/types/download/@docusaurus/types-2.0.0-alpha.69.tgz#05d1a28f325600185b3cb4088326c865fb4b54a9"
+  integrity sha1-BdGijzJWABhbPLQIgybIZftLVKk=
   dependencies:
     "@types/webpack" "^4.41.0"
     commander "^4.0.1"
     querystring "0.2.0"
     webpack-merge "^4.2.2"
 
-"@docusaurus/utils-validation@2.0.0-alpha.68":
-  version "2.0.0-alpha.68"
-  resolved "https://registry.npm.taobao.org/@docusaurus/utils-validation/download/@docusaurus/utils-validation-2.0.0-alpha.68.tgz#3497bd208dcd80233c44d4ca755bad91ec466d04"
-  integrity sha1-NJe9II3NgCM8RNTKdVutkexGbQQ=
+"@docusaurus/utils-validation@2.0.0-alpha.69":
+  version "2.0.0-alpha.69"
+  resolved "https://registry.npm.taobao.org/@docusaurus/utils-validation/download/@docusaurus/utils-validation-2.0.0-alpha.69.tgz#35adab0f2b787dfdcf508ea0aa3552578be583a5"
+  integrity sha1-Na2rDyt4ff3PUI6gqjVSV4vlg6U=
   dependencies:
-    "@docusaurus/utils" "2.0.0-alpha.68"
+    "@docusaurus/utils" "2.0.0-alpha.69"
     chalk "^3.0.0"
     joi "^17.2.1"
 
-"@docusaurus/utils@2.0.0-alpha.68":
-  version "2.0.0-alpha.68"
-  resolved "https://registry.npm.taobao.org/@docusaurus/utils/download/@docusaurus/utils-2.0.0-alpha.68.tgz#2c806521edb0ef27c612c0d6380319cb9d8ded4a"
-  integrity sha1-LIBlIe2w7yfGEsDWOAMZy52N7Uo=
+"@docusaurus/utils@2.0.0-alpha.69":
+  version "2.0.0-alpha.69"
+  resolved "https://registry.npm.taobao.org/@docusaurus/utils/download/@docusaurus/utils-2.0.0-alpha.69.tgz#9532cd489742beede570575ab70265dacecb3f24"
+  integrity sha1-lTLNSJdCvu3lcFdatwJl2s7LPyQ=
   dependencies:
-    "@docusaurus/types" "2.0.0-alpha.68"
+    "@docusaurus/types" "2.0.0-alpha.69"
     chalk "^3.0.0"
     escape-string-regexp "^2.0.0"
-    fs-extra "^8.1.0"
+    fs-extra "^9.0.1"
     gray-matter "^4.0.2"
     lodash.camelcase "^4.3.0"
     lodash.kebabcase "^4.1.1"
@@ -2393,11 +2393,6 @@
     unist-builder "2.0.3"
     unist-util-visit "2.0.3"
 
-"@mdx-js/react@^1.5.8":
-  version "1.6.18"
-  resolved "https://registry.npm.taobao.org/@mdx-js/react/download/@mdx-js/react-1.6.18.tgz#f83cbb2355de9cf36a213140ce21647da1e34fa7"
-  integrity sha1-+Dy7I1XenPNqITFAziFkfaHjT6c=
-
 "@mdx-js/react@^1.6.21":
   version "1.6.21"
   resolved "https://registry.npm.taobao.org/@mdx-js/react/download/@mdx-js/react-1.6.21.tgz#86d962471a5e160c59a6b32054aa55c0c7ca404e"
@@ -3243,6 +3238,11 @@ async@^2.6.2:
   dependencies:
     lodash "^4.17.14"
 
+at-least-node@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.npm.taobao.org/at-least-node/download/at-least-node-1.0.0.tgz#602cd4b46e844ad4effc92a8011a3c46e0238dc2"
+  integrity sha1-YCzUtG6EStTv/JKoARo8RuAjjcI=
+
 atob@^2.1.2:
   version "2.1.2"
   resolved "https://registry.npm.taobao.org/atob/download/atob-2.1.2.tgz#6d9517eb9e030d2436666651e86bd9f6f13533c9"
@@ -4020,7 +4020,7 @@ class-utils@^0.3.5:
     isobject "^3.0.0"
     static-extend "^0.1.1"
 
-classnames@^2.2.5, classnames@^2.2.6:
+classnames@^2.2.5:
   version "2.2.6"
   resolved "https://registry.npm.taobao.org/classnames/download/classnames-2.2.6.tgz?cache=0&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fclassnames%2Fdownload%2Fclassnames-2.2.6.tgz#43935bffdd291f326dad0a205309b38d00f650ce"
   integrity sha1-Q5Nb/90pHzJtrQogUwmzjQD2UM4=
@@ -5776,6 +5776,16 @@ fs-extra@^8.1.0:
     jsonfile "^4.0.0"
     universalify "^0.1.0"
 
+fs-extra@^9.0.1:
+  version "9.0.1"
+  resolved "https://registry.npm.taobao.org/fs-extra/download/fs-extra-9.0.1.tgz?cache=0&sync_timestamp=1591229972229&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Ffs-extra%2Fdownload%2Ffs-extra-9.0.1.tgz#910da0062437ba4c39fedd863f1675ccfefcb9fc"
+  integrity sha1-kQ2gBiQ3ukw5/t2GPxZ1zP78ufw=
+  dependencies:
+    at-least-node "^1.0.0"
+    graceful-fs "^4.2.0"
+    jsonfile "^6.0.1"
+    universalify "^1.0.0"
+
 fs-minipass@^2.0.0:
   version "2.1.0"
   resolved "https://registry.npm.taobao.org/fs-minipass/download/fs-minipass-2.1.0.tgz#7f5036fdbf12c63c169190cbe4199c852271f9fb"
@@ -6545,10 +6555,10 @@ infer-owner@^1.0.3, infer-owner@^1.0.4:
   resolved "https://registry.npm.taobao.org/infer-owner/download/infer-owner-1.0.4.tgz#c4cefcaa8e51051c2a40ba2ce8a3d27295af9467"
   integrity sha1-xM78qo5RBRwqQLos6KPScpWvlGc=
 
-infima@0.2.0-alpha.17:
-  version "0.2.0-alpha.17"
-  resolved "https://registry.npm.taobao.org/infima/download/infima-0.2.0-alpha.17.tgz#c3b472e6504cb142c673c1d4a1f118fe2a60a961"
-  integrity sha1-w7Ry5lBMsULGc8HUofEY/ipgqWE=
+infima@0.2.0-alpha.18:
+  version "0.2.0-alpha.18"
+  resolved "https://registry.npm.taobao.org/infima/download/infima-0.2.0-alpha.18.tgz#8ac62711f13ef99b1f4a45b3ac14571722a2ccf6"
+  integrity sha1-isYnEfE++ZsfSkWzrBRXFyKizPY=
 
 inflight@^1.0.4:
   version "1.0.6"
@@ -7184,6 +7194,15 @@ jsonfile@^4.0.0:
   optionalDependencies:
     graceful-fs "^4.1.6"
 
+jsonfile@^6.0.1:
+  version "6.1.0"
+  resolved "https://registry.npm.taobao.org/jsonfile/download/jsonfile-6.1.0.tgz?cache=0&sync_timestamp=1604161797011&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fjsonfile%2Fdownload%2Fjsonfile-6.1.0.tgz#bc55b2634793c679ec6403094eb13698a6ec0aae"
+  integrity sha1-vFWyY0eTxnnsZAMJTrE2mKbsCq4=
+  dependencies:
+    universalify "^2.0.0"
+  optionalDependencies:
+    graceful-fs "^4.1.6"
+
 keyv@^3.0.0:
   version "3.1.0"
   resolved "https://registry.npm.taobao.org/keyv/download/keyv-3.1.0.tgz?cache=0&sync_timestamp=1600337463601&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fkeyv%2Fdownload%2Fkeyv-3.1.0.tgz#ecc228486f69991e49e9476485a5be1e8fc5c4d9"
@@ -8150,7 +8169,7 @@ npm-run-path@^4.0.0:
   dependencies:
     path-key "^3.0.0"
 
-npm-to-yarn@^1.0.1:
+npm-to-yarn@^1.0.0-2, npm-to-yarn@^1.0.1:
   version "1.0.1"
   resolved "https://registry.npm.taobao.org/npm-to-yarn/download/npm-to-yarn-1.0.1.tgz#6cdb95114c4ff0be50a7a2381d4d16131a5f52df"
   integrity sha1-bNuVEUxP8L5Qp6I4HU0WExpfUt8=
@@ -9463,7 +9482,7 @@ pretty-time@^1.1.0:
   resolved "https://registry.npm.taobao.org/pretty-time/download/pretty-time-1.1.0.tgz#ffb7429afabb8535c346a34e41873adf3d74dd0e"
   integrity sha1-/7dCmvq7hTXDRqNOQYc63z103Q4=
 
-prism-react-renderer@^1.0.1, prism-react-renderer@^1.1.0, prism-react-renderer@^1.1.1:
+prism-react-renderer@^1.0.1, prism-react-renderer@^1.1.1:
   version "1.1.1"
   resolved "https://registry.npm.taobao.org/prism-react-renderer/download/prism-react-renderer-1.1.1.tgz#1c1be61b1eb9446a146ca7a50b7bcf36f2a70a44"
   integrity sha1-HBvmGx65RGoUbKelC3vPNvKnCkQ=
@@ -9797,7 +9816,7 @@ react-router-config@^5.1.1:
   dependencies:
     "@babel/runtime" "^7.1.2"
 
-react-router-dom@^5.1.2:
+react-router-dom@^5.2.0:
   version "5.2.0"
   resolved "https://registry.npm.taobao.org/react-router-dom/download/react-router-dom-5.2.0.tgz#9e65a4d0c45e13289e66c7b17c7e175d0ea15662"
   integrity sha1-nmWk0MReEyieZsexfH4XXQ6hVmI=
@@ -11556,6 +11575,16 @@ universalify@^0.1.0:
   resolved "https://registry.npm.taobao.org/universalify/download/universalify-0.1.2.tgz#b646f69be3942dabcecc9d6639c80dc105efaa66"
   integrity sha1-tkb2m+OULavOzJ1mOcgNwQXvqmY=
 
+universalify@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.npm.taobao.org/universalify/download/universalify-1.0.0.tgz?cache=0&sync_timestamp=1603179967633&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Funiversalify%2Fdownload%2Funiversalify-1.0.0.tgz#b61a1da173e8435b2fe3c67d29b9adf8594bd16d"
+  integrity sha1-thodoXPoQ1sv48Z9Kbmt+FlL0W0=
+
+universalify@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.npm.taobao.org/universalify/download/universalify-2.0.0.tgz?cache=0&sync_timestamp=1603179967633&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Funiversalify%2Fdownload%2Funiversalify-2.0.0.tgz#75a4984efedc4b08975c5aeb73f530d02df25717"
+  integrity sha1-daSYTv7cSwiXXFrrc/Uw0C3yVxc=
+
 unpipe@1.0.0, unpipe@~1.0.0:
   version "1.0.0"
   resolved "https://registry.npm.taobao.org/unpipe/download/unpipe-1.0.0.tgz?cache=0&sync_timestamp=1589682745059&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Funpipe%2Fdownload%2Funpipe-1.0.0.tgz#b2bf4ee8514aae6165b4817829d21b2ef49904ec"
@@ -12127,7 +12156,7 @@ workbox-routing@^5.0.0, workbox-routing@^5.1.4:
   dependencies:
     workbox-core "^5.1.4"
 
-workbox-strategies@^5.0.0, workbox-strategies@^5.1.4:
+workbox-strategies@^5.1.4:
   version "5.1.4"
   resolved "https://registry.npm.taobao.org/workbox-strategies/download/workbox-strategies-5.1.4.tgz?cache=0&sync_timestamp=1602520527126&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fworkbox-strategies%2Fdownload%2Fworkbox-strategies-5.1.4.tgz#96b1418ccdfde5354612914964074d466c52d08c"
   integrity sha1-lrFBjM395TVGEpFJZAdNRmxS0Iw=

From d12ff97ad59ff68ff435fc44d51c2300ca9a1fb5 Mon Sep 17 00:00:00 2001
From: honlyHuang <huangliyn@gmail.com>
Date: Thu, 26 Nov 2020 12:29:06 +0800
Subject: [PATCH 6/9] =?UTF-8?q?docs(update):=20=E4=BB=A3=E7=A0=81=E7=A4=BA?=
 =?UTF-8?q?=E4=BE=8B=E6=96=87=E4=BB=B6=E8=B7=AF=E5=BE=84=E6=98=BE=E7=A4=BA?=
 =?UTF-8?q?=E4=BC=98=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 docs/config-detail.md        |  6 +++---
 docs/config.md               |  2 +-
 docs/css-in-js.md            |  6 +++---
 docs/css-modules.md          |  4 ++--
 docs/debug-config.md         |  6 +++---
 docs/envs-debug.md           |  3 ++-
 docs/envs.md                 |  6 +++---
 docs/mini-third-party.md     |  9 +++------
 docs/miniprogram-plugin.md   | 10 +++++-----
 docs/nerv.md                 |  2 +-
 docs/platform-plugin-base.md | 15 +++++----------
 docs/platform-plugin-how.md  | 18 ++++++------------
 docs/plugin.md               |  4 ++--
 docs/prerender.md            |  3 +--
 docs/redux.md                | 21 +++++++--------------
 docs/size.md                 |  4 ++--
 docs/static-reference.md     |  2 +-
 docs/template.md             | 11 ++++-------
 docs/tutorial.md             |  6 ++----
 19 files changed, 56 insertions(+), 82 deletions(-)

diff --git a/docs/config-detail.md b/docs/config-detail.md
index 374f770e8690..3676cecaad8d 100644
--- a/docs/config-detail.md
+++ b/docs/config-detail.md
@@ -35,7 +35,7 @@ title: 编译配置详情
 
 配置方式可参考 [Webpack DefinePlugin](https://webpack.js.org/plugins/define-plugin/)，例如：
 
-```js
+```js title="/config/index.js"
 module.exports = {
   // ...
   defineConstants: {
@@ -110,7 +110,7 @@ import projectConfig from '@/project'
 
 **config/dev.js**：
 
-```jsx
+```jsx title="/config/dev.js"
 module.exports = {
   // ...
   env: {
@@ -121,7 +121,7 @@ module.exports = {
 
 **config/prod.js**：
 
-```jsx
+```jsx title="config/prod.js"
 module.exports = {
   // ...
   env: {
diff --git a/docs/config.md b/docs/config.md
index 33b769ecd449..b29c7b033e60 100644
--- a/docs/config.md
+++ b/docs/config.md
@@ -10,7 +10,7 @@ title: 编译配置
 
 ## index.js —— 通用配置
 
-```js
+```js title="/config/index.js"
 const config = {
   // 项目名称
   projectName: 'Awesome Next',
diff --git a/docs/css-in-js.md b/docs/css-in-js.md
index 68755d112416..00a2edb8c26b 100644
--- a/docs/css-in-js.md
+++ b/docs/css-in-js.md
@@ -16,7 +16,7 @@ $ npm i linaria
 
 其次配置项目根目录的 `babel.config.js`:
 
-```js
+```js title="babel.config.js"
 module.exports = {
   presets: [
     ['taro', {
@@ -30,7 +30,7 @@ module.exports = {
 
 之后配置 `config/index.js`
 
-```js
+```js title="config/index.js"
 const config = {
   mini: {
     webpackChain(chain, webpack) {
@@ -49,7 +49,7 @@ const config = {
 
 最后在项目根目录新建 `linaria.config.js`
 
-```js
+```js title="linaria.config.js"
 // linaria 配置详见 https://github.com/callstack/linaria/blob/master/docs/CONFIGURATION.md#options
 module.exports = {
   rules: [
diff --git a/docs/css-modules.md b/docs/css-modules.md
index 5768e96f0b51..bbee1769788a 100644
--- a/docs/css-modules.md
+++ b/docs/css-modules.md
@@ -8,7 +8,7 @@ Taro 中内置了 [CSS Modules](https://github.com/css-modules/css-modules) 的
 
 小程序端开启
 
-```js
+```js title="config/index.js"
 weapp: {
   module: {
     postcss: {
@@ -27,7 +27,7 @@ weapp: {
 
 H5 端开启
 
-```js
+```js title="config/index.js"
 h5: {
   module: {
     postcss: {
diff --git a/docs/debug-config.md b/docs/debug-config.md
index 603893a8a3d5..b37e194fd3e5 100644
--- a/docs/debug-config.md
+++ b/docs/debug-config.md
@@ -43,7 +43,7 @@ yarn global add rollup
 
 launch.json 有以下预设配置：
 
-```json
+```json title="launch.json"
 {
   // ...
   "configurations": [
@@ -83,7 +83,7 @@ launch.json 有以下预设配置：
 
 可以这样配置 launch.json：
 
-```json
+```json title="launch.json"
 {
   // ...
   "configurations": [
@@ -108,7 +108,7 @@ launch.json 有以下预设配置：
 
 可以这样配置 launch.json：
 
-```json
+```json title="launch.json"
 {
   // ...
   "configurations": [
diff --git a/docs/envs-debug.md b/docs/envs-debug.md
index 6d613d3a7286..f882f09b1b7b 100644
--- a/docs/envs-debug.md
+++ b/docs/envs-debug.md
@@ -3,7 +3,8 @@ title: 多端同步调试
 ---
 
 从 1.3.5 版本开始，可以在 dist 目录下创建一个与编译的目标平台名同名的目录，并将结果放在这个目录下，例如编译到微信小程序，最终结果是在 dist/weapp 目录下，这样做的好处是，各个平台使用独立的目录互不影响，从而达到多端同步调试的目的，在 `config/index.js` 配置如下：
-```
+
+```js title="/config/index.js"
 outputRoot: `dist/${process.env.TARO_ENV}`
 ```
 
diff --git a/docs/envs.md b/docs/envs.md
index 2cf44bb91071..6dd8e972507c 100644
--- a/docs/envs.md
+++ b/docs/envs.md
@@ -81,7 +81,7 @@ import Test from '../../components/test'
 
 增加 `set_title.h5.js`，代码如下
 
-```js
+```js title="set_title.h5.js"
 export default function setTitle (title) {
   document.title = title
 }
@@ -89,7 +89,7 @@ export default function setTitle (title) {
 
 增加 `set_title.weapp.js`，代码如下
 
-```js
+```js title="set_title.weapp.js"
 import Taro from '@tarojs/taro'
 export default function setTitle (title) {
   Taro.setNavigationBarTitle({
@@ -145,7 +145,7 @@ Taro 3 里的多端文件由 [MultiPlatformPlugin](https://github.com/NervJS/tar
 
 假如我们有一个 npm 包名叫 @taro-mobile，需要解析里面的多端文件，可以在 taro 的配置文件中这样修改 MultiPlatformPlugin 的配置：
 
-```js
+```js title="/config/index.js"
 // mini 也可改为 h5，分别对应小程序与 h5 端配置
 mini: {
   webpackChain (chain) {
diff --git a/docs/mini-third-party.md b/docs/mini-third-party.md
index 2e7cda740928..bff39f906793 100644
--- a/docs/mini-third-party.md
+++ b/docs/mini-third-party.md
@@ -18,8 +18,7 @@ Taro 支持使用小程序的第三方组件和插件，使用方式也异常的
 
 > 注意：Taro3 中没有自定义组件，组件是没有配置文件的。usingComponents 必须配置在“页面”的配置文件中。
 
-```js
-// page.config.js
+```js {2} title="page.config.js"
 export default {
   usingComponents: {
     // 定义需要引入的第三方组件
@@ -32,8 +31,7 @@ export default {
 
 2. JSX 中引用
 
-```jsx
-// page.js
+```jsx {14} title="page.js"
 import React, { Component } from 'react'
 import { View } from '@tarojs/components'
 
@@ -83,8 +81,7 @@ page.selectComponent('#mychart-dom-area')
 
 使用插件前，使用者要在 `app.confg.js` 的配置中声明需要使用的插件，例如
 
-```jsx
-// app.config.js
+```jsx title="app.config.js"
 export default {
   plugins: {
     myPlugin: {
diff --git a/docs/miniprogram-plugin.md b/docs/miniprogram-plugin.md
index d6b42783f42d..485c1164bca5 100644
--- a/docs/miniprogram-plugin.md
+++ b/docs/miniprogram-plugin.md
@@ -50,7 +50,7 @@ taro build --plugin weapp --watch
 
 plugin.json 的 **pages** 字段加入页面插件路径：
 
-```json
+```json title="plugin.json"
 {
   "pages": {
     "list": "pages/list/list"
@@ -60,7 +60,7 @@ plugin.json 的 **pages** 字段加入页面插件路径：
 
 页面使用路径： **plugin://[app.js 中注册的插件名]/[plugin.json 中注册的页面名]** 进行跳转。
 
-```jsx
+```jsx {1}
 <Navigator url='plugin://myPlugin/list'>
   Go to pages/list!
 </Navigator>
@@ -70,7 +70,7 @@ plugin.json 的 **pages** 字段加入页面插件路径：
 
 plugin.json 的 **publicComponents** 字段加入组件插件路径：
 
-```json
+```json title="plugin.json"
 {
   "publicComponents": {
     "avatar": "components/avatar/avatar"
@@ -80,7 +80,7 @@ plugin.json 的 **publicComponents** 字段加入组件插件路径：
 
 在页面配置 config.usingComponents 中配置好插件名和插件路径（**plugin://[app.js 中注册的插件名]/[plugin.json 中注册的组件名]**）：
 
-```jsx
+```jsx {4}
 export default class Index extends Component {
   config = {
     usingComponents: {
@@ -114,7 +114,7 @@ const extraProps = {
 
 plugin.json 的 **main** 字段加入接口插件路径：
 
-```json
+```json title="plugin.json"
 {
   "main": "index.js"
 }
diff --git a/docs/nerv.md b/docs/nerv.md
index 0536b3c0040b..f73607c863bb 100644
--- a/docs/nerv.md
+++ b/docs/nerv.md
@@ -8,7 +8,7 @@ title: Nerv
 
 在使用第三方 React 库时，需要在[配置文件](config-detail.md#miniwebpackchain) `webpack.resolve.alias`，把 `react` 和 `react-dom` 映射到 `nervjs`:
 
-```js
+```js title="/config/index.js"
 {
   webpackChain (chain, webpack) {
     chain.merge({
diff --git a/docs/platform-plugin-base.md b/docs/platform-plugin-base.md
index 906b319fc034..a797b2e499ca 100644
--- a/docs/platform-plugin-base.md
+++ b/docs/platform-plugin-base.md
@@ -6,8 +6,7 @@ title: TaroPlatformBase
 
 例如我们创建一个微信小程序平台：
 
-```js
-// program.ts
+```js title="program.ts"
 import { TaroPlatformBase } from '@tarojs/service'
 export default class Weapp extends TaroPlatformBase {
   // ...
@@ -184,8 +183,7 @@ runner(options)
 
 ### 1. 继承基类
 
-```js
-// program.ts
+```js title="program.ts"
 import { TaroPlatformBase } from '@tarojs/service'
 
 class Weapp extends TaroPlatformBase {
@@ -234,8 +232,7 @@ class Weapp extends TaroPlatformBase {
 
 规范：
 
-```js
-//components.ts
+```js title="components.ts"
 import { singleQuote } from '@tarojs/shared'
 
 export const components = {
@@ -319,8 +316,7 @@ internalComponent = {
 
 除了借助 `template.mergeComponents` 进行合并，我们也可以直接修改 `template.internalComponents`。
 
-```js
-// program.ts
+```js title="program.ts"
 class Weapp extends TaroPlatformBase {
   modifyComponents () {
     // 删除 Slider 组件里的一些属性
@@ -376,8 +372,7 @@ class Weapp extends TaroPlatformBase {
 
 我们创建的平台类需要编写一个对外的接口，在其中对编译流程进行设计，最终目标是调用 `@tarojs/mini-runner` 驱动 **Webpack** 开启编译。
 
-```js
-// program.ts
+```js title="program.ts"
 class Weapp extends TaroPlatformBase {
   // ...
   async start () {
diff --git a/docs/platform-plugin-how.md b/docs/platform-plugin-how.md
index 988a719cdc65..12f0ed19ac63 100644
--- a/docs/platform-plugin-how.md
+++ b/docs/platform-plugin-how.md
@@ -41,8 +41,7 @@ title: 编写端平台插件
 
 首先我们需要编写一个 Taro 插件来注册我们的编译平台，如：
 
-```js
-// index.ts
+```js title="index.ts"
 export default (ctx) => {
   ctx.registerPlatform({
     name: 'weapp',
@@ -99,8 +98,7 @@ Taro 小程序相关配置默认放在 `mini` 字段下，因此一般情况配
 
 然后在插件入口函数中调用上述自定义平台类的编译接口：
 
-```js
-// index.ts
+```js title="index.ts"
 import Weapp from './program'
 
 export default (ctx) => {
@@ -221,8 +219,7 @@ export function initNativeApi (taro) {
 
 当前扩展的小程序平台如果需要额外新增 API，建议使用一个 `apis-list.ts` 文件维护：
 
-```js
-// apis-list.ts
+```js title="apis-list.ts"
 // 微信小程序部分扩展 API
 export const _onAndSyncApis = new Set([
   'getAccountInfoSync'
@@ -279,8 +276,7 @@ function processApis (taro) {
 
 注意，Taro 相关的包需要配置 `external`，以免重复打包：
 
-```js
-// rollup.config.js
+```js title="rollup.config.js"
 {
   external: ['@tarojs/shared', '@tarojs/service']
 }
@@ -292,8 +288,7 @@ Taro 核心库维护的类型可能没有包括当前插件新增的组件和 AP
 
 创建一个类型定义文件：
 
-```ts
-// types/shims-iot.d.ts
+```ts title="types/shims-iot.d.ts"
 // 为支付宝 IOT 小程序拓展新增的 API 和组件定义
 import { ComponentType } from 'react'
 import Taro from '@tarojs/taro'
@@ -319,7 +314,6 @@ declare module '@tarojs/components' {
 
 开发者在类型定义文件中引入此文件即可：
 
-```ts
-// global.d.ts
+```ts title="global.d.ts"
 /// <reference path="node_modules/@tarojs/plugin-platform-alipay-iot/types/shims-iot.d.ts" />
 ```
diff --git a/docs/plugin.md b/docs/plugin.md
index 04788fe373e2..ea8bd409a9e2 100644
--- a/docs/plugin.md
+++ b/docs/plugin.md
@@ -20,7 +20,7 @@ Taro 提供了一些官方插件
 
 `plugins` 字段取值为一个数组，配置方式如下：
 
-```js
+```js title="/config/index.js"
 const config = {
   plugins: [
     // 引入 npm 安装的插件
@@ -46,7 +46,7 @@ const config = {
 
 配置[编译配置](./config-detail.md)中的 `presets` 字段，如下。
 
-```js
+```js title="/config/index.js"
 const config = {
   presets: [
     // 引入 npm 安装的插件集
diff --git a/docs/prerender.md b/docs/prerender.md
index 4521678b86d2..ed62c1854835 100644
--- a/docs/prerender.md
+++ b/docs/prerender.md
@@ -18,8 +18,7 @@ Taro Next 在一个页面加载时需要经历以下步骤：
 
 使用 Prerender 非常简单，你可以找到项目根目录下的 `config` 文件夹，根据你的项目情况更改 `index.js`/`dev.js`/`prod.js` 三者中的任意一个[项目配置](./config.md)，在编译时 Taro CLI 会根据你的配置自动启动 prerender：
 
-```js
-// /project/config/prod.js
+```js title="/config/index.js 或 /config/dev.js 或 /config/prod.js "
 const config = {
   ...
   mini: {
diff --git a/docs/redux.md b/docs/redux.md
index 5ded4e3d36a9..d1bf2f9f482e 100644
--- a/docs/redux.md
+++ b/docs/redux.md
@@ -14,8 +14,7 @@ $ npm install --save redux react-redux redux-thunk redux-logger
 
 随后可以在项目 `src` 目录下新增一个 `store` 目录，在目录下增加 `index.js` 文件用来配置 `store`，按自己喜好设置 `redux` 的中间件，例如下面例子中使用 `redux-thunk` 和 `redux-logger` 这两个中间件
 
-```jsx
-// src/store/index.js
+```jsx title="src/store/index.js"
 import { createStore, applyMiddleware, compose } from 'redux'
 import thunkMiddleware from 'redux-thunk'
 import rootReducer from '../reducers'
@@ -48,8 +47,7 @@ export default function configStore () {
 
 接下来在项目入口文件 `app.js` 中使用 `redux` 中提供的 `Provider` 组件将前面写好的 `store` 接入应用中
 
-```jsx
-// src/app.js
+```jsx title="src/app.js"
 import React, { Component } from 'react'
 import { Provider } from 'react-redux'
 
@@ -93,16 +91,14 @@ export default App
 
 新增 `action type`
 
-```jsx
-// src/constants/counter.js
+```jsx title="src/constants/counter.js"
 export const ADD = 'ADD'
 export const MINUS = 'MINUS'
 ```
 
 新增 `reducer` 处理
 
-```jsx
-// src/reducers/counter.js
+```jsx title="src/reducers/counter.js"
 import { ADD, MINUS } from '../constants/counter'
 
 const INITIAL_STATE = {
@@ -127,8 +123,7 @@ export default function counter (state = INITIAL_STATE, action) {
 }
 ```
 
-```jsx
-// src/reducers/index.js
+```jsx title="src/reducers/index.js"
 import { combineReducers } from 'redux'
 import counter from './counter'
 
@@ -140,8 +135,7 @@ export default combineReducers({
 
 新增 `action` 处理
 
-```jsx
-// src/actions/counter.js
+```jsx title="src/actions/counter.js"
 import {
   ADD,
   MINUS
@@ -171,8 +165,7 @@ export function asyncAdd () {
 
 最后，我们可以在页面（或者组件）中进行使用，我们将通过 `redux` 提供的 `connect` 方法将 `redux` 与我们的页面进行连接
 
-```jsx
-// src/pages/index/index.js
+```jsx title="src/pages/index/index.js"
 import React, { Component } from 'react'
 import { connect } from 'react-redux'
 import { View, Button, Text } from '@tarojs/components'
diff --git a/docs/size.md b/docs/size.md
index 79d97d12d89a..a95afcfe6b00 100644
--- a/docs/size.md
+++ b/docs/size.md
@@ -8,7 +8,7 @@ title: 设计稿及尺寸单位
 
 结合过往的开发经验，Taro 默认以 `750px` 作为换算尺寸标准，如果设计稿不是以 `750px` 为标准，则需要在项目配置 `config/index.js` 中进行设置，例如设计稿尺寸是 `640px`，则需要修改项目配置 `config/index.js` 中的 `designWidth` 配置为 `640`：
 
-```jsx
+```jsx title="/config/index.js"
 const config = {
   projectName: 'myProject',
   date: '2018-4-18',
@@ -108,7 +108,7 @@ REM 单位允许的小数位。
 
 配置规则对应到 `config/index.js` ，例如：
 
-```js
+```js {9-14,20-25} title="/config/index.js"
 {
   h5: {
     publicPath: '/',
diff --git a/docs/static-reference.md b/docs/static-reference.md
index 0884d311cabc..aa9533ec9246 100644
--- a/docs/static-reference.md
+++ b/docs/static-reference.md
@@ -70,7 +70,7 @@ Taro 默认会对 `1kb` 大小以下的资源进行转换，如果需要修改
 
 具体配置如下
 
-```javascript
+```js title="/config/index.js"
 // 小程序端样式引用本地资源内联
 url: {
   enable: true,
diff --git a/docs/template.md b/docs/template.md
index 7f904c642cf8..5880ceff125b 100644
--- a/docs/template.md
+++ b/docs/template.md
@@ -87,7 +87,7 @@ zip 包解压出单文件夹，文件夹内包含若干模板。
 
 开发者可以在模板根目录加入 **template_creator.js** 文件，文件对外 exports 包含 handler 与 basePageFiles 字段的对象：
 
-```js
+```js {5,16} title="template_creator.js"
 function createWhenTs (params) {
   return params.typescript ? true : false
 }
@@ -134,8 +134,7 @@ module.exports = {
 
 ##### 例子
 
-```ejs
-// index.js
+```ejs title="index.js"
 <%if (typescript) {-%>
 import Taro, { Component, Config } from '@tarojs/taro'
 <%} else { -%>
@@ -197,8 +196,7 @@ return: boolean/object
 
 当用户选择了使用 typescript 时，才生成 **global.d.ts** 和 **tsconfig.json** 文件。
 
-```js
-// template_creator.js
+```js title="template_creator.js"
 function createWhenTs (params) {
   return params.typescript ? true : false
 }
@@ -221,8 +219,7 @@ basePageFiles 告诉 CLI，当用户使用 `taro create` 命令创建页面时
 
 当用户使用命令 `taro create --page=detail` 时，会创建 **/src/pages/detail/detail.jsx** 与 **/src/pages/detail/detail.css** 两个文件。
 
-```js
-// template_creator.js
+```js title="template_creator.js"
 const handler = {
   '/src/pages/index/index.jsx' ({ pageName }) {
     return { setPageName: `/src/pages/${pageName}/${pageName}.jsx` }
diff --git a/docs/tutorial.md b/docs/tutorial.md
index 542886c0aeb2..24484dce19f7 100644
--- a/docs/tutorial.md
+++ b/docs/tutorial.md
@@ -73,8 +73,7 @@ Taro 中全局配置所包含的配置项及各端支持程度如下
 
 则需要在入口文件配置中写
 
-```jsx
-// app.config.js
+```jsx title="app.config.js"
 export default {
   pages: [
     'pages/index/index',
@@ -124,8 +123,7 @@ export default {
 
 配置示例如下：
 
-```jsx
-// app.config.js
+```jsx title="app.config.js"
 export default {
   pages: [
     'pages/index/index',

From adf03d98a57e76caf5d5d9566aec7a23c5a7be1a Mon Sep 17 00:00:00 2001
From: honlyHuang <huangliyn@gmail.com>
Date: Thu, 26 Nov 2020 12:29:06 +0800
Subject: [PATCH 7/9] =?UTF-8?q?docs(update):=20=E4=BB=A3=E7=A0=81=E7=A4=BA?=
 =?UTF-8?q?=E4=BE=8B=E6=96=87=E4=BB=B6=E8=B7=AF=E5=BE=84=E6=98=BE=E7=A4=BA?=
 =?UTF-8?q?=E4=BC=98=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 docs/config-detail.md        |  6 +++---
 docs/config.md               |  2 +-
 docs/css-in-js.md            |  6 +++---
 docs/css-modules.md          |  4 ++--
 docs/debug-config.md         |  6 +++---
 docs/envs-debug.md           |  3 ++-
 docs/envs.md                 |  6 +++---
 docs/mini-third-party.md     |  9 +++------
 docs/miniprogram-plugin.md   | 10 +++++-----
 docs/nerv.md                 |  2 +-
 docs/platform-plugin-base.md | 15 +++++----------
 docs/platform-plugin-how.md  | 18 ++++++------------
 docs/plugin.md               |  4 ++--
 docs/prerender.md            |  3 +--
 docs/redux.md                | 21 +++++++--------------
 docs/size.md                 |  4 ++--
 docs/static-reference.md     |  2 +-
 docs/template.md             | 11 ++++-------
 docs/tutorial.md             |  6 ++----
 19 files changed, 56 insertions(+), 82 deletions(-)

diff --git a/docs/config-detail.md b/docs/config-detail.md
index 374f770e8690..3676cecaad8d 100644
--- a/docs/config-detail.md
+++ b/docs/config-detail.md
@@ -35,7 +35,7 @@ title: 编译配置详情
 
 配置方式可参考 [Webpack DefinePlugin](https://webpack.js.org/plugins/define-plugin/)，例如：
 
-```js
+```js title="/config/index.js"
 module.exports = {
   // ...
   defineConstants: {
@@ -110,7 +110,7 @@ import projectConfig from '@/project'
 
 **config/dev.js**：
 
-```jsx
+```jsx title="/config/dev.js"
 module.exports = {
   // ...
   env: {
@@ -121,7 +121,7 @@ module.exports = {
 
 **config/prod.js**：
 
-```jsx
+```jsx title="config/prod.js"
 module.exports = {
   // ...
   env: {
diff --git a/docs/config.md b/docs/config.md
index 33b769ecd449..b29c7b033e60 100644
--- a/docs/config.md
+++ b/docs/config.md
@@ -10,7 +10,7 @@ title: 编译配置
 
 ## index.js —— 通用配置
 
-```js
+```js title="/config/index.js"
 const config = {
   // 项目名称
   projectName: 'Awesome Next',
diff --git a/docs/css-in-js.md b/docs/css-in-js.md
index 68755d112416..00a2edb8c26b 100644
--- a/docs/css-in-js.md
+++ b/docs/css-in-js.md
@@ -16,7 +16,7 @@ $ npm i linaria
 
 其次配置项目根目录的 `babel.config.js`:
 
-```js
+```js title="babel.config.js"
 module.exports = {
   presets: [
     ['taro', {
@@ -30,7 +30,7 @@ module.exports = {
 
 之后配置 `config/index.js`
 
-```js
+```js title="config/index.js"
 const config = {
   mini: {
     webpackChain(chain, webpack) {
@@ -49,7 +49,7 @@ const config = {
 
 最后在项目根目录新建 `linaria.config.js`
 
-```js
+```js title="linaria.config.js"
 // linaria 配置详见 https://github.com/callstack/linaria/blob/master/docs/CONFIGURATION.md#options
 module.exports = {
   rules: [
diff --git a/docs/css-modules.md b/docs/css-modules.md
index 5768e96f0b51..bbee1769788a 100644
--- a/docs/css-modules.md
+++ b/docs/css-modules.md
@@ -8,7 +8,7 @@ Taro 中内置了 [CSS Modules](https://github.com/css-modules/css-modules) 的
 
 小程序端开启
 
-```js
+```js title="config/index.js"
 weapp: {
   module: {
     postcss: {
@@ -27,7 +27,7 @@ weapp: {
 
 H5 端开启
 
-```js
+```js title="config/index.js"
 h5: {
   module: {
     postcss: {
diff --git a/docs/debug-config.md b/docs/debug-config.md
index 603893a8a3d5..b37e194fd3e5 100644
--- a/docs/debug-config.md
+++ b/docs/debug-config.md
@@ -43,7 +43,7 @@ yarn global add rollup
 
 launch.json 有以下预设配置：
 
-```json
+```json title="launch.json"
 {
   // ...
   "configurations": [
@@ -83,7 +83,7 @@ launch.json 有以下预设配置：
 
 可以这样配置 launch.json：
 
-```json
+```json title="launch.json"
 {
   // ...
   "configurations": [
@@ -108,7 +108,7 @@ launch.json 有以下预设配置：
 
 可以这样配置 launch.json：
 
-```json
+```json title="launch.json"
 {
   // ...
   "configurations": [
diff --git a/docs/envs-debug.md b/docs/envs-debug.md
index 6d613d3a7286..f882f09b1b7b 100644
--- a/docs/envs-debug.md
+++ b/docs/envs-debug.md
@@ -3,7 +3,8 @@ title: 多端同步调试
 ---
 
 从 1.3.5 版本开始，可以在 dist 目录下创建一个与编译的目标平台名同名的目录，并将结果放在这个目录下，例如编译到微信小程序，最终结果是在 dist/weapp 目录下，这样做的好处是，各个平台使用独立的目录互不影响，从而达到多端同步调试的目的，在 `config/index.js` 配置如下：
-```
+
+```js title="/config/index.js"
 outputRoot: `dist/${process.env.TARO_ENV}`
 ```
 
diff --git a/docs/envs.md b/docs/envs.md
index 2cf44bb91071..6dd8e972507c 100644
--- a/docs/envs.md
+++ b/docs/envs.md
@@ -81,7 +81,7 @@ import Test from '../../components/test'
 
 增加 `set_title.h5.js`，代码如下
 
-```js
+```js title="set_title.h5.js"
 export default function setTitle (title) {
   document.title = title
 }
@@ -89,7 +89,7 @@ export default function setTitle (title) {
 
 增加 `set_title.weapp.js`，代码如下
 
-```js
+```js title="set_title.weapp.js"
 import Taro from '@tarojs/taro'
 export default function setTitle (title) {
   Taro.setNavigationBarTitle({
@@ -145,7 +145,7 @@ Taro 3 里的多端文件由 [MultiPlatformPlugin](https://github.com/NervJS/tar
 
 假如我们有一个 npm 包名叫 @taro-mobile，需要解析里面的多端文件，可以在 taro 的配置文件中这样修改 MultiPlatformPlugin 的配置：
 
-```js
+```js title="/config/index.js"
 // mini 也可改为 h5，分别对应小程序与 h5 端配置
 mini: {
   webpackChain (chain) {
diff --git a/docs/mini-third-party.md b/docs/mini-third-party.md
index 2e7cda740928..bff39f906793 100644
--- a/docs/mini-third-party.md
+++ b/docs/mini-third-party.md
@@ -18,8 +18,7 @@ Taro 支持使用小程序的第三方组件和插件，使用方式也异常的
 
 > 注意：Taro3 中没有自定义组件，组件是没有配置文件的。usingComponents 必须配置在“页面”的配置文件中。
 
-```js
-// page.config.js
+```js {2} title="page.config.js"
 export default {
   usingComponents: {
     // 定义需要引入的第三方组件
@@ -32,8 +31,7 @@ export default {
 
 2. JSX 中引用
 
-```jsx
-// page.js
+```jsx {14} title="page.js"
 import React, { Component } from 'react'
 import { View } from '@tarojs/components'
 
@@ -83,8 +81,7 @@ page.selectComponent('#mychart-dom-area')
 
 使用插件前，使用者要在 `app.confg.js` 的配置中声明需要使用的插件，例如
 
-```jsx
-// app.config.js
+```jsx title="app.config.js"
 export default {
   plugins: {
     myPlugin: {
diff --git a/docs/miniprogram-plugin.md b/docs/miniprogram-plugin.md
index d6b42783f42d..485c1164bca5 100644
--- a/docs/miniprogram-plugin.md
+++ b/docs/miniprogram-plugin.md
@@ -50,7 +50,7 @@ taro build --plugin weapp --watch
 
 plugin.json 的 **pages** 字段加入页面插件路径：
 
-```json
+```json title="plugin.json"
 {
   "pages": {
     "list": "pages/list/list"
@@ -60,7 +60,7 @@ plugin.json 的 **pages** 字段加入页面插件路径：
 
 页面使用路径： **plugin://[app.js 中注册的插件名]/[plugin.json 中注册的页面名]** 进行跳转。
 
-```jsx
+```jsx {1}
 <Navigator url='plugin://myPlugin/list'>
   Go to pages/list!
 </Navigator>
@@ -70,7 +70,7 @@ plugin.json 的 **pages** 字段加入页面插件路径：
 
 plugin.json 的 **publicComponents** 字段加入组件插件路径：
 
-```json
+```json title="plugin.json"
 {
   "publicComponents": {
     "avatar": "components/avatar/avatar"
@@ -80,7 +80,7 @@ plugin.json 的 **publicComponents** 字段加入组件插件路径：
 
 在页面配置 config.usingComponents 中配置好插件名和插件路径（**plugin://[app.js 中注册的插件名]/[plugin.json 中注册的组件名]**）：
 
-```jsx
+```jsx {4}
 export default class Index extends Component {
   config = {
     usingComponents: {
@@ -114,7 +114,7 @@ const extraProps = {
 
 plugin.json 的 **main** 字段加入接口插件路径：
 
-```json
+```json title="plugin.json"
 {
   "main": "index.js"
 }
diff --git a/docs/nerv.md b/docs/nerv.md
index 0536b3c0040b..f73607c863bb 100644
--- a/docs/nerv.md
+++ b/docs/nerv.md
@@ -8,7 +8,7 @@ title: Nerv
 
 在使用第三方 React 库时，需要在[配置文件](config-detail.md#miniwebpackchain) `webpack.resolve.alias`，把 `react` 和 `react-dom` 映射到 `nervjs`:
 
-```js
+```js title="/config/index.js"
 {
   webpackChain (chain, webpack) {
     chain.merge({
diff --git a/docs/platform-plugin-base.md b/docs/platform-plugin-base.md
index 906b319fc034..a797b2e499ca 100644
--- a/docs/platform-plugin-base.md
+++ b/docs/platform-plugin-base.md
@@ -6,8 +6,7 @@ title: TaroPlatformBase
 
 例如我们创建一个微信小程序平台：
 
-```js
-// program.ts
+```js title="program.ts"
 import { TaroPlatformBase } from '@tarojs/service'
 export default class Weapp extends TaroPlatformBase {
   // ...
@@ -184,8 +183,7 @@ runner(options)
 
 ### 1. 继承基类
 
-```js
-// program.ts
+```js title="program.ts"
 import { TaroPlatformBase } from '@tarojs/service'
 
 class Weapp extends TaroPlatformBase {
@@ -234,8 +232,7 @@ class Weapp extends TaroPlatformBase {
 
 规范：
 
-```js
-//components.ts
+```js title="components.ts"
 import { singleQuote } from '@tarojs/shared'
 
 export const components = {
@@ -319,8 +316,7 @@ internalComponent = {
 
 除了借助 `template.mergeComponents` 进行合并，我们也可以直接修改 `template.internalComponents`。
 
-```js
-// program.ts
+```js title="program.ts"
 class Weapp extends TaroPlatformBase {
   modifyComponents () {
     // 删除 Slider 组件里的一些属性
@@ -376,8 +372,7 @@ class Weapp extends TaroPlatformBase {
 
 我们创建的平台类需要编写一个对外的接口，在其中对编译流程进行设计，最终目标是调用 `@tarojs/mini-runner` 驱动 **Webpack** 开启编译。
 
-```js
-// program.ts
+```js title="program.ts"
 class Weapp extends TaroPlatformBase {
   // ...
   async start () {
diff --git a/docs/platform-plugin-how.md b/docs/platform-plugin-how.md
index 988a719cdc65..12f0ed19ac63 100644
--- a/docs/platform-plugin-how.md
+++ b/docs/platform-plugin-how.md
@@ -41,8 +41,7 @@ title: 编写端平台插件
 
 首先我们需要编写一个 Taro 插件来注册我们的编译平台，如：
 
-```js
-// index.ts
+```js title="index.ts"
 export default (ctx) => {
   ctx.registerPlatform({
     name: 'weapp',
@@ -99,8 +98,7 @@ Taro 小程序相关配置默认放在 `mini` 字段下，因此一般情况配
 
 然后在插件入口函数中调用上述自定义平台类的编译接口：
 
-```js
-// index.ts
+```js title="index.ts"
 import Weapp from './program'
 
 export default (ctx) => {
@@ -221,8 +219,7 @@ export function initNativeApi (taro) {
 
 当前扩展的小程序平台如果需要额外新增 API，建议使用一个 `apis-list.ts` 文件维护：
 
-```js
-// apis-list.ts
+```js title="apis-list.ts"
 // 微信小程序部分扩展 API
 export const _onAndSyncApis = new Set([
   'getAccountInfoSync'
@@ -279,8 +276,7 @@ function processApis (taro) {
 
 注意，Taro 相关的包需要配置 `external`，以免重复打包：
 
-```js
-// rollup.config.js
+```js title="rollup.config.js"
 {
   external: ['@tarojs/shared', '@tarojs/service']
 }
@@ -292,8 +288,7 @@ Taro 核心库维护的类型可能没有包括当前插件新增的组件和 AP
 
 创建一个类型定义文件：
 
-```ts
-// types/shims-iot.d.ts
+```ts title="types/shims-iot.d.ts"
 // 为支付宝 IOT 小程序拓展新增的 API 和组件定义
 import { ComponentType } from 'react'
 import Taro from '@tarojs/taro'
@@ -319,7 +314,6 @@ declare module '@tarojs/components' {
 
 开发者在类型定义文件中引入此文件即可：
 
-```ts
-// global.d.ts
+```ts title="global.d.ts"
 /// <reference path="node_modules/@tarojs/plugin-platform-alipay-iot/types/shims-iot.d.ts" />
 ```
diff --git a/docs/plugin.md b/docs/plugin.md
index 04788fe373e2..ea8bd409a9e2 100644
--- a/docs/plugin.md
+++ b/docs/plugin.md
@@ -20,7 +20,7 @@ Taro 提供了一些官方插件
 
 `plugins` 字段取值为一个数组，配置方式如下：
 
-```js
+```js title="/config/index.js"
 const config = {
   plugins: [
     // 引入 npm 安装的插件
@@ -46,7 +46,7 @@ const config = {
 
 配置[编译配置](./config-detail.md)中的 `presets` 字段，如下。
 
-```js
+```js title="/config/index.js"
 const config = {
   presets: [
     // 引入 npm 安装的插件集
diff --git a/docs/prerender.md b/docs/prerender.md
index 4521678b86d2..ed62c1854835 100644
--- a/docs/prerender.md
+++ b/docs/prerender.md
@@ -18,8 +18,7 @@ Taro Next 在一个页面加载时需要经历以下步骤：
 
 使用 Prerender 非常简单，你可以找到项目根目录下的 `config` 文件夹，根据你的项目情况更改 `index.js`/`dev.js`/`prod.js` 三者中的任意一个[项目配置](./config.md)，在编译时 Taro CLI 会根据你的配置自动启动 prerender：
 
-```js
-// /project/config/prod.js
+```js title="/config/index.js 或 /config/dev.js 或 /config/prod.js "
 const config = {
   ...
   mini: {
diff --git a/docs/redux.md b/docs/redux.md
index 5ded4e3d36a9..d1bf2f9f482e 100644
--- a/docs/redux.md
+++ b/docs/redux.md
@@ -14,8 +14,7 @@ $ npm install --save redux react-redux redux-thunk redux-logger
 
 随后可以在项目 `src` 目录下新增一个 `store` 目录，在目录下增加 `index.js` 文件用来配置 `store`，按自己喜好设置 `redux` 的中间件，例如下面例子中使用 `redux-thunk` 和 `redux-logger` 这两个中间件
 
-```jsx
-// src/store/index.js
+```jsx title="src/store/index.js"
 import { createStore, applyMiddleware, compose } from 'redux'
 import thunkMiddleware from 'redux-thunk'
 import rootReducer from '../reducers'
@@ -48,8 +47,7 @@ export default function configStore () {
 
 接下来在项目入口文件 `app.js` 中使用 `redux` 中提供的 `Provider` 组件将前面写好的 `store` 接入应用中
 
-```jsx
-// src/app.js
+```jsx title="src/app.js"
 import React, { Component } from 'react'
 import { Provider } from 'react-redux'
 
@@ -93,16 +91,14 @@ export default App
 
 新增 `action type`
 
-```jsx
-// src/constants/counter.js
+```jsx title="src/constants/counter.js"
 export const ADD = 'ADD'
 export const MINUS = 'MINUS'
 ```
 
 新增 `reducer` 处理
 
-```jsx
-// src/reducers/counter.js
+```jsx title="src/reducers/counter.js"
 import { ADD, MINUS } from '../constants/counter'
 
 const INITIAL_STATE = {
@@ -127,8 +123,7 @@ export default function counter (state = INITIAL_STATE, action) {
 }
 ```
 
-```jsx
-// src/reducers/index.js
+```jsx title="src/reducers/index.js"
 import { combineReducers } from 'redux'
 import counter from './counter'
 
@@ -140,8 +135,7 @@ export default combineReducers({
 
 新增 `action` 处理
 
-```jsx
-// src/actions/counter.js
+```jsx title="src/actions/counter.js"
 import {
   ADD,
   MINUS
@@ -171,8 +165,7 @@ export function asyncAdd () {
 
 最后，我们可以在页面（或者组件）中进行使用，我们将通过 `redux` 提供的 `connect` 方法将 `redux` 与我们的页面进行连接
 
-```jsx
-// src/pages/index/index.js
+```jsx title="src/pages/index/index.js"
 import React, { Component } from 'react'
 import { connect } from 'react-redux'
 import { View, Button, Text } from '@tarojs/components'
diff --git a/docs/size.md b/docs/size.md
index 79d97d12d89a..a95afcfe6b00 100644
--- a/docs/size.md
+++ b/docs/size.md
@@ -8,7 +8,7 @@ title: 设计稿及尺寸单位
 
 结合过往的开发经验，Taro 默认以 `750px` 作为换算尺寸标准，如果设计稿不是以 `750px` 为标准，则需要在项目配置 `config/index.js` 中进行设置，例如设计稿尺寸是 `640px`，则需要修改项目配置 `config/index.js` 中的 `designWidth` 配置为 `640`：
 
-```jsx
+```jsx title="/config/index.js"
 const config = {
   projectName: 'myProject',
   date: '2018-4-18',
@@ -108,7 +108,7 @@ REM 单位允许的小数位。
 
 配置规则对应到 `config/index.js` ，例如：
 
-```js
+```js {9-14,20-25} title="/config/index.js"
 {
   h5: {
     publicPath: '/',
diff --git a/docs/static-reference.md b/docs/static-reference.md
index 0884d311cabc..aa9533ec9246 100644
--- a/docs/static-reference.md
+++ b/docs/static-reference.md
@@ -70,7 +70,7 @@ Taro 默认会对 `1kb` 大小以下的资源进行转换，如果需要修改
 
 具体配置如下
 
-```javascript
+```js title="/config/index.js"
 // 小程序端样式引用本地资源内联
 url: {
   enable: true,
diff --git a/docs/template.md b/docs/template.md
index 7f904c642cf8..5880ceff125b 100644
--- a/docs/template.md
+++ b/docs/template.md
@@ -87,7 +87,7 @@ zip 包解压出单文件夹，文件夹内包含若干模板。
 
 开发者可以在模板根目录加入 **template_creator.js** 文件，文件对外 exports 包含 handler 与 basePageFiles 字段的对象：
 
-```js
+```js {5,16} title="template_creator.js"
 function createWhenTs (params) {
   return params.typescript ? true : false
 }
@@ -134,8 +134,7 @@ module.exports = {
 
 ##### 例子
 
-```ejs
-// index.js
+```ejs title="index.js"
 <%if (typescript) {-%>
 import Taro, { Component, Config } from '@tarojs/taro'
 <%} else { -%>
@@ -197,8 +196,7 @@ return: boolean/object
 
 当用户选择了使用 typescript 时，才生成 **global.d.ts** 和 **tsconfig.json** 文件。
 
-```js
-// template_creator.js
+```js title="template_creator.js"
 function createWhenTs (params) {
   return params.typescript ? true : false
 }
@@ -221,8 +219,7 @@ basePageFiles 告诉 CLI，当用户使用 `taro create` 命令创建页面时
 
 当用户使用命令 `taro create --page=detail` 时，会创建 **/src/pages/detail/detail.jsx** 与 **/src/pages/detail/detail.css** 两个文件。
 
-```js
-// template_creator.js
+```js title="template_creator.js"
 const handler = {
   '/src/pages/index/index.jsx' ({ pageName }) {
     return { setPageName: `/src/pages/${pageName}/${pageName}.jsx` }
diff --git a/docs/tutorial.md b/docs/tutorial.md
index 542886c0aeb2..24484dce19f7 100644
--- a/docs/tutorial.md
+++ b/docs/tutorial.md
@@ -73,8 +73,7 @@ Taro 中全局配置所包含的配置项及各端支持程度如下
 
 则需要在入口文件配置中写
 
-```jsx
-// app.config.js
+```jsx title="app.config.js"
 export default {
   pages: [
     'pages/index/index',
@@ -124,8 +123,7 @@ export default {
 
 配置示例如下：
 
-```jsx
-// app.config.js
+```jsx title="app.config.js"
 export default {
   pages: [
     'pages/index/index',

From c11fb7f7af275b43d95f1c9316cb4d5a17b5c0d2 Mon Sep 17 00:00:00 2001
From: chenjiajian <798095202@qq.com>
Date: Fri, 27 Nov 2020 22:32:39 +0800
Subject: [PATCH 8/9] docs: update taroize

---
 docs/convert-to-react.md        |  72 ++++++++
 docs/taroize-troubleshooting.md | 291 ++++++++++++++++++++++++++++++++
 docs/taroize.md                 | 252 ++-------------------------
 sidebars.js                     |   9 +
 4 files changed, 390 insertions(+), 234 deletions(-)
 create mode 100644 docs/convert-to-react.md
 create mode 100644 docs/taroize-troubleshooting.md

diff --git a/docs/convert-to-react.md b/docs/convert-to-react.md
new file mode 100644
index 000000000000..f09cf129acb2
--- /dev/null
+++ b/docs/convert-to-react.md
@@ -0,0 +1,72 @@
+---
+title: 转换成 React
+---
+
+## 二次开发
+
+原生小程序代码：
+
+```jsx
+Page({
+  data: {
+    text: 'Hello World'
+  }
+})
+
+<view class="container">
+  {{ text }}
+</view>
+```
+
+转换后：
+
+```javascript
+import { Block, View } from '@tarojs/components'
+import React from 'react'
+import Taro from '@tarojs/taro'
+import withWeapp from '@tarojs/with-weapp'
+import Title from '../../components/title/index'
+import './index.scss'
+
+@withWeapp({
+  data: {
+    text: 'Hello World'
+  }
+})
+class _C extends React.Component {
+  render() {
+    const { text } = this.data
+    return <View className="container">{text}</View>
+  }
+}
+
+export default _C
+```
+
+它看起来就像普通的 Taro 组件，最重要的区别就在于 `@withWeapp()` 这个装饰器，你可以将它理解为转换代码的运行时，`@withWeapp()` 会增加一些原来 Taro 没有方法和属性，例如：
+
+### `this.setData`
+
+转换后的 `this.setData` 的 API 相当于小程序的 `this.setData` 的 polyfill，他和 `this.setState` 最大的区别就在于，`this.setData` 之后 `data` 的数据是同步更新，而渲染是异步更新，而 `setState` 两者都是异步的。
+
+### `this.data` 和 `this.properties`
+
+`this.data` 和 `this.properties` 相当于 Taro 的 `this.state` 和 `this.props` 的 alias，当它们的数据更新时，对应的 `state` 和 `props` 也会同步更新。
+
+### 生命周期
+
+Taro 会将原生小程序的生命周期转换为 Taro 的生命周期，完整对应关系如下：
+
+|小程序生命周期|Taro 生命周期|
+| :-- | :-- |
+| onShow | componentDidShow |
+| onHide | componentDidHide |
+| App.onLaunch | onLaunch |
+| Page.onLoad | onLoad |
+| Page.onReady | onReady |
+| Page.onUnload | componentWillUnmount |
+| Component.created | componentWillMount |
+| Component.attached | componentDidMount |
+| Component.ready | Page.onReady  |
+| Component.detached | componentWillUnmount |
+
diff --git a/docs/taroize-troubleshooting.md b/docs/taroize-troubleshooting.md
new file mode 100644
index 000000000000..6aa3be0c6c3c
--- /dev/null
+++ b/docs/taroize-troubleshooting.md
@@ -0,0 +1,291 @@
+---
+title: Troubleshooting
+---
+
+## 不支持的小程序特性
+
+### 入口 App 对象
+
+|属性|说明|
+|:--|:--|
+|onError||
+|onPageNotFound||
+|onUnhandledRejection||
+|onThemeChange||
+
+### 页面 Page 对象
+
+|属性|说明|
+|:--|:--|
+|selectComponent|建议使用 React ref 重构|
+|selectAllComponents|建议使用 React ref 重构|
+|selectOwnerComponent|建议使用 React ref 重构|
+|groupSetData||
+
+### 自定义组件
+
+|属性|说明|
+|:--|:--|
+|moved||
+|externalClasses|Taro 3 不存在自定义组件，建议规范类名或使用 CSS Module 代替|
+|relations||
+|options||
+|definitionFilter||
+
+### wxml 语法
+
+|属性|说明|
+|:--|:--|
+|循环|[部分语法有限制]|
+|事件|[部分语法有限制](./taroize-troubleshooting#2-事件)|
+|引用|[部分语法有限制](./taroize-troubleshooting#16-include-里不支持使用-template)|
+|wxs|[部分语法有限制](./taroize-troubleshooting#15-不支持-wxs-里的-getregexp-方法)|
+
+## 关键问题
+
+### 1. 没有处理基类
+
+原生开发中，常常会把 App、Page、Component 构造对象的公共逻辑整合到基类中。
+
+如 **Vant-weapp** 中：
+
+```js
+// 组件
+VantComponent({
+  data: {}
+})
+// 基类
+function VantComponent(vantOptions = {}) {
+  // 整合组件独有配置 vantOptions 和公共配置到最终的配置对象 options 中
+  // ...
+
+  // 调用小程序的 Component 方法构造自定义组件
+  Component(options);
+}
+```
+
+Taro 在编译时只能识别出入口、页面、组件文件中存在的 `App()`、`Page()`、`Component()` 调用，使用基类对配置封装后就不存在这些调用。因此编译后的 `withWeapp` 获得的参数是 `{}`。
+
+```js
+VantComponent({
+  data: {}
+})
+// withWeapp 中应该传入小程序配置对象
+@withWeapp({})
+class _C extends React.Component {}
+```
+
+因此我们需要手动修改：
+
+```js
+// 基类
+function VantComponent(vantOptions = {}) {
+  // 整合组件独有配置 vantOptions 和公共配置到最终的配置对象 options 中
+  // ...
+
+  // 调用小程序的 Component 方法构造自定义组件
+  // Component(options);
+  
+  // 1. 基类直接返回整合后的 options
+  return options
+}
+```
+
+
+```js
+// 2. 把基类创建的配置传入 withWeapp：
+const options = VantComponent({
+  data: {}
+})
+@withWeapp(options)
+class _C extends React.Component {}
+```
+
+### 2. 样式作用域
+
+微信小程序中的自定义组件，转换后会生成一个 Taro 中的 React/Vue 组件。
+
+但是 Taro 中使用 React/Vue 开发的组件，编译到小程序平台时，并不会生成对应的小程序自定义组件。
+
+**因此微信小程序自定义组件的样式隔离特性，在转换为 Taro 后就会丢失。**
+
+#### 解决办法：
+
+1. 修改冲突的选择器。
+2. 使用 CSS Modules 进行改写。
+
+## 常见问题
+
+### 1. wxml 语法转换问题
+
+把 `wxml` 转换为 `JSX` 是通过操作 `AST` 实现的，有一些写法可能没有考虑到，或难以适配，从而导致报错。
+
+以下是一些已知问题，需要手动修复：
+
+#### 1.1 组件同时使用 `wx:for` 和 `wx:if` 语句时转换错误
+
+当组件上同时使用了 `wx:for` 和 `wx:if` 语句，并且使用了当前**循环元素 item** 或**循环下标 index** 做判断条件时，转换后会报错。
+
+例如：
+
+```jsx
+// 转换前（注意判断条件使用了循环下标 index）：
+<block wx:for="{{objectArray}}" wx:if="{{index % 2 !== 0}}">
+  <view>objectArray item: {{item.id}}</view>
+</block>
+```
+
+```jsx
+// 转换后：
+{index % 2 !== 0 && (
+  <Block>
+    {objectArray.map((item, index) => {
+      return (
+        <Block>
+          <View>{'objectArray item: ' + item.id}</View>
+        </Block>
+      )
+    })}
+  </Block>
+)}
+```
+
+上例可见，对于条件语句的转换，目前的处理会把条件提取到组件外部。但是如果条件使用了 `item` 或 `index` 时，这样的提取逻辑会导致**变量未定义**的报错。
+
+暂时可以通过手动修复解决：
+
+方法一，修改**编译前**的代码，把循环和条件语句拆开到两个组件中：
+
+```jsx
+<block wx:for="{{objectArray}}">
+  <block wx:if="{{index % 2 !== 0}}">
+    <view>objectArray item: {{item.id}}</view>
+  </block>
+</block>
+```
+
+方法二，修改**编译后**的代码,把条件判断放进循环体中：
+
+```jsx
+<Block>
+  {objectArray.map((item, index) => {
+    return (
+      <Block>
+        {index % 2 !== 0 && <View>{'objectArray item: ' + item.id}</View>}
+      </Block>
+    )
+  })}
+</Block>
+```
+
+#### 1.2 根元素不能含有 `hidden` 属性。
+
+#### 1.3 编译时报错：SyntaxError: Unexpected token
+
+尖括号 “<” 右侧需要留一个空格，[#4243](https://github.com/NervJS/taro/issues/4243)
+
+##### 解决办法：
+
+检查是否存在以下写法：
+
+```jsx
+<view>{{a <4? "1": "2"}}</view>
+```
+
+改为：
+
+```jsx
+<view>{{a < 4? "1": "2"}}</view>
+```
+
+#### 1.4 运行时报错：ReferenceError: item is not defined
+
+查看编译后的 JSX，是否因为漏了从 `this.data` 中取出变量，如：
+
+```
+// 下面的代码没有引用 item
+const { a, b, c } = this.data
+```
+
+##### 解决办法：
+
+`this.data` 中的变量名，不要和用于指定数组当前下标的变量名，默认值为 `item`，或由 `wx:for-index` 具体指定的变量名相同。
+
+
+#### 1.5 不支持 WXS 里的 GetRegExp 方法
+
+使用 `RegExp` 构造正则表达式。
+
+#### 1.6 `<include>` 里不支持使用 `<template>`
+
+#### 1.7 template 里暂不支持使用 catch 事件
+
+### 2. 事件
+
+* 事件不支持绑定字符串。
+* `catchtouchmove` 转换后只能停止回调函数的冒泡，不能阻止滚动穿透。如要阻止滚动穿透，可以手动给编译后的 `View` 组件加上 `catchMove` 属性。
+* 不支持事件捕获阶段。
+* 不支持使用 WXS 函数响应事件。
+* 不支持互斥事件绑定 `mut-bind`。
+* 不支持 `mark` 来识别具体触发事件的 target 节点。
+
+### 3. CommonJS 和 ES 模块化语法不能混用
+
+可能遇到的报错信息：
+
+* Cannot assign to read only property 'exports' of object
+* export '[something]' (imported as '[name]') was not found in '[somePath]'
+
+在使用到小程序 API 的地方，Taro 会把 `wx.api()` 转换为 `Taro.api()`，同时在文件的头部加上 `import Taro from '@tarjs/taro`。
+
+如果此文件原本是使用 **CommonJS** 组织模块，可能会出现问题，需要手动修复。
+
+### 4. selectorQuery API 获取不到 DOM
+
+1. 一定要在 `onReady`、`ready` 生命周期中才能调用小程序 API 获取 DOM。
+2. 不需要调用 `.in(this)` 方法。
+
+### 5. Image 没有处理动态拼接的 src
+
+Taro 会对 `Image` 组件的 src 进行处理：
+
+```jsx
+// 转换前：
+<Image src='../../img/icons/0.png' />
+// 转换后：
+<Image src={require('../../img/icons/0.png')} />
+```
+
+但如果 `src` 是动态拼接的字符串，则需要手动修改：
+
+```jsx
+// 转换前：
+<Image src='../../img/icons/' + chart.id + '.png' />
+// 转换后：
+<Image src='../../img/icons/' + chart.id + '.png' />
+// 手动修改，图片也需要手动拷贝到 taroConert/src 对应目录下：
+<Image src={require('../../img/icons/' + chart.id + '.png')} />
+```
+
+### 6. require 的参数不能是变量
+
+可能遇到的报错信息：
+
+* The "path" argument must be of type string. Received type undefined
+
+不支持转换以下写法，[#4749](https://github.com/NervJS/taro/issues/4749)：
+
+```js
+var pathTest = './test.js'
+var test = require(pathTest)
+```
+
+Taro 目前只能转换 `require` 字符串的写法。
+
+### 7. 没有处理 export from 语法
+
+暂时手动处理，[#5131](https://github.com/NervJS/taro/issues/5131)。
+
+### 8. Issues
+
+反向转换的更多问题，请查阅 Taroize 相关 [Issues](https://github.com/NervJS/taro/issues?q=is%3Aopen+is%3Aissue+label%3AA-taroize)。
diff --git a/docs/taroize.md b/docs/taroize.md
index 1653ac7433d8..59f0af756af1 100644
--- a/docs/taroize.md
+++ b/docs/taroize.md
@@ -2,250 +2,34 @@
 title: 微信小程序转 Taro
 ---
 
-> 自 `v1.2.0` 开始支持此功能
+Taro 可以把**原生微信小程序应用转换为 Taro 项目**，从而使项目成为多端应用。
 
-Taro 可以将你的原生微信小程序应用转换为 Taro 代码，进而你可以通过 `taro build` 的命令将 Taro 代码转换为对应平台的代码，或者对转换后的 Taro 代码进行用 React 的方式进行二次开发。
+转换后的代码可读性高，能够继续使用 **React**（将来支持转换为 **Vue**）进行二次开发。
 
-微信原生小程序转 Taro 的操作非常简单，首先必须安装使用 `npm i -g @tarojs/cli` 安装 Taro 命令行工具，其次在命令行中定位到小程序项目的根目录，根目录中运行：
+### 反向转换步骤
+
+1. 安装 Taro 命令行工具：
 
 ```bash
-$ taro convert
+$ npm i -g @tarojs/cli
 ```
 
-即可完成转换。转换后的代码保存在根目录下的 `taroConvert` 文件夹下。你需要定位到 `taroConvert` 目录执行 `npm install` 命令之后就可以使用 `taro build` 命令编译到对应平台的代码。
-
-## 二次开发
-
-假设已有一个转换后文件如下：
-
-```javascript
-import { View } from '@tarojs/components'
-import Taro from '@tarojs/taro'
-import withWeapp from '@tarojs/with-weapp'
-import './index.scss'
-
-var app = Taro.getApp()
-
-@withWeapp('Page')
-class _C extends Taro.Component {
-  state = {}
-
-  componentWillMount(e) {
-    var orderId = e.id
-    this.data.orderId = orderId
-  }
-
-  componentDidShow() {
-    var that = this
-    Taro.request({
-      url: 'https://api.it120.cc/' + app.globalData.subDomain + '/order/detail',
-      data: {
-        token: Taro.getStorageSync('token'),
-        id: that.data.orderId
-      },
-      success: res => {
-        Taro.hideLoading()
-        if (res.data.code != 0) {
-          Taro.showModal({
-            title: '错误',
-            content: res.data.msg,
-            showCancel: false
-          })
-          return
-        }
-        that.setData({
-          orderDetail: res.data.data,
-          logisticsTraces: res.data.data.logisticsTraces.reverse()
-        })
-      }
-    })
-  }
-
-  config = {
-    navigationBarTitleText: '物流详情'
-  }
+2. 在微信小程序项目的根目录中运行 `convert` 命令进行转换：
 
-  render() {
-    const {
-      orderDetail: orderDetail,
-      logisticsTraces: logisticsTraces
-    } = this.state
-    return (
-      <View className="container">
-        <View className="top-sec">
-          <View className="a-row">
-            <View className="label">物流单号</View>
-            <View className="text">{orderDetail.logistics.trackingNumber}</View>
-          </View>
-          <View className="a-row">
-            <View className="label">物流公司</View>
-            <View className="text">{orderDetail.logistics.shipperName}</View>
-          </View>
-        </View>
-        <View className="sec-wrap">
-          <View className="details-info">
-            <View className="line-box" />
-            {logisticsTraces.map((item, index) => {
-              return (
-                <View className="a-row" key={index}>
-                  <View className="dot">
-                    <View
-                      className="active-dot"
-                      hidden={index == 0 ? false : true}
-                    >
-                      <View className="yuan-red" />
-                    </View>
-                    <View
-                      className="default-dot"
-                      hidden={index == 0 ? true : false}
-                    />
-                  </View>
-                  <View className="info">
-                    <View className="date-box">{item.AcceptTime}</View>
-                    <View className="text">{item.AcceptStation}</View>
-                  </View>
-                </View>
-              )
-            })}
-          </View>
-        </View>
-      </View>
-    )
-  }
-}
-
-export default _C
+```bash
+# 转换后的代码保存在根目录下的 `taroConvert` 文件夹下
+$ taro convert
 ```
 
-它看起来就像普通的 Taro 组件，最重要的区别就在于 `@withWeapp()` 这个装饰器，你可以将它理解为转换代码的运行时，`@withWeapp()` 会增加一些原来 Taro 没有方法和属性，例如：
-
-### `this.setData`
-
-转换后的 `this.setData` 的 API 相当于小程序的 `this.setData` 的 polyfill，他和 `this.setState` 最大的区别就在于，`this.setData` 之后 `data` 的数据是同步更新，而渲染是异步更新，而 `setState` 两者都是异步的。
-
-### `this.data` 和 `this.properties`
-
-`this.data` 和 `this.properties` 相当于 Taro 的 `this.state` 和 `this.props` 的 alias，当它们的数据更新时，对应的 `state` 和 `props` 也会同步更新。
-
-### 生命周期
-
-Taro 会将原始文件的生命周期钩子函数转换为 Taro 的生命周期，完整对应关系如下：
-
-| Page.onLoad | componentWillMount |
-| --: | --: |
-| onShow | componentDidShow |
-| onHide | componentDidHide |
-| onReady | componentDidMount |
-| onUnload | componentWillUnmount |
-| onError | componentDidCatchError |
-| App.onLaunch | componentWillMount |
-| Component.created | componentWillMount |
-| attached | componentDidMount |
-| ready | componentDidMount  |
-| detached | componentWillUnmount |
-| moved |  保留 |
+3. 进入 `taroConvert` 目录，安装依赖：
 
-## 常见问题
-
-### 在小程序 IDE 显示 `_createData` 错误
-
-这个错误通常是由于原始代码的初始 `data` 中没有对应的数据，后来通过 `this.setData` 补充数据造成的。在 Taro 中推荐不管是 `state(data)` 还是 `properties(props)` 都要设置一个默认值。你可以在类构造器或修改原始代码提供一个默认值解决这个问题，这也应该是编写代码的最佳实践。
-
-### 转换 `wxParse` 报错不存在文件
-
-这是由于 `wxParse` 的源码使用了一个[不存在的 `template`](https://github.com/icindy/wxParse/issues/255) 声明造成的。你可以修改 `wxParse` 的源码文件 `wxParse.wxml` 134 行到 207 行：
-
-```html
-<!--循环模版-->
-<template name="wxParse1">
-  <!--<template is="wxParse1" data="{{item}}" />-->
-  <!--判断是否是标签节点-->
-  <block wx:if="{{item.node == 'element'}}">
-    <block wx:if="{{item.tag == 'button'}}">
-      <button type="default" size="mini">
-        <block wx:for="{{item.nodes}}" wx:for-item="item" wx:key="">
-          <template is="wxParse0" data="{{item}}" />
-        </block>
-      </button>
-    </block>
-    <!--li类型-->
-    <block wx:elif="{{item.tag == 'li'}}">
-      <view class="{{item.classStr}} wxParse-li" style="{{item.styleStr}}">
-        <view class="{{item.classStr}} wxParse-li-inner">
-          <view class="{{item.classStr}} wxParse-li-text">
-            <view class="{{item.classStr}} wxParse-li-circle"></view>
-          </view>
-          <view class="{{item.classStr}} wxParse-li-text">
-            <block wx:for="{{item.nodes}}" wx:for-item="item" wx:key="">
-              <template is="wxParse0" data="{{item}}" />
-            </block>
-          </view>
-        </view>
-      </view>
-    </block>
-
-    <!--video类型-->
-    <block wx:elif="{{item.tag == 'video'}}">
-      <template is="wxParseVideo" data="{{item}}" />
-    </block>
-
-    <!--img类型-->
-    <block wx:elif="{{item.tag == 'img'}}">
-      <template is="wxParseImg" data="{{item}}" />
-    </block>
-
-    <!--a类型-->
-    <block wx:elif="{{item.tag == 'a'}}">
-      <view bindtap="wxParseTagATap" class="wxParse-inline {{item.classStr}} wxParse-{{item.tag}}" data-src="{{item.attr.href}}" style="{{item.styleStr}}">
-        <block wx:for="{{item.nodes}}" wx:for-item="item" wx:key="">
-          <template is="wxParse0" data="{{item}}" />
-        </block>
-      </view>
-    </block>
-    <block wx:elif="{{item.tag == 'table'}}">
-      <view class="{{item.classStr}} wxParse-{{item.tag}}" style="{{item.styleStr}}">
-        <block wx:for="{{item.nodes}}" wx:for-item="item" wx:key="">
-          <template is="wxParse0" data="{{item}}" />
-        </block>
-      </view>
-    </block>
-
-    <block wx:elif="{{item.tag == 'br'}}">
-      <template is="WxParseBr"></template>
-    </block>
-    <!--其他块级标签-->
-    <block wx:elif="{{item.tagType == 'block'}}">
-      <view class="{{item.classStr}} wxParse-{{item.tag}}" style="{{item.styleStr}}">
-        <block wx:for="{{item.nodes}}" wx:for-item="item" wx:key="">
-          <template is="wxParse0" data="{{item}}" />
-        </block>
-      </view>
-    </block>
-
-    <!--内联标签-->
-    <view wx:else class="{{item.classStr}} wxParse-{{item.tag}} wxParse-{{item.tagType}}" style="{{item.styleStr}}">
-      <block wx:for="{{item.nodes}}" wx:for-item="item" wx:key="">
-        <template is="wxParse0" data="{{item}}" />
-      </block>
-    </view>
-
-  </block>
-
-  <!--判断是否是文本节点-->
-  <block wx:elif="{{item.node == 'text'}}">
-    <!--如果是，直接进行-->
-    <template is="WxEmojiView" data="{{item}}" />
-  </block>
-
-</template>
+```bash
+$ cd taroConvert
+$ npm install
 ```
 
-把 `<template name="wxParse1">` 的模板内所有 `<template is="wxParse2" data="{{item}}" />` 修改为 `<template is="wxParse0" data="{{item}}" />` 再运行 `taro convert` 即可。这样修改之后还会取消原来 `wxParse` 只能处理 11 级 HTML 嵌套的问题，理论上内存不爆栈可以处理无限级 HTML 嵌套。
-
-### 不支持 `relations` 和 `Behavior`
+4. 运行 `build` 命令，把项目编译到任意平台：
 
-目前转换暂只支持转换 `Page`、`Component` 、`App` 三种构造器创造的小程序组件实例。 `relations` 和 `Behavior` 在其他许多小程序端中还没有对应的实现，我们认为实现这两个功能意义不大。
-
-### 转换 wepy 文件不成功
-
-目前只能支持转换使用原生微信小程序开发的应用。
+```bash
+$ taro build --type [platform]
+```
diff --git a/sidebars.js b/sidebars.js
index 9b0fac2b2b53..2934da0fa06b 100644
--- a/sidebars.js
+++ b/sidebars.js
@@ -31,6 +31,15 @@ module.exports = {
       'virtual-list',
       'mini-third-party',
       'hybrid',
+      {
+        label: '反向转换',
+        type: 'category',
+        items: [
+          'taroize',
+          'convert-to-react',
+          'taroize-troubleshooting'
+        ]
+      },
       {
         label: '扩展编译平台',
         type: 'category',

From 5aab8fb6aabed805105ab4fecbd0c6546aa86204 Mon Sep 17 00:00:00 2001
From: honlyHuang <huangliyn@gmail.com>
Date: Mon, 30 Nov 2020 21:51:33 +0800
Subject: [PATCH 9/9] =?UTF-8?q?docs(sync):=20next=20=E6=9B=B4=E6=96=B0?=
 =?UTF-8?q?=E5=88=B0=203.x?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 versioned_docs/version-3.x/config-detail.md   |   6 +-
 versioned_docs/version-3.x/config.md          |   2 +-
 .../version-3.x/convert-to-react.md           |  76 +++++
 versioned_docs/version-3.x/css-in-js.md       |   6 +-
 versioned_docs/version-3.x/css-modules.md     |   8 +-
 versioned_docs/version-3.x/debug-config.md    |   6 +-
 versioned_docs/version-3.x/envs-debug.md      |   3 +-
 versioned_docs/version-3.x/envs.md            |   6 +-
 versioned_docs/version-3.x/migration.md       |   4 -
 .../version-3.x/mini-third-party.md           |  82 ++---
 .../version-3.x/miniprogram-plugin.md         |  10 +-
 versioned_docs/version-3.x/nerv.md            |   2 +-
 .../version-3.x/platform-plugin-base.md       |  15 +-
 .../version-3.x/platform-plugin-how.md        |  18 +-
 versioned_docs/version-3.x/plugin.md          |   4 +-
 versioned_docs/version-3.x/prerender.md       |   3 +-
 versioned_docs/version-3.x/react.md           |  20 +-
 versioned_docs/version-3.x/redux.md           |  21 +-
 versioned_docs/version-3.x/size.md            |  66 +++-
 .../version-3.x/static-reference.md           |   2 +-
 .../version-3.x/taroize-troubleshooting.md    | 291 ++++++++++++++++++
 versioned_docs/version-3.x/taroize.md         | 252 ++-------------
 versioned_docs/version-3.x/template.md        |  11 +-
 versioned_docs/version-3.x/tutorial.md        |   6 +-
 versioned_docs/version-3.x/vue.md             |   8 +-
 versioned_docs/version-3.x/vue3.md            |   8 +-
 versioned_sidebars/version-3.x-sidebars.json  |  19 ++
 27 files changed, 582 insertions(+), 373 deletions(-)
 create mode 100644 versioned_docs/version-3.x/convert-to-react.md
 create mode 100644 versioned_docs/version-3.x/taroize-troubleshooting.md

diff --git a/versioned_docs/version-3.x/config-detail.md b/versioned_docs/version-3.x/config-detail.md
index 374f770e8690..3676cecaad8d 100644
--- a/versioned_docs/version-3.x/config-detail.md
+++ b/versioned_docs/version-3.x/config-detail.md
@@ -35,7 +35,7 @@ title: 编译配置详情
 
 配置方式可参考 [Webpack DefinePlugin](https://webpack.js.org/plugins/define-plugin/)，例如：
 
-```js
+```js title="/config/index.js"
 module.exports = {
   // ...
   defineConstants: {
@@ -110,7 +110,7 @@ import projectConfig from '@/project'
 
 **config/dev.js**：
 
-```jsx
+```jsx title="/config/dev.js"
 module.exports = {
   // ...
   env: {
@@ -121,7 +121,7 @@ module.exports = {
 
 **config/prod.js**：
 
-```jsx
+```jsx title="config/prod.js"
 module.exports = {
   // ...
   env: {
diff --git a/versioned_docs/version-3.x/config.md b/versioned_docs/version-3.x/config.md
index 33b769ecd449..b29c7b033e60 100644
--- a/versioned_docs/version-3.x/config.md
+++ b/versioned_docs/version-3.x/config.md
@@ -10,7 +10,7 @@ title: 编译配置
 
 ## index.js —— 通用配置
 
-```js
+```js title="/config/index.js"
 const config = {
   // 项目名称
   projectName: 'Awesome Next',
diff --git a/versioned_docs/version-3.x/convert-to-react.md b/versioned_docs/version-3.x/convert-to-react.md
new file mode 100644
index 000000000000..9051e19f4351
--- /dev/null
+++ b/versioned_docs/version-3.x/convert-to-react.md
@@ -0,0 +1,76 @@
+---
+title: 转换成 React
+---
+
+:::caution
+版本 v3.1.0-beta.2 以上支持
+:::
+
+## 二次开发
+
+原生小程序代码：
+
+```jsx
+Page({
+  data: {
+    text: 'Hello World'
+  }
+})
+
+<view class="container">
+  {{ text }}
+</view>
+```
+
+转换后：
+
+```javascript
+import { Block, View } from '@tarojs/components'
+import React from 'react'
+import Taro from '@tarojs/taro'
+import withWeapp from '@tarojs/with-weapp'
+import Title from '../../components/title/index'
+import './index.scss'
+
+@withWeapp({
+  data: {
+    text: 'Hello World'
+  }
+})
+class _C extends React.Component {
+  render() {
+    const { text } = this.data
+    return <View className="container">{text}</View>
+  }
+}
+
+export default _C
+```
+
+它看起来就像普通的 Taro 组件，最重要的区别就在于 `@withWeapp()` 这个装饰器，你可以将它理解为转换代码的运行时，`@withWeapp()` 会增加一些原来 Taro 没有方法和属性，例如：
+
+### `this.setData`
+
+转换后的 `this.setData` 的 API 相当于小程序的 `this.setData` 的 polyfill，他和 `this.setState` 最大的区别就在于，`this.setData` 之后 `data` 的数据是同步更新，而渲染是异步更新，而 `setState` 两者都是异步的。
+
+### `this.data` 和 `this.properties`
+
+`this.data` 和 `this.properties` 相当于 Taro 的 `this.state` 和 `this.props` 的 alias，当它们的数据更新时，对应的 `state` 和 `props` 也会同步更新。
+
+### 生命周期
+
+Taro 会将原生小程序的生命周期转换为 Taro 的生命周期，完整对应关系如下：
+
+|小程序生命周期|Taro 生命周期|
+| :-- | :-- |
+| onShow | componentDidShow |
+| onHide | componentDidHide |
+| App.onLaunch | onLaunch |
+| Page.onLoad | onLoad |
+| Page.onReady | onReady |
+| Page.onUnload | componentWillUnmount |
+| Component.created | componentWillMount |
+| Component.attached | componentDidMount |
+| Component.ready | Page.onReady  |
+| Component.detached | componentWillUnmount |
+
diff --git a/versioned_docs/version-3.x/css-in-js.md b/versioned_docs/version-3.x/css-in-js.md
index 68755d112416..00a2edb8c26b 100644
--- a/versioned_docs/version-3.x/css-in-js.md
+++ b/versioned_docs/version-3.x/css-in-js.md
@@ -16,7 +16,7 @@ $ npm i linaria
 
 其次配置项目根目录的 `babel.config.js`:
 
-```js
+```js title="babel.config.js"
 module.exports = {
   presets: [
     ['taro', {
@@ -30,7 +30,7 @@ module.exports = {
 
 之后配置 `config/index.js`
 
-```js
+```js title="config/index.js"
 const config = {
   mini: {
     webpackChain(chain, webpack) {
@@ -49,7 +49,7 @@ const config = {
 
 最后在项目根目录新建 `linaria.config.js`
 
-```js
+```js title="linaria.config.js"
 // linaria 配置详见 https://github.com/callstack/linaria/blob/master/docs/CONFIGURATION.md#options
 module.exports = {
   rules: [
diff --git a/versioned_docs/version-3.x/css-modules.md b/versioned_docs/version-3.x/css-modules.md
index 7d550484bb36..bbee1769788a 100644
--- a/versioned_docs/version-3.x/css-modules.md
+++ b/versioned_docs/version-3.x/css-modules.md
@@ -8,7 +8,7 @@ Taro 中内置了 [CSS Modules](https://github.com/css-modules/css-modules) 的
 
 小程序端开启
 
-```js
+```js title="config/index.js"
 weapp: {
   module: {
     postcss: {
@@ -27,7 +27,7 @@ weapp: {
 
 H5 端开启
 
-```js
+```js title="config/index.js"
 h5: {
   module: {
     postcss: {
@@ -93,3 +93,7 @@ export default class Test extends Component {
   }
 }
 ```
+
+## 相关阅读
+
+[开源插件 weapp-css-modules - 极致追求，让小程序代码包立减 10% 的插件](https://taro-club.jd.com/topic/2264/%E6%9E%81%E8%87%B4%E8%BF%BD%E6%B1%82-%E8%AE%A9%E5%B0%8F%E7%A8%8B%E5%BA%8F%E4%BB%A3%E7%A0%81%E5%8C%85%E7%AB%8B%E5%87%8F-10-%E7%9A%84%E6%8F%92%E4%BB%B6-weapp-css-modules)
\ No newline at end of file
diff --git a/versioned_docs/version-3.x/debug-config.md b/versioned_docs/version-3.x/debug-config.md
index 603893a8a3d5..b37e194fd3e5 100644
--- a/versioned_docs/version-3.x/debug-config.md
+++ b/versioned_docs/version-3.x/debug-config.md
@@ -43,7 +43,7 @@ yarn global add rollup
 
 launch.json 有以下预设配置：
 
-```json
+```json title="launch.json"
 {
   // ...
   "configurations": [
@@ -83,7 +83,7 @@ launch.json 有以下预设配置：
 
 可以这样配置 launch.json：
 
-```json
+```json title="launch.json"
 {
   // ...
   "configurations": [
@@ -108,7 +108,7 @@ launch.json 有以下预设配置：
 
 可以这样配置 launch.json：
 
-```json
+```json title="launch.json"
 {
   // ...
   "configurations": [
diff --git a/versioned_docs/version-3.x/envs-debug.md b/versioned_docs/version-3.x/envs-debug.md
index 6d613d3a7286..f882f09b1b7b 100644
--- a/versioned_docs/version-3.x/envs-debug.md
+++ b/versioned_docs/version-3.x/envs-debug.md
@@ -3,7 +3,8 @@ title: 多端同步调试
 ---
 
 从 1.3.5 版本开始，可以在 dist 目录下创建一个与编译的目标平台名同名的目录，并将结果放在这个目录下，例如编译到微信小程序，最终结果是在 dist/weapp 目录下，这样做的好处是，各个平台使用独立的目录互不影响，从而达到多端同步调试的目的，在 `config/index.js` 配置如下：
-```
+
+```js title="/config/index.js"
 outputRoot: `dist/${process.env.TARO_ENV}`
 ```
 
diff --git a/versioned_docs/version-3.x/envs.md b/versioned_docs/version-3.x/envs.md
index 2cf44bb91071..6dd8e972507c 100644
--- a/versioned_docs/version-3.x/envs.md
+++ b/versioned_docs/version-3.x/envs.md
@@ -81,7 +81,7 @@ import Test from '../../components/test'
 
 增加 `set_title.h5.js`，代码如下
 
-```js
+```js title="set_title.h5.js"
 export default function setTitle (title) {
   document.title = title
 }
@@ -89,7 +89,7 @@ export default function setTitle (title) {
 
 增加 `set_title.weapp.js`，代码如下
 
-```js
+```js title="set_title.weapp.js"
 import Taro from '@tarojs/taro'
 export default function setTitle (title) {
   Taro.setNavigationBarTitle({
@@ -145,7 +145,7 @@ Taro 3 里的多端文件由 [MultiPlatformPlugin](https://github.com/NervJS/tar
 
 假如我们有一个 npm 包名叫 @taro-mobile，需要解析里面的多端文件，可以在 taro 的配置文件中这样修改 MultiPlatformPlugin 的配置：
 
-```js
+```js title="/config/index.js"
 // mini 也可改为 h5，分别对应小程序与 h5 端配置
 mini: {
   webpackChain (chain) {
diff --git a/versioned_docs/version-3.x/migration.md b/versioned_docs/version-3.x/migration.md
index 820d311f587c..a5dda4281854 100644
--- a/versioned_docs/version-3.x/migration.md
+++ b/versioned_docs/version-3.x/migration.md
@@ -325,7 +325,3 @@ import { useState, useEffect } from 'react' // 框架 Hooks （基础 Hooks）
 ## $scope 和 $componentType
 
 由于 Taro Next 没有自定义组件，所以也没有了 `this.$scope` 和 `this.$componentType` 的概念。`getCurrentInstance().page` 可以返回当前小程序页面的实例。
-
-## 相关阅读
-
-[Taro 版本升级权威指南](/blog/2020-09-01-taro-versions)
\ No newline at end of file
diff --git a/versioned_docs/version-3.x/mini-third-party.md b/versioned_docs/version-3.x/mini-third-party.md
index 249dcdb29b46..bff39f906793 100644
--- a/versioned_docs/version-3.x/mini-third-party.md
+++ b/versioned_docs/version-3.x/mini-third-party.md
@@ -2,74 +2,86 @@
 title: 使用小程序原生第三方组件和插件
 ---
 
-Taro 支持使用小程序的第三方组件和插件，例如 [echarts-for-weixin](https://github.com/ecomfe/echarts-for-weixin)，使用方式也异常的简单。
+Taro 支持使用小程序的第三方组件和插件，使用方式也异常的简单。
 
-**但是值得注意的是，如果在 Taro 项目引用了小程序原生的第三方组件和插件，那么该项目将不再具备多端转换的能力，例如，如果使用了微信小程序的第三方组件，那么项目只能转换成微信小程序，转义成其他平台会失效，使用其他小程序原生组件同理**。
+> 注意：如果在 Taro 项目引用了小程序原生的第三方组件和插件，那么该项目将**不再具备多端转换的能力**，例如，如果使用了微信小程序的第三方组件，那么项目只能转换成微信小程序，转义成其他平台会失效，使用其他小程序原生组件同理。
 
-## 引入第三方组件
+## 使用第三方原生组件
 
-首先需要将第三方组件库下载到项目的 `src` 目录下，随后在页面或者组件里通过配置 `usingComponents` 指定需要引用的第三方组件即可，组件调用的时候需要按照 JSX 的使用规范来进行传参和事件绑定。
+首先需要将第三方组件库下载到项目的 `src` 目录下，随后在页面或者组件里通过配置 `usingComponents` 指定需要引用的第三方组件即可。
 
-`usingComponents` 指定的第三方组件名字需要以**小写**开头。
+组件调用的时候需要**按照 JSX 的使用规范**来进行传参和事件绑定。
 
-```jsx
-import Taro, { Component } from '@tarojs/taro'
-import { View } from '@tarojs/components'
+### 使用方法
 
-function initChart () {
-  // ....
-}
+1. 在页面配置文件中配置 `usingComponents` 属性。
 
-export default class Menu extends Component {
-  static defaultProps = {
-    data: []
-  }
+> 注意：Taro3 中没有自定义组件，组件是没有配置文件的。usingComponents 必须配置在“页面”的配置文件中。
 
-  constructor (props) {
-    super(props)
-    this.state = {
-      ec: {
-        onInit: initChart
-      }
-    }
+```js {2} title="page.config.js"
+export default {
+  usingComponents: {
+    // 定义需要引入的第三方组件
+    // 1. key 值指定第三方组件名字，以小写开头
+    // 2. value 值指定第三方组件 js 文件的相对路径
+    'ec-canvas': '../../components/ec-canvas/ec-canvas'
   }
+}
+```
+
+2. JSX 中引用
 
-  componentWillMount () {
-    console.log(this) // this -> 组件 Menu 的实例
+```jsx {14} title="page.js"
+import React, { Component } from 'react'
+import { View } from '@tarojs/components'
+
+export default class Index extends Component {
+  this.state = {
+    ec: {
+      onInit: function () {}
+    }
   }
 
   render () {
     return (
       <View>
-        <ec-canvas id='mychart-dom-area' canvas-id='mychart-area' ec={this.state.ec}></ec-canvas>
+        <ec-canvas id='mychart-dom-area' canvas-id='mychart-area' ec={this.state.ec} />
       </View>
     )
   }
 }
+```
 
-// menu.config.js
+### 事件
 
-export default {
-  // 定义需要引入的第三方组件
-  usingComponents: {
-    'ec-canvas': '../../components/ec-canvas/ec-canvas' // 书写第三方组件的相对路径
-  }
-}
+事件以 `on` 开头，取代原生绑定语法中的 `bind`。
+
+### selectComponent
+
+可以使用小程序页面实例的 `selectComponent` API 获取第三方原生组件的实例。
+
+```js
+import { getCurrentInstance } from '@tarojs/taro'
+
+const { page } = getCurrentInstance()
+page.selectComponent('#mychart-dom-area')
 ```
 
 ### 使用 Slot
 
 在 React 中使用 `<slot name="slotName" />`（首字母小写），在 Vue 中使用 `<slot-view name="slotName" />`（由于 `slot` 在 Vue 中是内置组件）。
 
+### 使用 vant-weapp
+
+使用 `vant-weapp` 第三方原生组件库：[示例项目](https://github.com/NervJS/taro3-vant-sample)。
 
-## 引入插件
+## 使用小程序插件
 
 ### 引入插件代码包
 
 使用插件前，使用者要在 `app.confg.js` 的配置中声明需要使用的插件，例如
 
-```jsx
-// app.config.js
+```jsx title="app.config.js"
 export default {
   plugins: {
     myPlugin: {
diff --git a/versioned_docs/version-3.x/miniprogram-plugin.md b/versioned_docs/version-3.x/miniprogram-plugin.md
index d6b42783f42d..485c1164bca5 100644
--- a/versioned_docs/version-3.x/miniprogram-plugin.md
+++ b/versioned_docs/version-3.x/miniprogram-plugin.md
@@ -50,7 +50,7 @@ taro build --plugin weapp --watch
 
 plugin.json 的 **pages** 字段加入页面插件路径：
 
-```json
+```json title="plugin.json"
 {
   "pages": {
     "list": "pages/list/list"
@@ -60,7 +60,7 @@ plugin.json 的 **pages** 字段加入页面插件路径：
 
 页面使用路径： **plugin://[app.js 中注册的插件名]/[plugin.json 中注册的页面名]** 进行跳转。
 
-```jsx
+```jsx {1}
 <Navigator url='plugin://myPlugin/list'>
   Go to pages/list!
 </Navigator>
@@ -70,7 +70,7 @@ plugin.json 的 **pages** 字段加入页面插件路径：
 
 plugin.json 的 **publicComponents** 字段加入组件插件路径：
 
-```json
+```json title="plugin.json"
 {
   "publicComponents": {
     "avatar": "components/avatar/avatar"
@@ -80,7 +80,7 @@ plugin.json 的 **publicComponents** 字段加入组件插件路径：
 
 在页面配置 config.usingComponents 中配置好插件名和插件路径（**plugin://[app.js 中注册的插件名]/[plugin.json 中注册的组件名]**）：
 
-```jsx
+```jsx {4}
 export default class Index extends Component {
   config = {
     usingComponents: {
@@ -114,7 +114,7 @@ const extraProps = {
 
 plugin.json 的 **main** 字段加入接口插件路径：
 
-```json
+```json title="plugin.json"
 {
   "main": "index.js"
 }
diff --git a/versioned_docs/version-3.x/nerv.md b/versioned_docs/version-3.x/nerv.md
index 0536b3c0040b..f73607c863bb 100644
--- a/versioned_docs/version-3.x/nerv.md
+++ b/versioned_docs/version-3.x/nerv.md
@@ -8,7 +8,7 @@ title: Nerv
 
 在使用第三方 React 库时，需要在[配置文件](config-detail.md#miniwebpackchain) `webpack.resolve.alias`，把 `react` 和 `react-dom` 映射到 `nervjs`:
 
-```js
+```js title="/config/index.js"
 {
   webpackChain (chain, webpack) {
     chain.merge({
diff --git a/versioned_docs/version-3.x/platform-plugin-base.md b/versioned_docs/version-3.x/platform-plugin-base.md
index 906b319fc034..a797b2e499ca 100644
--- a/versioned_docs/version-3.x/platform-plugin-base.md
+++ b/versioned_docs/version-3.x/platform-plugin-base.md
@@ -6,8 +6,7 @@ title: TaroPlatformBase
 
 例如我们创建一个微信小程序平台：
 
-```js
-// program.ts
+```js title="program.ts"
 import { TaroPlatformBase } from '@tarojs/service'
 export default class Weapp extends TaroPlatformBase {
   // ...
@@ -184,8 +183,7 @@ runner(options)
 
 ### 1. 继承基类
 
-```js
-// program.ts
+```js title="program.ts"
 import { TaroPlatformBase } from '@tarojs/service'
 
 class Weapp extends TaroPlatformBase {
@@ -234,8 +232,7 @@ class Weapp extends TaroPlatformBase {
 
 规范：
 
-```js
-//components.ts
+```js title="components.ts"
 import { singleQuote } from '@tarojs/shared'
 
 export const components = {
@@ -319,8 +316,7 @@ internalComponent = {
 
 除了借助 `template.mergeComponents` 进行合并，我们也可以直接修改 `template.internalComponents`。
 
-```js
-// program.ts
+```js title="program.ts"
 class Weapp extends TaroPlatformBase {
   modifyComponents () {
     // 删除 Slider 组件里的一些属性
@@ -376,8 +372,7 @@ class Weapp extends TaroPlatformBase {
 
 我们创建的平台类需要编写一个对外的接口，在其中对编译流程进行设计，最终目标是调用 `@tarojs/mini-runner` 驱动 **Webpack** 开启编译。
 
-```js
-// program.ts
+```js title="program.ts"
 class Weapp extends TaroPlatformBase {
   // ...
   async start () {
diff --git a/versioned_docs/version-3.x/platform-plugin-how.md b/versioned_docs/version-3.x/platform-plugin-how.md
index 988a719cdc65..12f0ed19ac63 100644
--- a/versioned_docs/version-3.x/platform-plugin-how.md
+++ b/versioned_docs/version-3.x/platform-plugin-how.md
@@ -41,8 +41,7 @@ title: 编写端平台插件
 
 首先我们需要编写一个 Taro 插件来注册我们的编译平台，如：
 
-```js
-// index.ts
+```js title="index.ts"
 export default (ctx) => {
   ctx.registerPlatform({
     name: 'weapp',
@@ -99,8 +98,7 @@ Taro 小程序相关配置默认放在 `mini` 字段下，因此一般情况配
 
 然后在插件入口函数中调用上述自定义平台类的编译接口：
 
-```js
-// index.ts
+```js title="index.ts"
 import Weapp from './program'
 
 export default (ctx) => {
@@ -221,8 +219,7 @@ export function initNativeApi (taro) {
 
 当前扩展的小程序平台如果需要额外新增 API，建议使用一个 `apis-list.ts` 文件维护：
 
-```js
-// apis-list.ts
+```js title="apis-list.ts"
 // 微信小程序部分扩展 API
 export const _onAndSyncApis = new Set([
   'getAccountInfoSync'
@@ -279,8 +276,7 @@ function processApis (taro) {
 
 注意，Taro 相关的包需要配置 `external`，以免重复打包：
 
-```js
-// rollup.config.js
+```js title="rollup.config.js"
 {
   external: ['@tarojs/shared', '@tarojs/service']
 }
@@ -292,8 +288,7 @@ Taro 核心库维护的类型可能没有包括当前插件新增的组件和 AP
 
 创建一个类型定义文件：
 
-```ts
-// types/shims-iot.d.ts
+```ts title="types/shims-iot.d.ts"
 // 为支付宝 IOT 小程序拓展新增的 API 和组件定义
 import { ComponentType } from 'react'
 import Taro from '@tarojs/taro'
@@ -319,7 +314,6 @@ declare module '@tarojs/components' {
 
 开发者在类型定义文件中引入此文件即可：
 
-```ts
-// global.d.ts
+```ts title="global.d.ts"
 /// <reference path="node_modules/@tarojs/plugin-platform-alipay-iot/types/shims-iot.d.ts" />
 ```
diff --git a/versioned_docs/version-3.x/plugin.md b/versioned_docs/version-3.x/plugin.md
index 04788fe373e2..ea8bd409a9e2 100644
--- a/versioned_docs/version-3.x/plugin.md
+++ b/versioned_docs/version-3.x/plugin.md
@@ -20,7 +20,7 @@ Taro 提供了一些官方插件
 
 `plugins` 字段取值为一个数组，配置方式如下：
 
-```js
+```js title="/config/index.js"
 const config = {
   plugins: [
     // 引入 npm 安装的插件
@@ -46,7 +46,7 @@ const config = {
 
 配置[编译配置](./config-detail.md)中的 `presets` 字段，如下。
 
-```js
+```js title="/config/index.js"
 const config = {
   presets: [
     // 引入 npm 安装的插件集
diff --git a/versioned_docs/version-3.x/prerender.md b/versioned_docs/version-3.x/prerender.md
index 4521678b86d2..ed62c1854835 100644
--- a/versioned_docs/version-3.x/prerender.md
+++ b/versioned_docs/version-3.x/prerender.md
@@ -18,8 +18,7 @@ Taro Next 在一个页面加载时需要经历以下步骤：
 
 使用 Prerender 非常简单，你可以找到项目根目录下的 `config` 文件夹，根据你的项目情况更改 `index.js`/`dev.js`/`prod.js` 三者中的任意一个[项目配置](./config.md)，在编译时 Taro CLI 会根据你的配置自动启动 prerender：
 
-```js
-// /project/config/prod.js
+```js title="/config/index.js 或 /config/dev.js 或 /config/prod.js "
 const config = {
   ...
   mini: {
diff --git a/versioned_docs/version-3.x/react.md b/versioned_docs/version-3.x/react.md
index f2e1cf468029..5439f718f004 100644
--- a/versioned_docs/version-3.x/react.md
+++ b/versioned_docs/version-3.x/react.md
@@ -8,7 +8,7 @@ title: React
 
 每一个 Taro 应用都需要一个入口组件用来注册应用，入口文件默认是 `src` 目录下的 `app.js`，在 Taro 中使用 React，入口组件必须导出一个 React 组件，在入口组件中我们可以设置全局状态或访问小程序入口实例的生命周期：
 
-```jsx
+```jsx title="app.js"
 import React, { Component } from 'react'
 // 假设我们要使用 Redux
 import { Provider } from 'react-redux'
@@ -46,8 +46,7 @@ export default App
 
 对于一个入口文件(例如`app.jsx`)而言，我们可以新增一个 `app.config.js` 的文件进行全局配置，`app.config.js` 的默认导出就是全局配置，配置规范基于微信小程序的[全局配置](https://developers.weixin.qq.com/miniprogram/dev/framework/config.html#%E5%85%A8%E5%B1%80%E9%85%8D%E7%BD%AE)进行制定，所有平台进行统一:
 
-```js
-// app.config.js
+```js  title="app.config.js"
 export default {
   pages: [
     'pages/index/index'
@@ -125,9 +124,9 @@ export default {
 
 程序发生脚本错误或 API 调用报错时触发，微信小程序中也可以使用 `Taro.onError` 绑定监听
 
-#### componentDidNotFound(Object)
+#### onPageNotFound(Object)
 
-> 在微信/字节跳动小程序中这一生命周期方法对应 `onPageNotFound`，其他端尚未实现<br/>
+> 在微信/字节跳动小程序中这一生命周期方法对应 `onPageNotFound`，H5 端也支持，其他端尚未实现<br/>
 > 微信小程序中，基础库 1.9.90 开始支持
 
 程序要打开的页面不存在时触发，微信小程序中也可以使用 `Taro.onPageNotFound` 绑定监听
@@ -190,8 +189,7 @@ export default Index
 ### 配置文件
 和入口组件一样，对于一个页面文件(例如`./pages/index/index.jsx`)而言，我们可以新增一个 `./pages/index/index.config.js` 的文件进行页面配置，`index.config.js` 的默认导出就是[页面配置](https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/app.html):
 
-```js
-// ./pages/index/index.jsx
+```js title="./pages/index/index.jsx"
 export default {
   navigationBarTitleText: '首页'
 }
@@ -325,8 +323,7 @@ Object 参数说明：
 
 示例代码
 
-```jsx
-// page.js
+```jsx title="page.js"
 export default class Index extends Component {
   onShareAppMessage (res) {
     if (res.from === 'button') {
@@ -417,8 +414,7 @@ onAddToFavorites(res) {
 | query | 自定义页面路径中携带的参数 | 当前页面路径携带的参数 |
 | imageUrl | 自定义图片路径，可以是本地文件或者网络图片。支持 PNG 及 JPG，显示图片长宽比是 1:1。 | 默认使用小程序 Logo |
 
-```jsx
-// page.js
+```jsx title="page.js"
 class Index extends Component {
   onShareTimeline () {
     console.log('onShareTimeline')
@@ -523,6 +519,6 @@ function Comp () {
 
 ## 常见问题
 
-* `useEffect`、`componentDidMount` 中获取不到渲染层元素信息，[#7116](https://github.com/NervJS/taro/issues/7116)
+* `useEffect`、`componentDidMount` 中获取不到渲染层元素信息，[7116](https://github.com/NervJS/taro/issues/7116)
 * `useEffect` 或 `useLayoutEffect` 中获取不到组件最新的宽高，[#7491](https://github.com/NervJS/taro/issues/7491)
 * 嵌套层级较深时，使用 `selectorQuery` 无法查询到子元素，[#7411](https://github.com/NervJS/taro/issues/7411)
diff --git a/versioned_docs/version-3.x/redux.md b/versioned_docs/version-3.x/redux.md
index 5ded4e3d36a9..d1bf2f9f482e 100644
--- a/versioned_docs/version-3.x/redux.md
+++ b/versioned_docs/version-3.x/redux.md
@@ -14,8 +14,7 @@ $ npm install --save redux react-redux redux-thunk redux-logger
 
 随后可以在项目 `src` 目录下新增一个 `store` 目录，在目录下增加 `index.js` 文件用来配置 `store`，按自己喜好设置 `redux` 的中间件，例如下面例子中使用 `redux-thunk` 和 `redux-logger` 这两个中间件
 
-```jsx
-// src/store/index.js
+```jsx title="src/store/index.js"
 import { createStore, applyMiddleware, compose } from 'redux'
 import thunkMiddleware from 'redux-thunk'
 import rootReducer from '../reducers'
@@ -48,8 +47,7 @@ export default function configStore () {
 
 接下来在项目入口文件 `app.js` 中使用 `redux` 中提供的 `Provider` 组件将前面写好的 `store` 接入应用中
 
-```jsx
-// src/app.js
+```jsx title="src/app.js"
 import React, { Component } from 'react'
 import { Provider } from 'react-redux'
 
@@ -93,16 +91,14 @@ export default App
 
 新增 `action type`
 
-```jsx
-// src/constants/counter.js
+```jsx title="src/constants/counter.js"
 export const ADD = 'ADD'
 export const MINUS = 'MINUS'
 ```
 
 新增 `reducer` 处理
 
-```jsx
-// src/reducers/counter.js
+```jsx title="src/reducers/counter.js"
 import { ADD, MINUS } from '../constants/counter'
 
 const INITIAL_STATE = {
@@ -127,8 +123,7 @@ export default function counter (state = INITIAL_STATE, action) {
 }
 ```
 
-```jsx
-// src/reducers/index.js
+```jsx title="src/reducers/index.js"
 import { combineReducers } from 'redux'
 import counter from './counter'
 
@@ -140,8 +135,7 @@ export default combineReducers({
 
 新增 `action` 处理
 
-```jsx
-// src/actions/counter.js
+```jsx title="src/actions/counter.js"
 import {
   ADD,
   MINUS
@@ -171,8 +165,7 @@ export function asyncAdd () {
 
 最后，我们可以在页面（或者组件）中进行使用，我们将通过 `redux` 提供的 `connect` 方法将 `redux` 与我们的页面进行连接
 
-```jsx
-// src/pages/index/index.js
+```jsx title="src/pages/index/index.js"
 import React, { Component } from 'react'
 import { connect } from 'react-redux'
 import { View, Button, Text } from '@tarojs/components'
diff --git a/versioned_docs/version-3.x/size.md b/versioned_docs/version-3.x/size.md
index 91e167157728..a95afcfe6b00 100644
--- a/versioned_docs/version-3.x/size.md
+++ b/versioned_docs/version-3.x/size.md
@@ -8,7 +8,7 @@ title: 设计稿及尺寸单位
 
 结合过往的开发经验，Taro 默认以 `750px` 作为换算尺寸标准，如果设计稿不是以 `750px` 为标准，则需要在项目配置 `config/index.js` 中进行设置，例如设计稿尺寸是 `640px`，则需要修改项目配置 `config/index.js` 中的 `designWidth` 配置为 `640`：
 
-```jsx
+```jsx title="/config/index.js"
 const config = {
   projectName: 'myProject',
   date: '2018-4-18',
@@ -30,7 +30,7 @@ const DEVICE_RATIO = {
 建议使用 Taro 时，设计稿以 iPhone 6 `750px` 作为设计尺寸标准。
 
 如果你的设计稿是 `375` ，不在以上三种之中，那么你需要把 `designWidth` 配置为 `375`，同时在 `DEVICE_RATIO` 中添加换算规则如下：
-```jsx
+```jsx {5}
 const DEVICE_RATIO = {
   '640': 2.34 / 2,
   '750': 1,
@@ -108,7 +108,7 @@ REM 单位允许的小数位。
 
 配置规则对应到 `config/index.js` ，例如：
 
-```js
+```js {9-14,20-25} title="/config/index.js"
 {
   h5: {
     publicPath: '/',
@@ -139,9 +139,9 @@ REM 单位允许的小数位。
 }
 ```
 
-## 忽略
+## CSS 编译时忽略（过滤）
 
-### 属性
+### 忽略单个属性
 
 当前忽略单个属性的最简单的方法，就是 px 单位使用大写字母。
 
@@ -158,6 +158,58 @@ REM 单位允许的小数位。
 }
 ```
 
-### 文件
+### 忽略样式文件
+
+对于头部包含注释 `/*postcss-pxtransform disable*/` 的文件，插件不予处理。
+
+### 忽略样式举例
+
+样式文件里多行文本省略时我们一般如下面的代码：
+
+```css {3}
+.textHide {
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp:2;
+  text-overflow: ellipsis;
+  overflow: hidden;
+}
+```
+
+但 Taro 编译后少了 `-webkit-box-orient: vertical;` 这条样式属性，此时我们需要忽略掉这条样式
+
+#### 忽略样式方法 1 加入 CSS 注释强制声明忽略下一行
+
+```css {1}
+/* autoprefixer: ignore next */
+-webkit-box-orient: vertical;
+```
+
+#### 忽略样式方法 2 加入 CSS 注释强制声明注释中间多行
+
+```css {1,3}
+/* autoprefixer: off */
+-webkit-box-orient: vertical;
+/* autoprefixer: on */
+```
+
+#### 忽略样式方法 3 写成行内样式
+
+```HTML {2-9}
+<View 
+  style={{
+    display: '-webkit-box',
+    '-webkit-box-orient': 'vertical',
+    '-webkit-line-clamp': 2,
+    'text-overflow': 'ellipsis',
+    overflow: 'hidden',
+    'line-height': 2
+  }}
+>
+  这是要省略的内容这是要省略的内容这是要省略的内容
+</View>
+```
+
+### 相关链接
 
-对于头部包含注释 `/*postcss-pxtransform disable*/` 的文件，插件不予处理。
\ No newline at end of file
+- [Taro多行文本省略不生效](https://taro-club.jd.com/topic/2270/taro%E5%A4%9A%E8%A1%8C%E6%96%87%E6%9C%AC%E7%9C%81%E7%95%A5%E4%B8%8D%E7%94%9F%E6%95%88)
\ No newline at end of file
diff --git a/versioned_docs/version-3.x/static-reference.md b/versioned_docs/version-3.x/static-reference.md
index 0884d311cabc..aa9533ec9246 100644
--- a/versioned_docs/version-3.x/static-reference.md
+++ b/versioned_docs/version-3.x/static-reference.md
@@ -70,7 +70,7 @@ Taro 默认会对 `1kb` 大小以下的资源进行转换，如果需要修改
 
 具体配置如下
 
-```javascript
+```js title="/config/index.js"
 // 小程序端样式引用本地资源内联
 url: {
   enable: true,
diff --git a/versioned_docs/version-3.x/taroize-troubleshooting.md b/versioned_docs/version-3.x/taroize-troubleshooting.md
new file mode 100644
index 000000000000..6aa3be0c6c3c
--- /dev/null
+++ b/versioned_docs/version-3.x/taroize-troubleshooting.md
@@ -0,0 +1,291 @@
+---
+title: Troubleshooting
+---
+
+## 不支持的小程序特性
+
+### 入口 App 对象
+
+|属性|说明|
+|:--|:--|
+|onError||
+|onPageNotFound||
+|onUnhandledRejection||
+|onThemeChange||
+
+### 页面 Page 对象
+
+|属性|说明|
+|:--|:--|
+|selectComponent|建议使用 React ref 重构|
+|selectAllComponents|建议使用 React ref 重构|
+|selectOwnerComponent|建议使用 React ref 重构|
+|groupSetData||
+
+### 自定义组件
+
+|属性|说明|
+|:--|:--|
+|moved||
+|externalClasses|Taro 3 不存在自定义组件，建议规范类名或使用 CSS Module 代替|
+|relations||
+|options||
+|definitionFilter||
+
+### wxml 语法
+
+|属性|说明|
+|:--|:--|
+|循环|[部分语法有限制]|
+|事件|[部分语法有限制](./taroize-troubleshooting#2-事件)|
+|引用|[部分语法有限制](./taroize-troubleshooting#16-include-里不支持使用-template)|
+|wxs|[部分语法有限制](./taroize-troubleshooting#15-不支持-wxs-里的-getregexp-方法)|
+
+## 关键问题
+
+### 1. 没有处理基类
+
+原生开发中，常常会把 App、Page、Component 构造对象的公共逻辑整合到基类中。
+
+如 **Vant-weapp** 中：
+
+```js
+// 组件
+VantComponent({
+  data: {}
+})
+// 基类
+function VantComponent(vantOptions = {}) {
+  // 整合组件独有配置 vantOptions 和公共配置到最终的配置对象 options 中
+  // ...
+
+  // 调用小程序的 Component 方法构造自定义组件
+  Component(options);
+}
+```
+
+Taro 在编译时只能识别出入口、页面、组件文件中存在的 `App()`、`Page()`、`Component()` 调用，使用基类对配置封装后就不存在这些调用。因此编译后的 `withWeapp` 获得的参数是 `{}`。
+
+```js
+VantComponent({
+  data: {}
+})
+// withWeapp 中应该传入小程序配置对象
+@withWeapp({})
+class _C extends React.Component {}
+```
+
+因此我们需要手动修改：
+
+```js
+// 基类
+function VantComponent(vantOptions = {}) {
+  // 整合组件独有配置 vantOptions 和公共配置到最终的配置对象 options 中
+  // ...
+
+  // 调用小程序的 Component 方法构造自定义组件
+  // Component(options);
+  
+  // 1. 基类直接返回整合后的 options
+  return options
+}
+```
+
+
+```js
+// 2. 把基类创建的配置传入 withWeapp：
+const options = VantComponent({
+  data: {}
+})
+@withWeapp(options)
+class _C extends React.Component {}
+```
+
+### 2. 样式作用域
+
+微信小程序中的自定义组件，转换后会生成一个 Taro 中的 React/Vue 组件。
+
+但是 Taro 中使用 React/Vue 开发的组件，编译到小程序平台时，并不会生成对应的小程序自定义组件。
+
+**因此微信小程序自定义组件的样式隔离特性，在转换为 Taro 后就会丢失。**
+
+#### 解决办法：
+
+1. 修改冲突的选择器。
+2. 使用 CSS Modules 进行改写。
+
+## 常见问题
+
+### 1. wxml 语法转换问题
+
+把 `wxml` 转换为 `JSX` 是通过操作 `AST` 实现的，有一些写法可能没有考虑到，或难以适配，从而导致报错。
+
+以下是一些已知问题，需要手动修复：
+
+#### 1.1 组件同时使用 `wx:for` 和 `wx:if` 语句时转换错误
+
+当组件上同时使用了 `wx:for` 和 `wx:if` 语句，并且使用了当前**循环元素 item** 或**循环下标 index** 做判断条件时，转换后会报错。
+
+例如：
+
+```jsx
+// 转换前（注意判断条件使用了循环下标 index）：
+<block wx:for="{{objectArray}}" wx:if="{{index % 2 !== 0}}">
+  <view>objectArray item: {{item.id}}</view>
+</block>
+```
+
+```jsx
+// 转换后：
+{index % 2 !== 0 && (
+  <Block>
+    {objectArray.map((item, index) => {
+      return (
+        <Block>
+          <View>{'objectArray item: ' + item.id}</View>
+        </Block>
+      )
+    })}
+  </Block>
+)}
+```
+
+上例可见，对于条件语句的转换，目前的处理会把条件提取到组件外部。但是如果条件使用了 `item` 或 `index` 时，这样的提取逻辑会导致**变量未定义**的报错。
+
+暂时可以通过手动修复解决：
+
+方法一，修改**编译前**的代码，把循环和条件语句拆开到两个组件中：
+
+```jsx
+<block wx:for="{{objectArray}}">
+  <block wx:if="{{index % 2 !== 0}}">
+    <view>objectArray item: {{item.id}}</view>
+  </block>
+</block>
+```
+
+方法二，修改**编译后**的代码,把条件判断放进循环体中：
+
+```jsx
+<Block>
+  {objectArray.map((item, index) => {
+    return (
+      <Block>
+        {index % 2 !== 0 && <View>{'objectArray item: ' + item.id}</View>}
+      </Block>
+    )
+  })}
+</Block>
+```
+
+#### 1.2 根元素不能含有 `hidden` 属性。
+
+#### 1.3 编译时报错：SyntaxError: Unexpected token
+
+尖括号 “<” 右侧需要留一个空格，[#4243](https://github.com/NervJS/taro/issues/4243)
+
+##### 解决办法：
+
+检查是否存在以下写法：
+
+```jsx
+<view>{{a <4? "1": "2"}}</view>
+```
+
+改为：
+
+```jsx
+<view>{{a < 4? "1": "2"}}</view>
+```
+
+#### 1.4 运行时报错：ReferenceError: item is not defined
+
+查看编译后的 JSX，是否因为漏了从 `this.data` 中取出变量，如：
+
+```
+// 下面的代码没有引用 item
+const { a, b, c } = this.data
+```
+
+##### 解决办法：
+
+`this.data` 中的变量名，不要和用于指定数组当前下标的变量名，默认值为 `item`，或由 `wx:for-index` 具体指定的变量名相同。
+
+
+#### 1.5 不支持 WXS 里的 GetRegExp 方法
+
+使用 `RegExp` 构造正则表达式。
+
+#### 1.6 `<include>` 里不支持使用 `<template>`
+
+#### 1.7 template 里暂不支持使用 catch 事件
+
+### 2. 事件
+
+* 事件不支持绑定字符串。
+* `catchtouchmove` 转换后只能停止回调函数的冒泡，不能阻止滚动穿透。如要阻止滚动穿透，可以手动给编译后的 `View` 组件加上 `catchMove` 属性。
+* 不支持事件捕获阶段。
+* 不支持使用 WXS 函数响应事件。
+* 不支持互斥事件绑定 `mut-bind`。
+* 不支持 `mark` 来识别具体触发事件的 target 节点。
+
+### 3. CommonJS 和 ES 模块化语法不能混用
+
+可能遇到的报错信息：
+
+* Cannot assign to read only property 'exports' of object
+* export '[something]' (imported as '[name]') was not found in '[somePath]'
+
+在使用到小程序 API 的地方，Taro 会把 `wx.api()` 转换为 `Taro.api()`，同时在文件的头部加上 `import Taro from '@tarjs/taro`。
+
+如果此文件原本是使用 **CommonJS** 组织模块，可能会出现问题，需要手动修复。
+
+### 4. selectorQuery API 获取不到 DOM
+
+1. 一定要在 `onReady`、`ready` 生命周期中才能调用小程序 API 获取 DOM。
+2. 不需要调用 `.in(this)` 方法。
+
+### 5. Image 没有处理动态拼接的 src
+
+Taro 会对 `Image` 组件的 src 进行处理：
+
+```jsx
+// 转换前：
+<Image src='../../img/icons/0.png' />
+// 转换后：
+<Image src={require('../../img/icons/0.png')} />
+```
+
+但如果 `src` 是动态拼接的字符串，则需要手动修改：
+
+```jsx
+// 转换前：
+<Image src='../../img/icons/' + chart.id + '.png' />
+// 转换后：
+<Image src='../../img/icons/' + chart.id + '.png' />
+// 手动修改，图片也需要手动拷贝到 taroConert/src 对应目录下：
+<Image src={require('../../img/icons/' + chart.id + '.png')} />
+```
+
+### 6. require 的参数不能是变量
+
+可能遇到的报错信息：
+
+* The "path" argument must be of type string. Received type undefined
+
+不支持转换以下写法，[#4749](https://github.com/NervJS/taro/issues/4749)：
+
+```js
+var pathTest = './test.js'
+var test = require(pathTest)
+```
+
+Taro 目前只能转换 `require` 字符串的写法。
+
+### 7. 没有处理 export from 语法
+
+暂时手动处理，[#5131](https://github.com/NervJS/taro/issues/5131)。
+
+### 8. Issues
+
+反向转换的更多问题，请查阅 Taroize 相关 [Issues](https://github.com/NervJS/taro/issues?q=is%3Aopen+is%3Aissue+label%3AA-taroize)。
diff --git a/versioned_docs/version-3.x/taroize.md b/versioned_docs/version-3.x/taroize.md
index 1653ac7433d8..59f0af756af1 100644
--- a/versioned_docs/version-3.x/taroize.md
+++ b/versioned_docs/version-3.x/taroize.md
@@ -2,250 +2,34 @@
 title: 微信小程序转 Taro
 ---
 
-> 自 `v1.2.0` 开始支持此功能
+Taro 可以把**原生微信小程序应用转换为 Taro 项目**，从而使项目成为多端应用。
 
-Taro 可以将你的原生微信小程序应用转换为 Taro 代码，进而你可以通过 `taro build` 的命令将 Taro 代码转换为对应平台的代码，或者对转换后的 Taro 代码进行用 React 的方式进行二次开发。
+转换后的代码可读性高，能够继续使用 **React**（将来支持转换为 **Vue**）进行二次开发。
 
-微信原生小程序转 Taro 的操作非常简单，首先必须安装使用 `npm i -g @tarojs/cli` 安装 Taro 命令行工具，其次在命令行中定位到小程序项目的根目录，根目录中运行：
+### 反向转换步骤
+
+1. 安装 Taro 命令行工具：
 
 ```bash
-$ taro convert
+$ npm i -g @tarojs/cli
 ```
 
-即可完成转换。转换后的代码保存在根目录下的 `taroConvert` 文件夹下。你需要定位到 `taroConvert` 目录执行 `npm install` 命令之后就可以使用 `taro build` 命令编译到对应平台的代码。
-
-## 二次开发
-
-假设已有一个转换后文件如下：
-
-```javascript
-import { View } from '@tarojs/components'
-import Taro from '@tarojs/taro'
-import withWeapp from '@tarojs/with-weapp'
-import './index.scss'
-
-var app = Taro.getApp()
-
-@withWeapp('Page')
-class _C extends Taro.Component {
-  state = {}
-
-  componentWillMount(e) {
-    var orderId = e.id
-    this.data.orderId = orderId
-  }
-
-  componentDidShow() {
-    var that = this
-    Taro.request({
-      url: 'https://api.it120.cc/' + app.globalData.subDomain + '/order/detail',
-      data: {
-        token: Taro.getStorageSync('token'),
-        id: that.data.orderId
-      },
-      success: res => {
-        Taro.hideLoading()
-        if (res.data.code != 0) {
-          Taro.showModal({
-            title: '错误',
-            content: res.data.msg,
-            showCancel: false
-          })
-          return
-        }
-        that.setData({
-          orderDetail: res.data.data,
-          logisticsTraces: res.data.data.logisticsTraces.reverse()
-        })
-      }
-    })
-  }
-
-  config = {
-    navigationBarTitleText: '物流详情'
-  }
+2. 在微信小程序项目的根目录中运行 `convert` 命令进行转换：
 
-  render() {
-    const {
-      orderDetail: orderDetail,
-      logisticsTraces: logisticsTraces
-    } = this.state
-    return (
-      <View className="container">
-        <View className="top-sec">
-          <View className="a-row">
-            <View className="label">物流单号</View>
-            <View className="text">{orderDetail.logistics.trackingNumber}</View>
-          </View>
-          <View className="a-row">
-            <View className="label">物流公司</View>
-            <View className="text">{orderDetail.logistics.shipperName}</View>
-          </View>
-        </View>
-        <View className="sec-wrap">
-          <View className="details-info">
-            <View className="line-box" />
-            {logisticsTraces.map((item, index) => {
-              return (
-                <View className="a-row" key={index}>
-                  <View className="dot">
-                    <View
-                      className="active-dot"
-                      hidden={index == 0 ? false : true}
-                    >
-                      <View className="yuan-red" />
-                    </View>
-                    <View
-                      className="default-dot"
-                      hidden={index == 0 ? true : false}
-                    />
-                  </View>
-                  <View className="info">
-                    <View className="date-box">{item.AcceptTime}</View>
-                    <View className="text">{item.AcceptStation}</View>
-                  </View>
-                </View>
-              )
-            })}
-          </View>
-        </View>
-      </View>
-    )
-  }
-}
-
-export default _C
+```bash
+# 转换后的代码保存在根目录下的 `taroConvert` 文件夹下
+$ taro convert
 ```
 
-它看起来就像普通的 Taro 组件，最重要的区别就在于 `@withWeapp()` 这个装饰器，你可以将它理解为转换代码的运行时，`@withWeapp()` 会增加一些原来 Taro 没有方法和属性，例如：
-
-### `this.setData`
-
-转换后的 `this.setData` 的 API 相当于小程序的 `this.setData` 的 polyfill，他和 `this.setState` 最大的区别就在于，`this.setData` 之后 `data` 的数据是同步更新，而渲染是异步更新，而 `setState` 两者都是异步的。
-
-### `this.data` 和 `this.properties`
-
-`this.data` 和 `this.properties` 相当于 Taro 的 `this.state` 和 `this.props` 的 alias，当它们的数据更新时，对应的 `state` 和 `props` 也会同步更新。
-
-### 生命周期
-
-Taro 会将原始文件的生命周期钩子函数转换为 Taro 的生命周期，完整对应关系如下：
-
-| Page.onLoad | componentWillMount |
-| --: | --: |
-| onShow | componentDidShow |
-| onHide | componentDidHide |
-| onReady | componentDidMount |
-| onUnload | componentWillUnmount |
-| onError | componentDidCatchError |
-| App.onLaunch | componentWillMount |
-| Component.created | componentWillMount |
-| attached | componentDidMount |
-| ready | componentDidMount  |
-| detached | componentWillUnmount |
-| moved |  保留 |
+3. 进入 `taroConvert` 目录，安装依赖：
 
-## 常见问题
-
-### 在小程序 IDE 显示 `_createData` 错误
-
-这个错误通常是由于原始代码的初始 `data` 中没有对应的数据，后来通过 `this.setData` 补充数据造成的。在 Taro 中推荐不管是 `state(data)` 还是 `properties(props)` 都要设置一个默认值。你可以在类构造器或修改原始代码提供一个默认值解决这个问题，这也应该是编写代码的最佳实践。
-
-### 转换 `wxParse` 报错不存在文件
-
-这是由于 `wxParse` 的源码使用了一个[不存在的 `template`](https://github.com/icindy/wxParse/issues/255) 声明造成的。你可以修改 `wxParse` 的源码文件 `wxParse.wxml` 134 行到 207 行：
-
-```html
-<!--循环模版-->
-<template name="wxParse1">
-  <!--<template is="wxParse1" data="{{item}}" />-->
-  <!--判断是否是标签节点-->
-  <block wx:if="{{item.node == 'element'}}">
-    <block wx:if="{{item.tag == 'button'}}">
-      <button type="default" size="mini">
-        <block wx:for="{{item.nodes}}" wx:for-item="item" wx:key="">
-          <template is="wxParse0" data="{{item}}" />
-        </block>
-      </button>
-    </block>
-    <!--li类型-->
-    <block wx:elif="{{item.tag == 'li'}}">
-      <view class="{{item.classStr}} wxParse-li" style="{{item.styleStr}}">
-        <view class="{{item.classStr}} wxParse-li-inner">
-          <view class="{{item.classStr}} wxParse-li-text">
-            <view class="{{item.classStr}} wxParse-li-circle"></view>
-          </view>
-          <view class="{{item.classStr}} wxParse-li-text">
-            <block wx:for="{{item.nodes}}" wx:for-item="item" wx:key="">
-              <template is="wxParse0" data="{{item}}" />
-            </block>
-          </view>
-        </view>
-      </view>
-    </block>
-
-    <!--video类型-->
-    <block wx:elif="{{item.tag == 'video'}}">
-      <template is="wxParseVideo" data="{{item}}" />
-    </block>
-
-    <!--img类型-->
-    <block wx:elif="{{item.tag == 'img'}}">
-      <template is="wxParseImg" data="{{item}}" />
-    </block>
-
-    <!--a类型-->
-    <block wx:elif="{{item.tag == 'a'}}">
-      <view bindtap="wxParseTagATap" class="wxParse-inline {{item.classStr}} wxParse-{{item.tag}}" data-src="{{item.attr.href}}" style="{{item.styleStr}}">
-        <block wx:for="{{item.nodes}}" wx:for-item="item" wx:key="">
-          <template is="wxParse0" data="{{item}}" />
-        </block>
-      </view>
-    </block>
-    <block wx:elif="{{item.tag == 'table'}}">
-      <view class="{{item.classStr}} wxParse-{{item.tag}}" style="{{item.styleStr}}">
-        <block wx:for="{{item.nodes}}" wx:for-item="item" wx:key="">
-          <template is="wxParse0" data="{{item}}" />
-        </block>
-      </view>
-    </block>
-
-    <block wx:elif="{{item.tag == 'br'}}">
-      <template is="WxParseBr"></template>
-    </block>
-    <!--其他块级标签-->
-    <block wx:elif="{{item.tagType == 'block'}}">
-      <view class="{{item.classStr}} wxParse-{{item.tag}}" style="{{item.styleStr}}">
-        <block wx:for="{{item.nodes}}" wx:for-item="item" wx:key="">
-          <template is="wxParse0" data="{{item}}" />
-        </block>
-      </view>
-    </block>
-
-    <!--内联标签-->
-    <view wx:else class="{{item.classStr}} wxParse-{{item.tag}} wxParse-{{item.tagType}}" style="{{item.styleStr}}">
-      <block wx:for="{{item.nodes}}" wx:for-item="item" wx:key="">
-        <template is="wxParse0" data="{{item}}" />
-      </block>
-    </view>
-
-  </block>
-
-  <!--判断是否是文本节点-->
-  <block wx:elif="{{item.node == 'text'}}">
-    <!--如果是，直接进行-->
-    <template is="WxEmojiView" data="{{item}}" />
-  </block>
-
-</template>
+```bash
+$ cd taroConvert
+$ npm install
 ```
 
-把 `<template name="wxParse1">` 的模板内所有 `<template is="wxParse2" data="{{item}}" />` 修改为 `<template is="wxParse0" data="{{item}}" />` 再运行 `taro convert` 即可。这样修改之后还会取消原来 `wxParse` 只能处理 11 级 HTML 嵌套的问题，理论上内存不爆栈可以处理无限级 HTML 嵌套。
-
-### 不支持 `relations` 和 `Behavior`
+4. 运行 `build` 命令，把项目编译到任意平台：
 
-目前转换暂只支持转换 `Page`、`Component` 、`App` 三种构造器创造的小程序组件实例。 `relations` 和 `Behavior` 在其他许多小程序端中还没有对应的实现，我们认为实现这两个功能意义不大。
-
-### 转换 wepy 文件不成功
-
-目前只能支持转换使用原生微信小程序开发的应用。
+```bash
+$ taro build --type [platform]
+```
diff --git a/versioned_docs/version-3.x/template.md b/versioned_docs/version-3.x/template.md
index 7f904c642cf8..5880ceff125b 100644
--- a/versioned_docs/version-3.x/template.md
+++ b/versioned_docs/version-3.x/template.md
@@ -87,7 +87,7 @@ zip 包解压出单文件夹，文件夹内包含若干模板。
 
 开发者可以在模板根目录加入 **template_creator.js** 文件，文件对外 exports 包含 handler 与 basePageFiles 字段的对象：
 
-```js
+```js {5,16} title="template_creator.js"
 function createWhenTs (params) {
   return params.typescript ? true : false
 }
@@ -134,8 +134,7 @@ module.exports = {
 
 ##### 例子
 
-```ejs
-// index.js
+```ejs title="index.js"
 <%if (typescript) {-%>
 import Taro, { Component, Config } from '@tarojs/taro'
 <%} else { -%>
@@ -197,8 +196,7 @@ return: boolean/object
 
 当用户选择了使用 typescript 时，才生成 **global.d.ts** 和 **tsconfig.json** 文件。
 
-```js
-// template_creator.js
+```js title="template_creator.js"
 function createWhenTs (params) {
   return params.typescript ? true : false
 }
@@ -221,8 +219,7 @@ basePageFiles 告诉 CLI，当用户使用 `taro create` 命令创建页面时
 
 当用户使用命令 `taro create --page=detail` 时，会创建 **/src/pages/detail/detail.jsx** 与 **/src/pages/detail/detail.css** 两个文件。
 
-```js
-// template_creator.js
+```js title="template_creator.js"
 const handler = {
   '/src/pages/index/index.jsx' ({ pageName }) {
     return { setPageName: `/src/pages/${pageName}/${pageName}.jsx` }
diff --git a/versioned_docs/version-3.x/tutorial.md b/versioned_docs/version-3.x/tutorial.md
index 542886c0aeb2..24484dce19f7 100644
--- a/versioned_docs/version-3.x/tutorial.md
+++ b/versioned_docs/version-3.x/tutorial.md
@@ -73,8 +73,7 @@ Taro 中全局配置所包含的配置项及各端支持程度如下
 
 则需要在入口文件配置中写
 
-```jsx
-// app.config.js
+```jsx title="app.config.js"
 export default {
   pages: [
     'pages/index/index',
@@ -124,8 +123,7 @@ export default {
 
 配置示例如下：
 
-```jsx
-// app.config.js
+```jsx title="app.config.js"
 export default {
   pages: [
     'pages/index/index',
diff --git a/versioned_docs/version-3.x/vue.md b/versioned_docs/version-3.x/vue.md
index 522b4442a4a2..1019ef6f14fd 100644
--- a/versioned_docs/version-3.x/vue.md
+++ b/versioned_docs/version-3.x/vue.md
@@ -9,7 +9,7 @@ title: Vue
 每一个 Taro 应用都需要一个入口组件用来注册应用，入口文件默认是 `src` 目录下的 `app.js`。
 在 Taro 中使用 Vue，入口组件必须导出一个 Vue 组件，在入口组件中我们可以设置全局状态或访问小程序入口实例的生命周期：
 
-```jsx
+```jsx title="src/app.js"
 import Vue from 'vue'
 // 假设我们已经在 './store' 配置好了 vuex
 import store from './store'
@@ -29,8 +29,7 @@ export default App
 
 对于一个入口文件(例如`app.js`)而言，我们可以新增一个 `app.config.js` 的文件进行全局配置，`app.config.js` 的默认导出就是小程序的[全局配置](https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/app.html):
 
-```js
-// app.config.js
+```js title="app.config.js"
 export default {
   pages: [
     'pages/index/index'
@@ -439,8 +438,7 @@ onAddToFavorites(res) {
 以上成员方法在 Taro 的页面中同样可以使用，书写同名方法即可，不过需要注意的，目前暂时只有小程序端支持（支持程度如上）这些方法，编译到 H5/RN 端后这些方法均会失效。
 
 
-```js
-// ./pages/index/index.jsx
+```js title="./pages/index/index.jsx"
 export default {
   navigationBarTitleText: '首页'
 }
diff --git a/versioned_docs/version-3.x/vue3.md b/versioned_docs/version-3.x/vue3.md
index 9a029b48ddad..9ba5513e421e 100644
--- a/versioned_docs/version-3.x/vue3.md
+++ b/versioned_docs/version-3.x/vue3.md
@@ -14,8 +14,7 @@ Taro 是如何兼容 Vue3 的，可参阅 [Taro RFC](https://github.com/NervJS/t
 
 由于 Vue3 Global API 有变化（[0009-global-api-change](https://github.com/vuejs/rfcs/blob/master/active-rfcs/0009-global-api-change.md)），Vue3 的入口组件写法将会变成：
 
-```js
-// app.js
+```js title="src/app.js"
 import { createApp } from 'vue'
 
 const app = createApp({
@@ -63,3 +62,8 @@ export default {
 * 小程序端非类似 HTML 表单标签规范的表单组件，如 Picker，暂不兼容 v-model。Vue3 的 v-model 绑定属性改为了 modelValue，事件绑定改为了 update:modelValue。对于 HTML 表单标签会自动对接表单的值与事件，例如 input 会自动对应 modelValue 与 value、update:modelValue 与 @input。但对于 Picker 这种小程序特有表单则无法对应，建议这种情况不使用 v-model。
 * VirtualList 组件需要实现一份 Vue3 版本（待实现）
 * 所有组件的 `id` 必须在整个应用中保持唯一（即使他们在不同的页面），否则可能导致事件不触发的问题，[#7317](https://github.com/NervJS/taro/issues/7317)
+
+
+## 相关阅读
+
+[使用 Vue3 开发小程序](https://taro-club.jd.com/topic/2267/%E4%BD%BF%E7%94%A8-vue3-%E5%BC%80%E5%8F%91%E5%B0%8F%E7%A8%8B%E5%BA%8F) by lillian
\ No newline at end of file
diff --git a/versioned_sidebars/version-3.x-sidebars.json b/versioned_sidebars/version-3.x-sidebars.json
index 37ce5fc4ce1c..392d5a0241cb 100644
--- a/versioned_sidebars/version-3.x-sidebars.json
+++ b/versioned_sidebars/version-3.x-sidebars.json
@@ -157,6 +157,25 @@
           "type": "doc",
           "id": "version-3.x/hybrid"
         },
+        {
+          "collapsed": true,
+          "label": "反向转换",
+          "type": "category",
+          "items": [
+            {
+              "type": "doc",
+              "id": "version-3.x/taroize"
+            },
+            {
+              "type": "doc",
+              "id": "version-3.x/convert-to-react"
+            },
+            {
+              "type": "doc",
+              "id": "version-3.x/taroize-troubleshooting"
+            }
+          ]
+        },
         {
           "collapsed": true,
           "label": "扩展编译平台",