diff --git a/docs/.vuepress/components/IPhoneImg.vue b/docs/.vuepress/components/IPhoneImg.vue
new file mode 100644
index 0000000..88fff91
--- /dev/null
+++ b/docs/.vuepress/components/IPhoneImg.vue
@@ -0,0 +1,32 @@
+<template>
+  <div class="wrapper">
+    <div class="iPhone-img">
+      <img src="/iPhone.svg" width="323">
+      <img class="img" :src="$withBase(imgSrc)" width="284" height="505">
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: ['imgSrc']
+}
+</script>
+
+<style>
+.wrapper {
+  position: relative;
+  height: 644px;
+}
+.iPhone-img {
+  position: absolute;
+  left: 50%;
+  top: 0;
+  transform: translateX(-50%);
+}
+.img {
+  position: absolute;
+  left: 17px;
+  top: 81px;
+}
+</style>
diff --git a/docs/.vuepress/components/IndexEn.vue b/docs/.vuepress/components/IndexEn.vue
new file mode 100644
index 0000000..30a74e9
--- /dev/null
+++ b/docs/.vuepress/components/IndexEn.vue
@@ -0,0 +1,13 @@
+<template>
+  <IndexPage lang="en-US" />
+</template>
+
+<script>
+import IndexPage from './IndexPage'
+
+export default {
+  components: {
+    IndexPage
+  }
+}
+</script>
diff --git a/docs/.vuepress/components/IndexPage.vue b/docs/.vuepress/components/IndexPage.vue
new file mode 100644
index 0000000..08b4428
--- /dev/null
+++ b/docs/.vuepress/components/IndexPage.vue
@@ -0,0 +1,223 @@
+<template>
+  <div>
+    <div class="wrap">
+      <div class="banner">
+        <img class="weex-img" src="https://img.alicdn.com/tfs/TB1C_xcqMHqK1RjSZJnXXbNLpXa-974-980.png" width="35%" height="100%" />
+        <div class="weex-desc">
+          <h1>{{weex.desc}}</h1>
+          <a class="quick-start" :href="lang == 'en-US' ? '/guide/introduction.html' : '/zh/guide/introduction.html'">{{weex.getStartedBtn}} <img src="https://img.alicdn.com/tfs/TB1_hg2qCzqK1RjSZFpXXakSXXa-15-12.svg" /></a>
+        </div>
+      </div>
+      <div class="character">
+        <div class="c-desc">
+          <h3>{{weex.charc1Title}}</h3>
+          <div>{{weex.charc1Content}}</div>
+        </div>
+        <img src="https://img.alicdn.com/tfs/TB1M2MYqzTpK1RjSZKPXXa3UpXa-1152-912.png" width="50%" height="100%" />
+      </div>
+
+      <div class="character-o">
+        <img class="pc" src="https://img.alicdn.com/tfs/TB17PA7qAzoK1RjSZFlXXai4VXa-2000-1216.png" width="100%"/>
+        <div class="c-desc pr">
+          <h3>{{weex.charc2Title}}</h3>
+          <div>{{weex.charc2Content}}</div>
+        </div>
+        <img class="mobile" src="https://img.alicdn.com/tfs/TB17PA7qAzoK1RjSZFlXXai4VXa-2000-1216.png" width="100%"/>
+      </div>
+
+      <div class="character">
+        <div class="c-desc">
+          <h3>{{weex.charc3Title}}</h3>
+          <div>{{weex.charc3Content}}</div>
+        </div>
+        <img src="https://img.alicdn.com/tfs/TB1UrQ4qAvoK1RjSZFNXXcxMVXa-808-1180.png" width="50%" height="100%" />
+      </div>
+
+      <div class="character-o">
+        <img class="pc" src="https://img.alicdn.com/tfs/TB1H7I2qxTpK1RjSZFKXXa2wXXa-2000-1216.png" width="100%"/>
+        <div class="c-desc pr">
+          <h3>{{weex.charc4Title}}</h3>
+          <div>{{weex.charc4Content}}</div>
+        </div>
+        <img class="mobile" src="https://img.alicdn.com/tfs/TB1H7I2qxTpK1RjSZFKXXa2wXXa-2000-1216.png" width="100%"/>
+      </div>
+
+      <div class="eagle">
+        <div>{{weex.startText}}</div>
+        <a class="start-btn" :href="lang == 'en-US' ? '/guide/introduction.html' : '/zh/guide/introduction.html'">{{weex.getStartedBtn}}</a>
+      </div>
+    </div>
+    <License v-show="isApache" />
+  </div>
+</template>
+
+<script>
+
+import langZH from '../data/lang-zh';
+import langEN from '../data/lang-en';
+import License from '../sub-components/License.vue';
+
+export default {
+  data() {
+    if (this.lang == 'en-US') {
+      return {
+        weex: langEN.weex,
+        isApache: window.location.href.indexOf('weex.apache.org') !== -1
+      }
+    }
+    return {
+      weex: langZH.weex,
+      isApache: window.location.href.indexOf('weex.apache.org') !== -1
+    }
+  },
+  props: ['lang'],
+
+  components: {
+    License
+  }
+}
+</script>
+
+
+<style scoped>
+.wrap {
+  padding-left: 10%;
+  padding-right: 10%;
+  background: url(https://img.alicdn.com/tfs/TB1hqc7qrvpK1RjSZFqXXcXUVXa-2880-1792.png) 0 0 / 100% no-repeat;
+}
+.banner {
+  display: flex;
+}
+.weex-img {
+  margin-top: 8%;
+}
+.weex-desc {
+  padding-top: 5%;
+  padding-left: 5%;
+}
+.weex-desc > h1 {
+  line-height: 56px;
+  font-size: 40px;
+  color: #FFFFFF;
+}
+.quick-start {
+  display: inline-block;
+  width: 176px;
+  height: 48px;
+  line-height: 46px;
+  box-sizing: border-box;
+  text-align: center;
+  border: 1px solid #fff;
+  border-radius: 2px;
+  color: #fff;
+  font-size: 18px;
+}
+.c-desc {
+  width: 30%;
+}
+.c-desc > h3 {
+  line-height: 40px;
+  font-size: 28px;
+  color: #373D41;
+}
+.c-desc > div {
+  line-height: 24px;
+  font-size: 14px;
+  color: #373D41;
+  line-height: 24px;
+}
+.eagle {
+  height: 500px;
+  background: url(https://img.alicdn.com/tfs/TB1tQQ7qxTpK1RjSZFMXXbG_VXa-604-498.svg) center no-repeat;
+  text-align: center;
+  overflow: hidden;
+}
+.eagle > div {
+  margin-top: 223px;
+  margin-bottom: 28px;
+  line-height: 40px;
+  font-size: 32px;
+  color: #373D41;
+}
+.eagle > .start-btn {
+  display: inline-block;
+  width: 240px;
+  height: 48px;
+  line-height: 48px;
+  background: #00B4FF;
+  border-radius: 2px;
+  color: #fff;
+  font-size: 16px;
+}
+@media screen and (max-width: 1200px) {
+  .weex-desc > h1 {
+    font-size: 24px;
+    line-height: 36px;
+  }
+  .quick-start {
+    width: 146px;
+    height: 38px;
+    line-height: 36px;
+    font-size: 14px;
+  }
+  .c-desc > h3 {
+    font-size: 24px;
+  }
+}
+@media screen and (max-width: 720px) {
+  .weex-desc > h1 {
+    font-size: 14px;
+    line-height: 20px;
+  }
+  .quick-start {
+    width: 80px;
+    height: 26px;
+    line-height: 24px;
+    font-size: 12px;
+  }
+  .quick-start > img {
+    display: none;
+  }
+  
+}
+@media screen and (max-width: 820px) {
+  .pc {
+    display: none;
+  }
+  .character, .character-o {
+    text-align: center;
+  }
+  .c-desc {
+    width: 100%;
+  }
+  .c-desc > h3 {
+    margin-top: 30px;
+    font-size: 16px;
+    line-height: 24px;
+  }
+  .c-desc > div {
+    text-align: left;
+  }
+}
+@media screen and (min-width: 820px) {
+  .mobile {
+    display: none;
+  }
+  .character {
+    display: flex;
+    align-items: center;
+    justify-content: space-around;
+  }
+  .character-o {
+    position: relative;
+  }
+  .c-desc.pr {
+    position: absolute;
+    top: 50%;
+    transform: translateY(-50%);
+    right: 50px;
+  }
+}
+
+</style>
+
diff --git a/docs/.vuepress/components/IndexZh.vue b/docs/.vuepress/components/IndexZh.vue
new file mode 100644
index 0000000..3e7fd76
--- /dev/null
+++ b/docs/.vuepress/components/IndexZh.vue
@@ -0,0 +1,13 @@
+<template>
+  <IndexPage lang="zh-CN" />
+</template>
+
+<script>
+import IndexPage from './IndexPage'
+
+export default {
+  components: {
+    IndexPage
+  }
+}
+</script>
diff --git a/docs/.vuepress/components/SourceCode.vue b/docs/.vuepress/components/SourceCode.vue
deleted file mode 100644
index 8063d1c..0000000
--- a/docs/.vuepress/components/SourceCode.vue
+++ /dev/null
@@ -1,114 +0,0 @@
-<template>
-  <div class="wrapper">
-    <iframe class="iframe"
-      ref="iframe"
-      :src="url"
-      :style="{ height }"
-      @load="onLoad"
-      frameborder="0"></iframe>
-    <div class="controls" v-if="showControls">
-      <div class="btn" @click="openURL">
-        <span class="btn-text">Open</span>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-  const baseURL = 'https://editor.weex.alibaba-inc.com'
-  function setParams (url, params) {
-    const querys = []
-    for (const key in params) {
-      if (Object.prototype.hasOwnProperty.call(params, key) && params[key]) {
-        querys.push({ name: key, value: params[key] })
-      }
-    }
-    if (url && querys.length) {
-      url += ('?' + querys.map(x => `${x.name}=${x.value}`).join('&'))
-    }
-    return url
-  }
-  export default {
-    props: ['hash', 'file', 'line', 'mode', 'buttons'],
-    data () {
-      return {
-        url: this.createURL(),
-        showControls: false,
-        height: 'auto'
-      }
-    },
-    created () {
-      if (this.line) {
-        this.height = this.calculateHeight() + 'px'
-      }
-    },
-    methods: {
-      createURL () {
-        let url = this.src ? this.src : `${baseURL}/source/${this.hash}`
-        const params = []
-        if (this.file) {
-          url += `/${this.file}`
-        }
-        return setParams(url, { line: this.line })
-      },
-      onLoad () {
-        // const $iframe = this.$refs.iframe
-        if (this.buttons !== 'none') {
-          this.showControls = true
-        }
-      },
-      calculateHeight () {
-        const lineHeight = 19
-        if (this.line) {
-          var pair = this.line.split(/\-|\~/i)
-          var begin = parseInt(pair[0], 10)
-          var end = parseInt(pair[1], 10) || begin
-          return (end - begin + 1) * lineHeight + 20
-        }
-      },
-      openURL () {
-        try {
-          const url = setParams(`${baseURL}/vue/${this.hash}`, {
-            file: this.file,
-            line: this.line
-          })
-          window.open(url)
-        } catch (e) {}
-      }
-    }
-  }
-</script>
-
-<style scoped>
-  .wrapper {
-    position: relative;
-    width: 100%;
-    height: 100%;
-    padding: 10px 2%;
-    box-sizing: border-box;
-  }
-  .iframe {
-    width: 100%;
-    height: auto;
-  }
-  .controls {
-    position: absolute;
-    top: 18px;
-    right: 3%;
-  }
-  .controls .btn {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    border: 1px solid #5f5f5f;
-    border-radius: 5px;
-    background-color: rgba(255,255,255,.1);
-    color: #969696;
-    cursor: pointer;
-    padding: 3px 8px;
-    font-size: 13px;
-  }
-  .controls .btn:hover {
-    box-shadow: 0 2px 8px rgba(255, 255, 255, 0.1);
-  }
-</style>
diff --git a/docs/.vuepress/components/Tool-Dotwe.vue b/docs/.vuepress/components/Tool-Dotwe.vue
new file mode 100644
index 0000000..3daf556
--- /dev/null
+++ b/docs/.vuepress/components/Tool-Dotwe.vue
@@ -0,0 +1,111 @@
+<template>
+  <div class="wrap">
+    <div class="warning">
+      <p class="warning-icon">WARNING</p>
+      <p>{{lang === 'en-US' ? 'Online Editor is a third party editor, and is not developed nor maintained by Apache Weex.' : 'Online Editor 是三方编辑器, 不由 Apache Weex 开发或维护。'}}</p>
+    </div>
+    <img class="editor hide" src="https://img.alicdn.com/tfs/TB1OFpuI4naK1RjSZFBXXcW7VXa-1936-1188.png" />
+    <div class="link">
+      <h3 class="title">{{lang === 'en-US' ? 'Online Editor' : '在线编辑器'}}</h3>
+      <div class="desc">{{lang === 'en-US' ? 'Weex Online Editor for developers. Developer don\'t need install anything. Also, it\'s convenient for talking about some developing issue.' : 'Weex 在线编辑器，无需安装任何环境，马上开始Weex代码开发。交流Weex代码的利器！'}}</div>
+      <a href="http://editor.weex.io" target="_blank" class="btn">{{lang === 'en-US' ? 'Open Editor' : '打开在线编辑器'}}</a>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: ['lang']
+}
+</script>
+
+<style scoped>
+.wrap {
+  position: relative;
+  display: flex;
+  height: calc(100vh - 3.6rem);
+  margin-top: 3.6rem !important;
+  padding-left: 11rem;
+  background: url(https://img.alicdn.com/tfs/TB1WrU8IQvoK1RjSZPfXXXPKFXa-2438-1420.png) 10rem 0 / cover no-repeat;
+}
+.warning {
+  position: absolute;
+  width: 100%;
+  border-color: #f63;
+  background-color: #fff2ee;
+  padding: .1rem 1rem;
+  border-left-width: .2rem;
+}
+.warning-icon {
+  padding-left: 21px;
+  color: #606273;
+  background: url(https://gw.alicdn.com/tfs/TB1mwIBAwHqK1RjSZJnXXbNLpXa-16-16.svg) 0 5px no-repeat;
+  font-weight: 600;
+  margin-bottom: -.4rem;
+}
+.warning-icon + p {
+  color: #4d0000;
+}
+.editor {
+  margin-top: 7.2rem;
+  height: calc(100vh - 3.6rem - 7.2rem);
+}
+.link {
+  margin-left: -140px;
+  width: 250px;
+}
+.title {
+  padding-top: 150px;
+  margin-top: 0;
+  margin-bottom: 6px;
+  line-height: 56px;
+  font-family: PingFangSC-Semibold;
+  font-size: 40px;
+  color: #373D41;
+}
+.desc {
+  line-height: 20px;
+  font-size: 14px;
+  color: #373D41;
+  margin-bottom: 32px;
+}
+.btn {
+  display: inline-block;
+  width: 176px;
+  height: 48px;
+  line-height: 48px;
+  color: #fff;
+  font-size: 16px;
+  background: #00B4FF;
+  border-radius: 2px;
+  margin-left: 4px;
+  margin-right: 4px;
+  text-align: center;
+}
+.btn:hover {
+  text-decoration: none !important;
+}
+
+@media (max-width: 1200px) { 
+  .hide {
+    display: none;
+  }
+  .link {
+    margin-left: 0;
+    width: auto;
+    text-align: center;
+    padding-left: 15px;
+    padding-right: 15px;
+  }
+  .wrap {
+    display: block;
+  }
+}
+
+@media (max-width: 720px) {
+  .wrap {
+    padding-left: 0;
+    background-position-x: 0;
+  }
+}
+</style>
diff --git a/docs/.vuepress/components/Tool-Playground.vue b/docs/.vuepress/components/Tool-Playground.vue
new file mode 100644
index 0000000..a821a0f
--- /dev/null
+++ b/docs/.vuepress/components/Tool-Playground.vue
@@ -0,0 +1,94 @@
+<template>
+  <div class="wrap">
+    <img class="phone hide" src="https://img.alicdn.com/tfs/TB1mvFeI7voK1RjSZFwXXciCFXa-976-1420.png" />
+    <div class="download">
+      <h3 class="title">Weex Playground</h3>
+      <div class="desc">{{lang === 'en-US' ? 'Weex Native Runtime showcase & Weex vue file preview.' : 'Weex 示例App，可扫码预览Weex代码构建后的页面。'}}</div>
+      <img src="/tool-playground-qrcode.png" width="128" />
+      <div class="desc2">{{lang === 'en-US' ? 'scan the qrcode and download the app' : '扫二维码下载该APP'}}</div>
+      <div><a href="https://itunes.apple.com/cn/app/weex-playground/id1130862662?mt=8" target="_blank" class="btn"><img src="/tool-playground-apple-icon.png" width="12" />{{lang === 'en-US' ? 'iOS' : 'iOS版下载'}}</a><a href="http://appdownload.alicdn.com/publish/weex_playgroud/latest/weex_playgroud_10006024.apk" class="btn" ><img src="/tool-playground-android-icon.png" width="12"/>{{lang === 'en-US' ? 'Android' : 'Android版下载'}}</a></div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: ['lang']
+}
+</script>
+
+
+<style scoped>
+.wrap {
+  display: flex;
+  height: calc(100vh - 3.6rem);
+  margin-top: 3.6rem !important;
+  padding-left: 11rem;
+  background: url(https://img.alicdn.com/tfs/TB1qzBXI7voK1RjSZFNXXcxMVXa-2438-1420.png) 10rem 0 / cover no-repeat;
+}
+.phone {
+  height: calc(100vh - 3.6rem);
+}
+.download {
+  margin-left: 130px;
+  text-align: center;
+}
+.title {
+  margin-top: 0;
+  padding-top: 140px;
+  margin-bottom: 6px;
+  line-height: 56px;
+  font-family: PingFangSC-Semibold;
+  font-size: 40px;
+  color: #373D41;
+}
+.desc {
+  line-height: 20px;
+  font-size: 14px;
+  color: #373D41;
+  margin-bottom: 38px;
+}
+.desc2 {
+  margin-top: 5px;
+  margin-bottom: 24px;
+  line-height: 22px;
+  font-size: 12px;
+  color: #373D41;
+}
+.btn {
+  display: inline-block;
+  width: 158px;
+  height: 48px;
+  line-height: 48px;
+  color: #fff;
+  font-size: 16px;
+  background: #00B4FF;
+  border-radius: 2px;
+  margin-left: 4px;
+  margin-right: 4px;
+  margin-bottom: 10px;
+}
+.btn:hover {
+  text-decoration: none !important;
+}
+.btn > img {
+  margin-right: 5px;
+}
+
+@media (max-width: 1050px) { 
+  .hide {
+    display: none;
+  }
+}
+
+@media (max-width: 720px) {
+  .wrap {
+    display: block;
+    padding-left: 0;
+    background-position-x: 0;
+  }
+  .download {
+    margin-left: 0;
+  }
+}
+</style>
diff --git a/docs/.vuepress/components/Who-Is-Using-Weex.vue b/docs/.vuepress/components/Who-Is-Using-Weex.vue
new file mode 100644
index 0000000..d983acc
--- /dev/null
+++ b/docs/.vuepress/components/Who-Is-Using-Weex.vue
@@ -0,0 +1,125 @@
+<template>
+  <div>
+    <h3 class="title">{{lang === 'en-US' ? 'they are using weex' : '他们都在使用Weex'}}</h3>
+    <div class="wrap">
+      <div class="app" v-for="item in list" :key="item.name_CN">
+        <div class="icon-wrap">
+          <img class="app-icon" :src="item.icon" width="90" height="90" />
+          <div class="icons">
+            <a class="icon-android" :href="item.iOS" target="_blank"><img src="/iOS@2x.png" width="17" height="17"/></a>
+            <a :href="item.android" target="_blank"><img src="/Android@2x.png" width="17" height="17"/></a>
+          </div>
+        </div>
+        <div class="app-name">{{lang === 'en-US' ? item.name_EN : item.name_CN}}</div>
+      </div>
+    </div>
+    <div class="btn"><a class="add-app" href="https://github.com/apache/incubator-weex-site/blob/master/docs/.vuepress/data/who-is-using-weex.js" target="_blank">{{lang === 'en-US' ? 'Add your App' : '我也要上墙'}}</a></div>
+  </div>
+</template>
+
+<script>
+import list from '../data/who-is-using-weex.js'
+
+export default {
+  props: ['lang'],
+  data() {
+    return {
+      list,
+    }
+  }
+}
+</script>
+
+<style scoped>
+.title {
+  width: 910px;
+  line-height: 33px;
+  font-family: PingFangSC-Medium;
+  font-size: 24px;
+  color: #373D41;
+  text-align: center;
+  margin-top: 78px;
+  margin-bottom: 20px;
+}
+.wrap {
+  width: 910px;
+  display: flex;
+  flex-wrap: wrap;
+}
+.app {
+  padding: 20px;
+  padding-bottom: 0;
+}
+.app-icon {
+  display: block;
+  border-radius: 15px;
+}
+.app-name {
+  text-align: center;
+  line-height: 17px;
+  font-size: 12px;
+  color: #373D41;
+  margin-top: 12px;
+}
+.add-app {
+  display: inline-block;
+  width: 260px;
+  height: 40px;
+  line-height: 40px;
+  background-color: #00B4FF;
+  border-radius: 2px;
+  color: #fff;
+  font-size: 16px;
+  text-align: center;
+}
+.btn {
+  width: 910px;
+  margin-top: 38px;
+  text-align: center;
+}
+.add-app:hover {
+  text-decoration: none !important;
+}
+.icon-wrap {
+  position: relative;
+}
+.icons {
+  opacity: 0;
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  height: 28px;
+  border-bottom-left-radius: 15px;
+  border-bottom-right-radius: 15px;
+  background-color: rgba(0, 0, 0, 0.5);
+  display: flex;
+  transition: all .2s ease,transform .2s ease; 
+}
+.icons > a {
+  flex: 1;
+  font-size: 0;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+}
+.icon-android {
+  border-right: 1px solid #1D2C41
+}
+
+.icon-wrap img {
+  transition: box-shadow .2s ease,transform .2s ease;
+}
+
+.icon-wrap:hover .icons {
+  opacity: 1;
+  transform: translateY(-2px);
+}
+
+.icon-wrap:hover img {
+  transform: translateY(-2px);
+  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.16);
+}
+</style>
diff --git a/docs/.vuepress/config.js b/docs/.vuepress/config.js
index 81ad20e..f3cb22b 100644
--- a/docs/.vuepress/config.js
+++ b/docs/.vuepress/config.js
@@ -45,7 +45,8 @@
                 ['front-end-frameworks', 'Front-End Frameworks'],
                 ['platform-difference', 'Platform Difference'],
                 ['use-vue-in-weex', 'Use Vue in Weex'],
-                ['use-rax-in-weex', 'Use Rax in Weex']
+                ['use-rax-in-weex', 'Use Rax in Weex'],
+                ['playground', 'Playground App']
               ]
             },
             {
@@ -92,9 +93,8 @@
               title: 'Contribute',
               collapsable: false,
               children: [
-                ['contribute/bug-report-guidelines', 'Bug Report'],
                 ['contribute/how-to-contribute', 'Join Weex community'],
-                ['contribute/contribute-code', 'Contribute Code'],
+                ['contribute/thanks', 'Thanks'],
               ]
             }
           ],
@@ -175,17 +175,17 @@
             }
           ],
           '/tools/': [
-            ['playground', 'Playground App'],
             ['toolkit', 'Weex Toolkit'],
-            ['extension', 'VSCode Extension']
+            ['extension', 'VSCode Extension'],
+            ["dotwe", "Online Editor"]
           ],
           '/community/': [
-            ['release-procedure', 'Release Procedure'],
-            ['roadmap', 'Roadmap'], 
-            ['weex-third-party-extensions', 'Plugins Market']],
+            ['weex-third-party-extensions', 'Plugins Market']
+          ],
           '/blog/': [
             ['write-a-blog', 'Write a Blog'],
-            ['ios-weexcore.md', 'Adapt iOS WeexSDK to WeexCore']
+            ['ios-weexcore.md', 'Adapt iOS WeexSDK to WeexCore'],
+            ['weex-third-party-extensions','List of Third Party Plugin']
           ],
           '/download/':[
              ['download', "Source Download"] 
@@ -219,7 +219,8 @@
                 ['front-end-frameworks', '前端框架'],
                 ['platform-difference', '平台差异'],
                 ['use-vue-in-weex', '在Weex中使用Vue.js'],
-                ['use-rax-in-weex', '在Weex中使用Rax.js']
+                ['use-rax-in-weex', '在Weex中使用Rax.js'],
+                ['playground', 'Playground 应用']
               ]
             },
             {
@@ -266,9 +267,8 @@
               title: '贡献',
               collapsable: false,
               children: [
-                ['contribute/bug-report-guidelines', 'Bug 反馈'],
                 ['contribute/how-to-contribute', '加入 Weex 社区'],
-                ['contribute/contribute-code', '代码贡献指南'],
+                ['contribute/thanks', '鸣谢'],
               ]
             }
           ],
@@ -349,20 +349,20 @@
             }
           ],
           '/zh/tools/': [
-            ['playground', 'Playground 应用'],
             ['toolkit', 'Weex 工具箱'],
-            ['extension', 'VSCode 插件']
+            ['extension', 'VSCode 插件'],
+            ["dotwe", "Online Editor"]
           ],
           '/zh/community/': [
-            ['release-procedure', 'Apache Release 流程'],
-            ['roadmap', '路线图'], 
-            ['weex-third-party-extensions', '插件市场']],
+            ['weex-third-party-extensions', '插件市场']
+          ],
           '/zh/blog/': [
             ['write-a-blog', '写一篇博客'],
             ['weex-auto-test-locating', 'Weex自动化测试元素定位方案'],
             ['ios-weexcore.md', 'iOS WeexSDK 接入 WeexCore'],
             ['weexcore-multiprocess-evolution', 'WeexCore 多进程多线程架构演进'],
-            ['interaction-optimization', '可交互时间的探索和首屏时间的改进之路']
+            ['interaction-optimization', '可交互时间的探索和首屏时间的改进之路'],
+            ['weex-third-party-extensions','Weex 三方插件']
           ],
           '/zh/download/':[
             ['download', "源代码下载"] 
diff --git a/docs/.vuepress/data/lang-en.js b/docs/.vuepress/data/lang-en.js
deleted file mode 100644
index 2ad9290..0000000
--- a/docs/.vuepress/data/lang-en.js
+++ /dev/null
@@ -1,36 +0,0 @@
-export default {
-  weex: {
-    desc: 'Weex is a framework for building performant mobile apps with modern web technology.',
-    getStartedBtn: 'Get Started',
-    startText: 'Start building your weex app',
-    charc1Title: 'High Performance',
-    charc1Content:
-      'Weex is using native components and native modules to take advantage of native rendering performance and platform capabilities. Both components and modules are pluggable and extendable.',
-    charc2Title: 'Cross Platforms',
-    charc2Content:
-      'You can use a single codebase to generate different bundle files to running on both Webs, Android and iOS platforms. Native components and modules have a different implementation on each platform, but they all exposed the same API.',
-    charc3Title: 'Front-end Friendly',
-    charc3Content:
-      'Weex embraces the existing Web ecosystem, you can use modern front-end technology to develop your mobile apps. Weex supports most commonly used CSS properties and most popular front-end frameworks, such as Vue and Rax, maybe more in the future.',
-    charc4Title: 'Large-scale Used in Production',
-    charc4Content:
-      'Weex has been large-scale used in many super apps for a long time, served almost billions of people in total. Weex also derived many engineering products and platforms for industry development.'
-  },
-  info: {
-    solutionTitle: 'Solutions',
-    demoTitle: 'Demos',
-    searchTag: 'Search Tags',
-    hotTags: 'Hot Tags',
-    searchBtn: 'Search',
-    placeholder: 'Select tags or input tags then press the Enter key',
-    solutionFavoriteNone:
-      "You don't have any favorite solution. Start collecting the first one now!",
-    solutionWorksNone: "You don't write any solution. Start writing one now!",
-    demoFavoriteNone: "You don't have any favorite demo. Start collecting the first one now!",
-    demoWorksNone: "You don't write any demo. Start writing one now!",
-    startWriting: 'startWriting',
-    noData: 'No Data',
-    pv: 'pv',
-    favor: 'favor'
-  }
-};
diff --git a/docs/.vuepress/data/lang-zh.js b/docs/.vuepress/data/lang-zh.js
deleted file mode 100644
index 49211c6..0000000
--- a/docs/.vuepress/data/lang-zh.js
+++ /dev/null
@@ -1,35 +0,0 @@
-export default {
-  weex: {
-    desc: 'Weex 是一个可以使用现代化的 Web 技术开发高性能原生应用的框架。',
-    getStartedBtn: '快速开始',
-    startText: '开始构建你的 weex 应用',
-    charc1Title: '高性能',
-    charc1Content:
-      'Weex 使用原生组件和原生模块，来最大化利用原生渲染的性能优势以及平台能力，所有的组件和模块都是可插拔、可扩展的。',
-    charc2Title: '跨平台',
-    charc2Content:
-      '你可以使用同一份代码编译成不同目标文件分别在 Web、Android 和 iOS 平台上运行。原生的组件和模块在不同平台中有不同的实现，但是它们都提供了相同的接口。',
-    charc3Title: '贴近前端生态',
-    charc3Content:
-      'Weex 拥抱已有的 Web 生态，你可以使用现代化的前端技术开发移动应用。 Weex 支持了最常用 CSS 样式以及最流行的前端框架，如 Vue 和 Rax，在未来或许还可以支持更多。',
-    charc4Title: '被大规模的使用',
-    charc4Content:
-      'Weex 已经在许多超级 App 中大规模使用，一共服务了数亿用户。Weex 还衍生出了各种工程化的产品和平台，以供 工业生产使用。'
-  },
-  info: {
-    solutionTitle: '干货集中营-解决方案',
-    demoTitle: '干货集中营-代码案例',
-    searchTag: '标签筛选',
-    hotTags: '热门标签',
-    searchBtn: '筛选',
-    palceholder: '请选择标签或者输入关键词后回车',
-    solutionFavoriteNone: '你还没有收藏解决方案，赶快点击按钮开始收藏你的第一个解决方案吧~',
-    solutionWorksNone: '你还没有编写解决方案，赶快去编写你的第一个解决方案吧~',
-    demoFavoriteNone: '你还没有收藏代码案例，赶快点击按钮开始收藏你的第一个代码案例吧~',
-    demoWorksNone: '你还没有编写代码案例，赶快去编写你的第一个代码案例吧~',
-    startWriting: 'GO-编写去',
-    noData: '暂无数据~',
-    pv: '浏览',
-    favor: '收藏'
-  }
-};
diff --git a/docs/.vuepress/data/redirect.json b/docs/.vuepress/data/redirect.json
index 6bf81c5..4811888 100644
--- a/docs/.vuepress/data/redirect.json
+++ b/docs/.vuepress/data/redirect.json
@@ -17,10 +17,12 @@
   "/references/modules/": "/docs/modules/animation.html",
   "/cn/references/components/": "/zh/docs/components/a.html",
   "/cn/references/modules/": "/zh/docs/modules/animation.html",
-  "/resources.html": "/tools/playground.html",
-  "/cn/resources.html": "/zh/tools/playground.html",
-  "/playground.html": "/tools/playground.html",
-  "/cn/playground.html": "/zh/tools/playground.html",
+  "/resources.html": "/guide/playground.html",
+  "/cn/resources.html": "/zh/guide/playground.html",
+  "/playground.html": "/guide/playground.html",
+  "/cn/playground.html": "/zh/guide/playground.html",
+  "/tools/playground.html": "/guide/playground.html",
+  "/zh/tools/playground.html": "/zh/guide/playground.html",
   "/examples.html": "/community/code-demo.html",
   "/cn/examples.html": "/zh/community/code-demo.html",
   "/examples/dom-rect.html": "/community/code-demo.html",
diff --git a/docs/.vuepress/override.styl b/docs/.vuepress/override.styl
index 634bf69..10f84db 100644
--- a/docs/.vuepress/override.styl
+++ b/docs/.vuepress/override.styl
@@ -1,7 +1,289 @@
-#app .sidebar { width: 15rem; }
 #app .page { padding-bottom: 0; }
+#app .sidebar { width: 15rem; }
+#app .content:not(.custom) { max-width: 850px; }
+#app .custom-block.tip, #app .custom-block.warning, #app .custom-block.danger { padding: 0.1rem 1rem; border-left-width: 0.2rem; }
+#app blockquote { font-size: 15px; }
+#app table, #app thead, #app tr { width: 100% }
+
+#app {
+  .badge {
+    font-size: 12px;
+  }
+  .warning .custom-block-title {
+    padding-left: 21px;
+    color: #606273;
+    background: url(https://gw.alicdn.com/tfs/TB1tbEwACzqK1RjSZFjXXblCFXa-16-16.svg) 0 5px no-repeat;
+  }
+  .danger {
+    border-color: #FF6633;
+    background-color: #FFF2EE;
+    .custom-block-title {
+      padding-left: 21px;
+      color: #606273;
+      background: url(https://gw.alicdn.com/tfs/TB1mwIBAwHqK1RjSZJnXXbNLpXa-16-16.svg) 0 5px no-repeat;
+    }
+  } 
+  .tip {
+    border-color: #00B4FF;
+    .custom-block-title {
+      padding-left: 21px;
+      color: #606273;
+      background: url(https://gw.alicdn.com/tfs/TB1nbAzApzqK1RjSZFoXXbfcXXa-16-16.svg) 0 5px no-repeat;
+    }
+  }
+}
+
+.theme-container.page-module-modal {
+  table th:last-of-type {
+    width: 15%;
+  }
+}
+
+.theme-container.page-vue-in-weex {
+  table th:first-of-type {
+    width: 40%;
+    & + th {
+      width: 20%;
+    }
+  }
+  table th:last-of-type {
+    width: 40%;
+  }
+}
+
+#app .demo-wrapper .content:not(.custom) {
+  max-width: 1100px;
+}
+
+#app .demo-wrapper .page-nav {
+  max-width: 1100px;
+}
+
+#app .demo-wrapper .content {
+  h2, h3 {
+    margin-top: -3.1rem;
+    padding-top: 2rem;
+    margin-bottom: 0;
+  }
+  ul {
+    list-style: none;
+    display: flex;
+    flex-wrap: wrap;
+    padding: 0;
+    margin: 40px -13px;
+    li {
+      margin-left: 13px;
+      margin-right: 13px;
+    }
+  }
+}
+
+#app .help .page {
+  padding-bottom: 0;
+  padding-right: 0;
+  .content {
+    margin: 0;
+    padding: 0;
+    max-width: 10000px;
+  }
+  .page-edit {
+    padding: 0;
+  }
+  .render-md p {
+    margin: 0;
+  }
+}
+
+#app .tool .page {
+  padding-bottom: 0;
+  padding-right: 0;
+  .content {
+    margin: 0;
+    padding: 0;
+    max-width: 10000px;
+  }
+  .page-edit, .page-nav, .license-wrap {
+    display: none;
+  }
+}
+
+#app .tool-ide .page {
+  padding: 0;
+  .content {
+    margin: 0;
+    padding: 0;
+    padding-left: 15rem;
+    max-width: 10000px;
+  }
+  .page-edit, .page-nav, .license-wrap {
+    display: none;
+  }
+  h1 {
+    display: none;
+  }
+}
+
+#app .tool-kit .page {
+  padding: 0;
+  .content {
+    margin: 0;
+    padding: 0;
+    padding-left: 15rem;
+    max-width: 10000px;
+  }
+  img {
+    width: 100%;
+  }
+  .page-edit, .page-nav, .license-wrap {
+    display: none;
+  }  
+}
+
 #app .noFooter .page {
   .page-edit, .page-nav, .license-wrap {
     display: none;
   } 
+}
+
+#app .community .page {
+  .tag {
+    background: rgb(234,249,255);
+    color: #00b4ff;
+    .content {
+      padding: 0;
+      & > *:first-child {
+        margin-top: 0;
+      }
+    }
+    .actions {
+      color: #979A9C;
+      font-size: .85em;
+      margin-left: 10px;
+    }
+  }
+  .vue-tags-input .input {
+    border-radius: 4px;
+    padding: 2px 4px;
+    ul {
+      line-height: 1;
+    }
+    .new-tag-input {
+      min-width: 300px;
+      height: 14px;
+    }
+  }
+}
+
+.md h2 {
+  padding-top: 0;
+}
+.md pre {
+  background-color #f8f9fb;
+  padding: 1rem;
+  code {
+    display: block;
+    color: #828282;
+    width: 100%;
+    overflow: auto; 
+  }
+}
+
+@media screen and (max-width: 1700px)
+  #app .demo-wrapper .content:not(.custom)
+    margin-left 13rem
+
+  #app .demo-wrapper .page-nav
+    margin-left 13rem
+
+@media (max-width: 719px)
+  #app .demo-wrapper .content:not(.custom)
+    margin-left 0
+
+  #app .demo-wrapper .page-nav
+    margin-left 0
+
+@media screen and (max-width: 1400px) 
+  #app .tags .content:not(.custom)
+    margin-left 0
+
+//
+// Pagination (multiple pages)
+// --------------------------------------------------
+.pagination-wrap {
+  text-align: center;
+}
+.pagination {
+  display: inline-block;
+  margin: 20px auto;
+  border-radius: 4px;
+  overflow: hidden;
+
+  > li {
+    display: inline; // Remove list-style and block-level defaults
+    > a,
+    > span {
+      position: relative;
+      float: left; // Collapse white-space
+      padding: 6px 12px;
+      line-height: 1.4;
+      text-decoration: none !important;
+      color: #00b4ff;
+      background-color: #fff;
+      border: 1px solid #ddd;
+      margin-left: -1px;
+    }
+    &:first-child {
+      > a,
+      > span {
+        margin-left: 0;
+        border-top-left-radius: 4px;
+        border-bottom-left-radius: 4px;
+      }
+    }
+    &:last-child {
+      > a,
+      > span {
+        border-top-right-radius: 4px;
+        border-bottom-right-radius: 4px;
+      }
+    }
+  }
+
+  > li > a,
+  > li > span {
+    outline: none;
+    &:hover,
+    &:focus {
+      z-index: 3;
+      color: #23527c;
+      background-color: #eee;
+      border-color: #ddd;
+    }
+  }
+
+  > .active > a,
+  > .active > span {
+    &,
+    &:hover,
+    &:focus {
+      z-index: 2;
+      color: #fff;
+      background-color: #00b4ff;
+      border-color: #ddd;
+      cursor: default;
+    }
+  }
+
+  > .disabled {
+    > span,
+    > span:hover,
+    > span:focus,
+    > a,
+    > a:hover,
+    > a:focus {
+      color: #777;
+      border-color: #ddd;
+      cursor: not-allowed;
+    }
+  }
 }
\ No newline at end of file
diff --git a/docs/.vuepress/public/Android@2x.png b/docs/.vuepress/public/Android@2x.png
new file mode 100644
index 0000000..ceb2a45
--- /dev/null
+++ b/docs/.vuepress/public/Android@2x.png
Binary files differ
diff --git a/docs/.vuepress/public/BroadcastChannel.png b/docs/.vuepress/public/BroadcastChannel.png
new file mode 100644
index 0000000..050e043
--- /dev/null
+++ b/docs/.vuepress/public/BroadcastChannel.png
Binary files differ
diff --git a/docs/.vuepress/public/bubbling-capturing.png b/docs/.vuepress/public/bubbling-capturing.png
new file mode 100644
index 0000000..1a92811
--- /dev/null
+++ b/docs/.vuepress/public/bubbling-capturing.png
Binary files differ
diff --git a/docs/.vuepress/public/css-boxmodel.png b/docs/.vuepress/public/css-boxmodel.png
new file mode 100644
index 0000000..a2063e2
--- /dev/null
+++ b/docs/.vuepress/public/css-boxmodel.png
Binary files differ
diff --git a/docs/.vuepress/public/css-flexbox-align.jpg b/docs/.vuepress/public/css-flexbox-align.jpg
new file mode 100644
index 0000000..8a7f731
--- /dev/null
+++ b/docs/.vuepress/public/css-flexbox-align.jpg
Binary files differ
diff --git a/docs/.vuepress/public/css-flexbox-justify.svg b/docs/.vuepress/public/css-flexbox-justify.svg
new file mode 100644
index 0000000..33e742b
--- /dev/null
+++ b/docs/.vuepress/public/css-flexbox-justify.svg
@@ -0,0 +1,59 @@
+<svg xmlns="http://www.w3.org/2000/svg" width='504' height='270' viewBox="0 0 504 270">
+	<defs>
+		<pattern id='checker' width='20' height='20' patternUnits='userSpaceOnUse'>
+			<rect x='0' y='0' width='10' height='10' fill='#eee' />
+			<rect x='10' y='10' width='10' height='10' fill='#eee' />
+			<rect x='0' y='10' width='10' height='10' fill='#ccc' />
+			<rect x='10' y='0' width='10' height='10' fill='#ccc' />
+		</pattern>
+	</defs>
+	<style>
+		text { font-family: sans-serif; font-weight: bold; font-size: 30px; text-anchor: middle; }
+		rect { stroke-width: 2px; stroke: #888; }
+		g > rect:nth-child(1) { fill: #888 }
+		g > rect:nth-child(2) { fill: #fcc; }
+		g > rect:nth-child(3) { fill: #cfc; }
+		g > rect:nth-child(4) { fill: #ccf; }
+		g > rect:nth-child(5) { fill: transparent; }
+	</style>
+	<g transform="translate(2,2)">
+		<rect x='0' y='0' width='500' height='50' />
+		<rect x='0' y='0' width='100' height='50' />
+		<rect x='100' y='0' width='80' height='50' />
+		<rect x='180' y='0' width='200' height='50' />
+		<rect x='0' y='0' width='500' height='50' />
+		<text x='250' y='38'>flex-start</text>
+	</g>
+	<g transform="translate(2,56)">
+		<rect x='0' y='0' width='500' height='50' />
+		<rect x='120' y='0' width='100' height='50' />
+		<rect x='220' y='0' width='80' height='50' />
+		<rect x='300' y='0' width='200' height='50' />
+		<rect x='0' y='0' width='500' height='50' />
+		<text x='250' y='38'>flex-end</text>
+	</g>
+	<g transform="translate(2,110)">
+		<rect x='0' y='0' width='500' height='50' />
+		<rect x='60' y='0' width='100' height='50' />
+		<rect x='160' y='0' width='80' height='50' />
+		<rect x='240' y='0' width='200' height='50' />
+		<rect x='0' y='0' width='500' height='50' />
+		<text x='250' y='38'>center</text>
+	</g>
+	<g transform="translate(2,164)">
+		<rect x='0' y='0' width='500' height='50' />
+		<rect x='0' y='0' width='100' height='50' />
+		<rect x='160' y='0' width='80' height='50' />
+		<rect x='300' y='0' width='200' height='50' />
+		<rect x='0' y='0' width='500' height='50' />
+		<text x='250' y='38'>space-between</text>
+	</g>
+	<g transform="translate(2,218)">
+		<rect x='0' y='0' width='500' height='50' />
+		<rect x='20' y='0' width='100' height='50' />
+		<rect x='160' y='0' width='80' height='50' />
+		<rect x='280' y='0' width='200' height='50' />
+		<rect x='0' y='0' width='500' height='50' />
+		<text x='250' y='38'>space-around</text>
+	</g>
+</svg>
\ No newline at end of file
diff --git a/docs/.vuepress/public/iOS@2x.png b/docs/.vuepress/public/iOS@2x.png
new file mode 100644
index 0000000..6ef2f96
--- /dev/null
+++ b/docs/.vuepress/public/iOS@2x.png
Binary files differ
diff --git a/docs/.vuepress/public/iPhone.svg b/docs/.vuepress/public/iPhone.svg
new file mode 100644
index 0000000..43d1f16
--- /dev/null
+++ b/docs/.vuepress/public/iPhone.svg
@@ -0,0 +1,30 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 22.0.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="图层_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 435.2 895.2" style="enable-background:new 0 0 435.2 895.2;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#66B2FF;}
+	.st1{fill:none;}
+	.st2{fill:#BBDDFF;}
+</style>
+<path class="st0" d="M364.3,895.2H70.9C31.8,895.2,0,863.4,0,824.3V70.8C0,31.7,31.8-0.1,70.9-0.1h293.4c39.1,0,70.9,31.8,70.9,70.9
+	v753.4C435.2,863.3,403.4,895.2,364.3,895.2z M70.9,0.7C32.2,0.7,0.8,32.2,0.8,70.8v753.4c0,38.7,31.5,70.1,70.1,70.1h293.4
+	c38.7,0,70.1-31.5,70.1-70.1V70.8c0-38.7-31.5-70.1-70.1-70.1C364.3,0.7,70.9,0.7,70.9,0.7z"/>
+<path class="st0" d="M406.6,790.9H22.5V108.3h384.1V790.9z M23.2,790.1h382.6V109H23.2V790.1z"/>
+<path class="st1" d="M187.4,55c-2.5,0-4.6,2.1-4.6,4.6s2.1,4.6,4.6,4.6h60.3c2.5,0,4.6-2.1,4.6-4.6s-2.1-4.6-4.6-4.6H187.4z"/>
+<rect x="162.4" y="34.5" class="st1" width="110.4" height="50.1"/>
+<g>
+	<path class="st2" d="M247.6,64.1h-59.9c-2.2,0-4-1.8-4-4v-0.2c0-2.2,1.8-4,4-4h59.9c2.2,0,4,1.8,4,4v0.2
+		C251.6,62.3,249.8,64.1,247.6,64.1z"/>
+	<path class="st0" d="M247.5,64.5h-59.8c-2.5,0-4.5-2-4.5-4.5s2-4.5,4.5-4.5h59.7c2.5,0,4.5,2,4.5,4.5S249.9,64.5,247.5,64.5z
+		 M187.7,56.3c-2.1,0-3.7,1.7-3.7,3.7s1.7,3.7,3.7,3.7h59.7c2.1,0,3.7-1.7,3.7-3.7s-1.7-3.7-3.7-3.7H187.7z"/>
+</g>
+<g>
+	<circle class="st2" cx="167.8" cy="60" r="5.5"/>
+	<path class="st0" d="M167.8,65.8c-3.2,0-5.8-2.6-5.8-5.8s2.6-5.8,5.8-5.8s5.8,2.6,5.8,5.8C173.6,63.2,171.1,65.8,167.8,65.8z
+		 M167.8,54.9c-2.8,0-5.1,2.3-5.1,5.1s2.3,5.1,5.1,5.1s5.1-2.3,5.1-5.1S170.6,54.9,167.8,54.9z"/>
+</g>
+<ellipse transform="matrix(0.4641 -0.8858 0.8858 0.4641 -623.9302 640.7924)" class="st2" cx="217.6" cy="836" rx="34.2" ry="34.2"/>
+<path class="st0" d="M217.6,870.6c-19.1,0-34.6-15.5-34.6-34.6s15.5-34.6,34.6-34.6s34.6,15.5,34.6,34.6S236.7,870.6,217.6,870.6z
+	 M217.6,802.1c-18.7,0-33.9,15.2-33.9,33.9s15.2,33.9,33.9,33.9s33.9-15.2,33.9-33.9S236.3,802.1,217.6,802.1z"/>
+</svg>
diff --git a/docs/.vuepress/public/image-resize-property.png b/docs/.vuepress/public/image-resize-property.png
new file mode 100644
index 0000000..c3b17a2
--- /dev/null
+++ b/docs/.vuepress/public/image-resize-property.png
Binary files differ
diff --git a/docs/.vuepress/public/logo@2x.svg b/docs/.vuepress/public/logo@2x.svg
new file mode 100644
index 0000000..0001e0a
--- /dev/null
+++ b/docs/.vuepress/public/logo@2x.svg
@@ -0,0 +1,35 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="78px" height="39px" viewBox="0 0 78 39" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 52.3 (67297) - http://www.bohemiancoding.com/sketch -->
+    <title>TB1zBLaPXXXXXXeXXXXXXXXXXXX-121-59</title>
+    <desc>Created with Sketch.</desc>
+    <defs>
+        <polygon id="path-1" points="38.5024785 38.2713752 38.5024785 0.156635915 0 0.156635915 0 38.2713752"></polygon>
+        <polygon id="path-3" points="38.5024785 38.2713752 38.5024785 0.156635915 0 0.156635915 0 38.2713752"></polygon>
+    </defs>
+    <g id="weex" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="工具-1" transform="translate(-26.000000, -12.000000)">
+            <g id="Group-5">
+                <g id="TB1zBLaPXXXXXXeXXXXXXXXXXXX-121-59" transform="translate(26.000000, 12.000000)">
+                    <path d="M40.0783352,21.721519 C40.2240214,21.721519 40.3703494,21.8143021 40.3908867,21.9613664 L40.8491245,26.3291139 C40.8696618,26.5310907 40.9325572,26.6787862 41.0159898,26.6787862 C41.0994225,26.6787862 41.1828551,26.5317219 41.2033924,26.3291139 L41.7039883,21.9613664 C41.7450628,21.8143021 41.8079582,21.721519 41.9542863,21.721519 L44.0786099,21.721519 C44.1832217,21.721519 44.3083706,21.8143021 44.3289079,21.9247581 L44.8705784,26.3291139 C44.8917574,26.5310907 44.954011,26.6787862 45.0374437,26.6787862 C45.1208763,26.6787862 45.204309,26.5317219 45.225488,26.3291139 L45.6426513,21.9424311 C45.661905,21.8143021 45.7466212,21.721519 45.8717702,21.721519 L49.2475837,21.721519 C49.4561653,21.721519 49.5184189,21.8326062 49.4978816,21.9803017 L47.5596769,35.2665857 C47.5384979,35.4508895 47.4133489,35.5430414 47.2888417,35.5430414 L44.2467588,35.5430414 C44.1252323,35.542468 44.0207651,35.4581686 43.9964609,35.3410647 L43.2038507,30.8805341 C43.1826716,30.716428 43.120418,30.5864054 43.0369854,30.5864054 C42.9535527,30.5864054 42.8912991,30.7341009 42.8701201,30.9001006 L42.1416888,35.3233917 C42.0999725,35.4521519 42.0370771,35.5443038 41.9125699,35.5443038 L38.8274872,35.5443038 C38.6846577,35.5428511 38.5627169,35.4424738 38.5361147,35.3044564 L36.5343728,21.9613664 C36.5131937,21.7953667 36.6178054,21.721519 36.7634917,21.721519 L40.0764098,21.721519 L40.0783352,21.721519 Z M50.4355363,21.9613664 C50.4355363,21.8509104 50.5606853,21.721519 50.7063715,21.721519 L58.1049224,21.721519 C58.2294296,21.721519 58.3128623,21.8136709 58.3128623,21.9247581 L58.3128623,25.2415953 C58.3128623,25.3520513 58.2088923,25.4258991 58.0837434,25.4258991 L54.6033182,25.4258991 C54.5198855,25.4258991 54.4576319,25.4808115 54.4576319,25.5540281 L54.4576319,26.5866343 C54.4576319,26.6592197 54.5410646,26.7147633 54.6033182,26.7147633 L58.1203254,26.7147633 C58.203758,26.7147633 58.2660116,26.7703069 58.2660116,26.8435235 L58.2660116,30.1976001 C58.2640343,30.2878375 58.19086,30.360909 58.0991463,30.364231 L54.5417064,30.364231 C54.4582737,30.364231 54.3953783,30.4197746 54.3953783,30.5119265 L54.3953783,31.5994451 C54.3953783,31.6732929 54.4576319,31.7288365 54.5198855,31.7288365 L58.1254597,31.7288365 C58.2711459,31.7288365 58.3552204,31.8209884 58.3552204,31.9131403 L58.3552204,35.3404335 C58.3552204,35.4515207 58.2506087,35.5424103 58.1254597,35.5424103 L50.6646552,35.5424103 C50.5395062,35.5424103 50.4355363,35.4325854 50.4355363,35.3038252 L50.4355363,21.9613664 Z M59.7093965,21.9613664 C59.7093965,21.8509104 59.8339037,21.721519 59.9802317,21.721519 L67.3781409,21.721519 C67.5026481,21.721519 67.5860807,21.8136709 67.5860807,21.9247581 L67.5860807,25.2415953 C67.5860807,25.3520513 67.481469,25.4258991 67.3569618,25.4258991 L63.8765366,25.4258991 C63.793104,25.4258991 63.7308504,25.4808115 63.7308504,25.5540281 L63.7308504,26.5866343 C63.7308504,26.6592197 63.814283,26.7147633 63.8765366,26.7147633 L67.3935438,26.7147633 C67.4769765,26.7147633 67.5392301,26.7703069 67.5392301,26.8435235 L67.5392301,30.1976001 C67.5372528,30.2878375 67.4640784,30.360909 67.3723648,30.364231 L63.814283,30.364231 C63.7308504,30.364231 63.6685968,30.4197746 63.6685968,30.5119265 L63.6685968,31.5994451 C63.6685968,31.6732929 63.7308504,31.7288365 63.793104,31.7288365 L67.3986781,31.7288365 C67.5443644,31.7288365 67.627797,31.8209884 67.627797,31.9131403 L67.627797,35.3404335 C67.627797,35.4515207 67.5225435,35.5424103 67.3980363,35.5424103 L59.9378736,35.5424103 C59.8133664,35.5424103 59.7087547,35.4325854 59.7087547,35.3038252 L59.7087547,21.9613664 L59.7093965,21.9613664 Z M70.962536,28.6139761 C70.9859702,28.5680649 71.0001367,28.5181231 71.0042523,28.4669117 C71.0042523,28.4290411 70.9830732,28.3375204 70.9618942,28.2826079 L68.585989,21.9247581 C68.5442726,21.8326062 68.585989,21.721519 68.7111379,21.721519 L72.524652,21.721519 C72.6080846,21.721519 72.6703382,21.7953667 72.6915173,21.8692145 L73.1702923,23.7861002 C73.1914714,23.859948 73.2325459,23.9154916 73.253725,23.9154916 C73.2954413,23.9154916 73.3371576,23.859948 73.3576949,23.7867314 L73.8371118,21.8704769 C73.8582908,21.778325 73.9205444,21.7227813 74.0039771,21.7227813 L77.8174911,21.7227813 C77.9009237,21.7227813 77.9843564,21.778325 77.9843564,21.8704769 C77.9843564,21.9070851 77.9843564,21.9443246 77.9638191,21.999237 L75.5879139,28.2100225 C75.5461976,28.2838703 75.5250185,28.4119993 75.5250185,28.4498699 C75.5250185,28.4864782 75.5461976,28.5969343 75.5667348,28.6518467 L77.9843564,35.36 C78.0260727,35.4893914 77.9843564,35.5443038 77.8592074,35.5443038 L73.982798,35.5443038 C73.9205444,35.5443038 73.8582908,35.4893914 73.8371118,35.4155436 L73.3576949,33.1496168 C73.3371576,33.0751379 73.2954413,33.0385296 73.2742622,33.0385296 C73.2325459,33.0385296 73.2120087,33.0751379 73.1908296,33.1489856 L72.7120545,35.4149124 C72.6908755,35.4893914 72.6074428,35.5443038 72.5240102,35.5443038 L68.6886753,35.5443038 C68.6052426,35.5443038 68.5641681,35.5076955 68.5641681,35.4521519 C68.5641681,35.4155436 68.5641681,35.3966083 68.5847054,35.36 L70.9606106,28.6152384 L70.962536,28.6139761 Z" id="Shape" fill="#515151" fill-rule="nonzero"></path>
+                    <g id="Group">
+                        <g id="Clipped">
+                            <mask id="mask-2" fill="white">
+                                <use xlink:href="#path-1"></use>
+                            </mask>
+                            <g id="a"></g>
+                            <path d="M22.4171013,14.2682266 C21.4668893,14.2420836 20.7099483,13.4512059 20.7099483,12.4845351 C20.7099483,11.5178643 21.4668893,10.7269865 22.4171013,10.7008436 C23.3673132,10.7269865 24.1242542,11.5178643 24.1242542,12.4845351 C24.1242542,13.4512059 23.3673132,14.2420836 22.4171013,14.2682266 M35.6517266,7.53940871 C34.6207689,6.2594658 33.3662469,5.18414224 31.9512684,4.36753143 C22.4556076,-2.67847415 9.17092405,-0.676145033 2.08961013,8.81468612 C4.68686203,5.40393907 8.59332911,3.591531 12.559481,3.57129886 C5.15343038,6.98857241 0,14.5619189 0,23.3648573 C0,25.8253465 0.537163291,28.3426162 1.2790519,30.5472667 C2.34439367,29.563071 3.31539494,26.968136 4.45454051,26.0687848 C5.01288228,28.8555988 6.09362658,32.9457541 7.59023924,35.2339438 C8.98160127,32.3733804 10.1124038,30.3749672 12.1834025,28.018902 C12.748162,32.1305947 15.0745861,35.2319858 17.5730051,38.2720279 C17.423689,34.7675248 18.1148503,31.2786801 19.5868861,28.106357 C19.6870025,28.1559584 19.7877608,28.2042545 19.8898025,28.2525505 C21.5085494,31.3443113 23.8347007,33.9948417 26.6720506,35.980575 C25.7183772,33.9619296 25.1831392,31.7696795 24.8827899,29.4645209 C24.757654,28.5090842 24.6946235,27.5462942 24.6941089,26.5824201 C24.6941089,24.4789303 24.6299316,22.4459266 25.1780051,20.5219155 C25.4347139,19.6251749 25.5053089,18.7532349 25.8679101,17.907401 C26.0091,17.5791182 26.1567076,17.2547513 26.3139418,16.934953 C26.9903696,15.5513358 27.6918266,14.2284149 28.718662,12.9368213 C28.913119,12.691425 29.2333633,12.4505973 29.4374468,12.2136855 C30.3583899,11.2921442 32.1008013,10.722381 33.4960139,10.722381 C36.1420405,10.722381 38.2489785,12.6268127 38.5018367,15.2582961 C38.408138,12.1947586 37.4377785,9.75384896 35.6510848,7.53875606" id="Shape" fill="#00B4FF" fill-rule="nonzero" mask="url(#mask-2)"></path>
+                        </g>
+                        <g id="Clipped">
+                            <mask id="mask-4" fill="white">
+                                <use xlink:href="#path-3"></use>
+                            </mask>
+                            <g id="a"></g>
+                            <path d="M23.0877532,11.3822098 C23.4752416,11.3819766 23.8334181,11.5919876 24.0273609,11.9331336 C24.2213037,12.2742795 24.2215483,12.6947323 24.0280026,13.0361115 C23.834457,13.3774906 23.4765252,13.5879325 23.0890367,13.5881656 C22.4900315,13.5885261 22.0041544,13.0949983 22.0038,12.4858404 C22.0034456,11.8766825 22.4887479,11.3825703 23.0877532,11.3822098" id="Shape" fill="#515151" fill-rule="nonzero" mask="url(#mask-4)"></path>
+                        </g>
+                    </g>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/docs/.vuepress/public/native-component.png b/docs/.vuepress/public/native-component.png
new file mode 100644
index 0000000..9dd5550
--- /dev/null
+++ b/docs/.vuepress/public/native-component.png
Binary files differ
diff --git a/docs/.vuepress/public/sauce_labs_red.svg b/docs/.vuepress/public/sauce_labs_red.svg
new file mode 100644
index 0000000..98e31a9
--- /dev/null
+++ b/docs/.vuepress/public/sauce_labs_red.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 166 54"><defs><style>.cls-1{isolation:isolate;}.cls-2{opacity:0.15;mix-blend-mode:multiply;}.cls-3{fill:#e1251b;}.cls-4,.cls-5{fill:#fff;}.cls-5{font-size:6.14px;font-family:MuseoSans-500, Museo Sans;letter-spacing:0.18em;}.cls-6{letter-spacing:0.18em;}.cls-7{letter-spacing:0.17em;}.cls-8{letter-spacing:0.18em;}</style></defs><title>Powered by Sauce Labs badges red</title><g class="cls-1"><g id="red"><image class="cls-2" width="172" height="60" transform="translate(-3 -3)" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAKwAAAA8CAYAAAD7V1GbAAAACXBIWXMAAAsSAAALEgHS3X78AAADB0lEQVR4Xu3dTU/bQBCH8WcDAURBVV8OiPbS7/+9qh4KKm9RISHTw+w4G9tBreSkGun/k1aAndweLWtfppgZY0opZfSGyAHYjjBL/3oNNWJtfxc5BKsLvNutQLtgmx11NrJA4cp+RZjrkdXtuMe9L83qtXmzjlG0sl9trCtg2axVvQ7UYOvuGrGeAufAu7pO2USrYGUfjE2sz8BTXYt6f1VKWZuZxQ4bwc7xWD8Cn+rPSzzaI3SmlenFmfUVj/UBuAVu6v04Fhhgx72z6xy4AD4DX4FrPNrzei+OBiJTWuP//hd4rN/xjfEFj3gJvJZSyls77DXwDbjCd9kTdCyQ6cVx4AXfXX/U6wvgF3DPprvBkSDOsBd4tFfAF+A9cIaClelFsL+Bu3rtDm9w8Py06y1BPHhd4rF+YPscKzKV9vwKvqOesx1rpw02HqhmeJhz/BhwWtcZClamF8GCd3aCt3fEZmftmuvvsLCJto23XQpWphTvYKOvtr1Ba2PBhvLGEpnSXzem11SSioKVVBSspKJgJRUFK6koWElFwUoqClZSUbCSioKVVBSspKJgJRUFK6koWElFwUoqClZSUbCSioKVVBSspKJgJRUFK6koWElFwUoqClZSUbCSioKVVBSspKJgJRUFK6koWElFwUoqClZSUbCSioKVVBSspPLWjAPbsUSm9E+djQUbg77i52uzQEM5ZFox9ihW294g3DbYKDsiXbKZ9RlDvzT2SKbWDpZ7xptbsh1vF25/h21HgC/w2Z8xTlGjO2Uf+qM7H/D2nvEW1+2HI9j+vPpHfKpyDKq9R8ORZT/GhiPf4g220RoMg+2PAAevXuPnZZ/G2rutfy9pgzUzK6WU5kuPwM/6gSd8QHI7GFk7rEwpzqhxjn3AY73BW4xgMTPbtcNSv3zHyAhwkYn1j6RPdQ122GLmD2B1l53hcc6b1Y4AV7CyD/EWIKJdNmsFrK2GuustQey2MxSrHEYbbX91uh22u+A7bcSpM6scWvve1awX6CDY7oaHK/Jf9EMNfwC26Q1uGODl8wAAAABJRU5ErkJggg=="/><rect class="cls-3" x="3" y="3" width="160" height="48" rx="3" ry="3"/><path class="cls-4" d="M13.33,36.05a8,8,0,0,1-.54-2.92A8.17,8.17,0,0,1,21,25a8.77,8.77,0,0,1,1.15.08l-.92.93h-.25a7.15,7.15,0,0,0-6.88,9.1h6.26L17.7,40,24,33.62h-8.6L25.09,24a9.94,9.94,0,0,0-4.15-.9,10.07,10.07,0,0,0-5.25,18.66l3-5.67Z"/><path class="cls-4" d="M26.19,24.54l-3,5.67h5.37a8.15,8.15,0,0,1-7.61,11.07,9.39,9.39,0,0,1-1.19-.08l.91-.92h.28a7.15,7.15,0,0,0,7.15-7.15,7.83,7.83,0,0,0-.27-1.94H21.57l2.61-4.93-6.42,6.39h8.62L16.8,42.31a10.07,10.07,0,0,0,9.39-17.77Z"/><path class="cls-4" d="M36,39.35l.86-1.27a.44.44,0,0,1,.69-.09,4.09,4.09,0,0,0,2.76,1.16,1.94,1.94,0,0,0,2-1.89c0-1-.66-1.62-1.91-2.44-1.46-1-3.2-2.22-3.2-4.44s1.54-4.62,5-4.62a6.11,6.11,0,0,1,4,1.44.63.63,0,0,1,.06.89l-.86,1.22c-.18.27-.47.29-.78.05a3.67,3.67,0,0,0-2.51-1,1.82,1.82,0,0,0-1.89,1.73c0,.89.6,1.33,1.93,2.22s3.42,2.2,3.42,4.64c0,2.6-2,4.78-5.3,4.78A6.21,6.21,0,0,1,36,40C35.86,39.88,35.75,39.68,36,39.35Z"/><path class="cls-4" d="M46.92,41l8.35-15a.42.42,0,0,1,.38-.24h.2a.32.32,0,0,1,.31.24l4.09,15a.44.44,0,0,1-.42.58H57.9c-.34,0-.52-.12-.58-.45l-.56-2.46H51.23l-1.29,2.46a.79.79,0,0,1-.71.45h-2C46.88,41.53,46.77,41.24,46.92,41Zm9.13-4.73-1-4.84h0l-2.42,4.84Z"/><path class="cls-4" d="M64.51,26.4A.51.51,0,0,1,65,26h2.2a.35.35,0,0,1,.33.42l-1.33,9.35a3.54,3.54,0,0,0,0,.71,2.09,2.09,0,0,0,2.27,2.36c1.82,0,2.84-1.18,3.11-3l1.33-9.37a.47.47,0,0,1,.44-.42h2.2a.37.37,0,0,1,.34.42l-1.36,9.51c-.47,3.37-2.82,5.84-6.28,5.84a4.81,4.81,0,0,1-5.07-5,6.94,6.94,0,0,1,.07-.89Z"/><path class="cls-4" d="M86.5,25.76a6,6,0,0,1,4.62,2.11.46.46,0,0,1-.09.62l-1.2,1.15a.49.49,0,0,1-.73,0,4,4,0,0,0-2.75-1.11c-2.67,0-5,2.76-5,5.93,0,2.36,1.27,4.38,3.4,4.38a4.6,4.6,0,0,0,3-1.31c.29-.25.53-.2.71,0L89.68,39a.53.53,0,0,1-.11.6,7.11,7.11,0,0,1-5,2.16c-3.84,0-6.33-3.09-6.33-6.91C78.22,29.62,81.9,25.76,86.5,25.76Z"/><path class="cls-4" d="M95.3,26.4a.47.47,0,0,1,.42-.42h8.22a.35.35,0,0,1,.33.42L104,28.22a.47.47,0,0,1-.44.43H97.87l-.51,3.64h4.71a.36.36,0,0,1,.33.42l-.26,1.84a.49.49,0,0,1-.45.42H97l-.55,3.89h5.71c.22,0,.33.2.31.42l-.25,1.82a.47.47,0,0,1-.44.43H93.54a.34.34,0,0,1-.31-.43Z"/><path class="cls-4" d="M109.56,26.4A.49.49,0,0,1,110,26h1a.37.37,0,0,1,.34.42L109.36,40H115a.35.35,0,0,1,.31.42l-.09.64a.49.49,0,0,1-.44.43h-7a.36.36,0,0,1-.33-.43Z"/><path class="cls-4" d="M117.15,41l8.2-15a.42.42,0,0,1,.37-.24h.2a.32.32,0,0,1,.31.24l4,15a.47.47,0,0,1-.42.58h-.94a.32.32,0,0,1-.33-.25l-.89-3.66h-6.93l-1.89,3.66a.47.47,0,0,1-.42.25h-1C117.11,41.53,117,41.24,117.15,41Zm10-4.71L125.44,29h-.14l-3.8,7.28Z"/><path class="cls-4" d="M140.94,33.71a3.37,3.37,0,0,1,1.88,3,4.67,4.67,0,0,1-5,4.8h-4.6a.36.36,0,0,1-.33-.43L135,26.4a.51.51,0,0,1,.45-.42h4.42a3.42,3.42,0,0,1,3.57,3.53,4.44,4.44,0,0,1-2.46,4.13ZM138.14,40A3,3,0,0,0,141,36.88a2.33,2.33,0,0,0-2.38-2.39h-3.11L134.7,40Zm.67-7.09c1.64,0,2.7-1.31,2.7-3.26,0-1.29-.66-2.18-1.95-2.18H136.5L135.72,33Z"/><path class="cls-4" d="M145.56,39.19l.35-.37c.27-.27.45-.36.71-.11a4.32,4.32,0,0,0,3.29,1.55,2.65,2.65,0,0,0,2.8-2.69c0-1.4-1.05-2.22-2.89-3.28s-3-2-3-4.05c0-1.86,1.17-4.48,4.81-4.48a5.7,5.7,0,0,1,3.45,1.13c.11.09.31.33,0,.76l-.25.35c-.22.31-.44.4-.73.2a4.52,4.52,0,0,0-2.64-.95,2.88,2.88,0,0,0-3,2.79c0,1.25.85,2.07,2.25,2.82,2.13,1.16,3.75,2.25,3.75,4.54,0,2.46-1.78,4.35-4.86,4.35a5.69,5.69,0,0,1-4.16-1.91C145.36,39.68,145.27,39.48,145.56,39.19Z"/><text class="cls-5" transform="translate(70.41 17.62)">TESTING P<tspan class="cls-6" x="40.52" y="0">O</tspan><tspan x="46.65" y="0">WERED </tspan><tspan class="cls-7" x="76.21" y="0">B</tspan><tspan class="cls-8" x="81.16" y="0">Y</tspan></text></g></g></svg>
\ No newline at end of file
diff --git a/docs/.vuepress/public/tool-playground-android-icon.png b/docs/.vuepress/public/tool-playground-android-icon.png
new file mode 100644
index 0000000..2691e57
--- /dev/null
+++ b/docs/.vuepress/public/tool-playground-android-icon.png
Binary files differ
diff --git a/docs/.vuepress/public/tool-playground-apple-icon.png b/docs/.vuepress/public/tool-playground-apple-icon.png
new file mode 100644
index 0000000..70c1ea4
--- /dev/null
+++ b/docs/.vuepress/public/tool-playground-apple-icon.png
Binary files differ
diff --git a/docs/.vuepress/public/tool-playground-qrcode.png b/docs/.vuepress/public/tool-playground-qrcode.png
new file mode 100644
index 0000000..bdfd4b2
--- /dev/null
+++ b/docs/.vuepress/public/tool-playground-qrcode.png
Binary files differ
diff --git a/docs/.vuepress/public/toolkit-preview.png b/docs/.vuepress/public/toolkit-preview.png
new file mode 100644
index 0000000..5046052
--- /dev/null
+++ b/docs/.vuepress/public/toolkit-preview.png
Binary files differ
diff --git a/docs/.vuepress/public/vue-rax.png b/docs/.vuepress/public/vue-rax.png
new file mode 100644
index 0000000..1e6e57e
--- /dev/null
+++ b/docs/.vuepress/public/vue-rax.png
Binary files differ
diff --git a/docs/.vuepress/public/weex-example-yo.png b/docs/.vuepress/public/weex-example-yo.png
new file mode 100644
index 0000000..81e78c1
--- /dev/null
+++ b/docs/.vuepress/public/weex-example-yo.png
Binary files differ
diff --git a/docs/.vuepress/sub-components/License.vue b/docs/.vuepress/sub-components/License.vue
new file mode 100644
index 0000000..cb5db72
--- /dev/null
+++ b/docs/.vuepress/sub-components/License.vue
@@ -0,0 +1,170 @@
+<template>
+  <footer class="footer-container">
+    <div class="footer-body">
+      <img class="logo" src="/logo@2x.svg">
+      <img class="apache" src="//img.alicdn.com/tfs/TB11BRiIW6qK1RjSZFmXXX0PFXa-365-365.png">
+      <div class="cols-container">
+        <div class="col col-12">
+          <h3>Disclaimer</h3>
+          <p>Apache Weex is an effort undergoing incubation at The Apache Software Foundation (ASF), sponsored by the
+            Incubator. Incubation is required of all newly accepted projects until a further review indicates that the
+            infrastructure, communications, and decision making process have stabilized in a manner consistent with
+            other successful ASF projects. While incubation status is not necessarily a reflection of the completeness
+            or stability of the code, it does indicate that the project has yet to be fully endorsed by the ASF.</p>
+        </div>
+        <div class="col col-4">
+          <dl><dt>ASF</dt>
+            <dd><a href="http://www.apache.org" target="_self">Foundation</a></dd>
+            <dd><a href="http://www.apache.org/licenses/" target="_self">License</a></dd>
+            <dd><a href="http://www.apache.org/events/current-event" target="_self">Events</a></dd>
+            <dd><a href="http://www.apache.org/foundation/sponsorship.html" target="_self">Sponsorship</a></dd>
+            <dd><a href="http://www.apache.org/foundation/thanks.html" target="_self">Thanks</a></dd>
+          </dl>
+        </div>
+        <div class="col col-4">
+          <dl><dt>Documentation</dt>
+            <dd><a href="/guide/develop/create-a-new-app.html" target="_self">Quick start</a></dd>
+            <dd><a href="/guide/develop/setup-develop-environment.html" target="_self">Developer guide</a></dd>
+          </dl>
+        </div>
+        <div class="col col-4">
+          <dl><dt>Resources</dt>
+            <dd><a href="/blog/write-a-blog.html" target="_self">Blog</a></dd>
+            <dd><a href="/community/" target="_self">Community</a></dd>
+            <dd><a href="/guide/contribute/thanks.html" target="_self">Thanks by Weex</a></dd>
+            <dd><a href="https://www.apache.org/security/" target="_self">Security</a></dd>
+          </dl>
+        </div>
+      </div>
+      <div class="copyright"><span>Copyright © 2018-2019 The Apache Software Foundation. Apache and the Apache feather
+          logo are trademarks of The Apache Software Foundation.</span></div>
+    </div>
+  </footer>
+</template>
+
+<style scoped>
+.footer-container {
+    background: #F8F8F8;
+}
+
+.footer-container .footer-body {
+    max-width: 1280px;
+    margin: 0 auto;
+    box-sizing: border-box;
+    padding: 40px 40px 0;
+}
+
+@media screen and (max-width: 640px) {
+    .footer-container .footer-body {
+        padding-left: 20px;
+        padding-right: 20px;
+    }
+}
+
+.footer-container .footer-body img {
+    width: 100px;
+    height: 40px;
+    margin-left: -10px;
+    margin-bottom: 28px;
+    vertical-align: middle;
+}
+
+.footer-container .footer-body .apache {
+    width: 50px;
+    height: 50px;
+    margin-left: 0;
+}
+
+.footer-container .footer-body .cols-container {
+    margin-bottom: 60px;
+}
+
+.footer-container .footer-body .cols-container .col {
+    display: inline-block;
+    box-sizing: border-box;
+    vertical-align: top;
+}
+
+.footer-container .footer-body .cols-container .col-12 {
+    width: 50%;
+    padding-right: 125px;
+}
+
+.footer-container .footer-body .cols-container .col-6 {
+    width: 25%;
+}
+
+.footer-container .footer-body .cols-container .col-4 {
+    width: 16.666667%;
+}
+
+.footer-container .footer-body .cols-container h3 {
+    font-family: Avenir-Heavy;
+    font-size: 18px;
+    color: #333;
+    line-height: 18px;
+    margin-bottom: 20px;
+}
+
+.footer-container .footer-body .cols-container p {
+    font-family: Avenir-Medium;
+    font-size: 12px;
+    color: #999;
+    line-height: 18px;
+}
+
+.footer-container .footer-body .cols-container dl {
+    font-family: Avenir-Heavy;
+    line-height: 18px;
+}
+
+.footer-container .footer-body .cols-container dt {
+    font-weight: bold;
+    font-size: 18px;
+    color: #333;
+    margin-bottom: 20px;
+}
+
+.footer-container .footer-body .cols-container dd {
+    padding: 0;
+    margin: 0;
+}
+
+.footer-container .footer-body .cols-container dd a {
+    text-decoration: none;
+    display: block;
+    font-size: 14px;
+    color: #999;
+    margin: 10px 0;
+}
+
+.footer-container .footer-body .cols-container dd a:hover {
+    color: #2DACEC;
+}
+
+.footer-container .footer-body .copyright {
+    border-top: 1px solid #ccc;
+    min-height: 60px;
+    line-height: 20px;
+    text-align: center;
+    font-family: Avenir-Medium;
+    font-size: 12px;
+    color: #999;
+    display: flex;
+    align-items: center;
+}
+
+.footer-container .footer-body .copyright span {
+    display: inline-block;
+    margin: 0 auto;
+}
+
+@media screen and (max-width: 640px) {
+    .footer-container .footer-body .cols-container .col {
+        width: 100%;
+        text-align: center;
+        padding: 0;
+    }
+}
+</style>
+
diff --git a/docs/.vuepress/sub-components/Tab.vue b/docs/.vuepress/sub-components/Tab.vue
new file mode 100644
index 0000000..db1c305
--- /dev/null
+++ b/docs/.vuepress/sub-components/Tab.vue
@@ -0,0 +1,56 @@
+<template>
+  <div class="tabs">
+    <div :class="['tab', index === 0 ? 'active' : null]" @click="select(0)">{{lang === 'en-US' ? 'Latest' : '最新'}}</div>
+    <div :class="['tab', index === 1 ? 'active' : null]" @click="select(1)">{{lang === 'en-US' ? 'Topper' : '热门'}}</div>
+    <div :class="['tab', index === 2 ? 'active' : null]" @click="select(2)">{{lang === 'en-US' ? 'My Favorite' : '我的收藏'}}</div>
+    <div :class="['tab', index === 3 ? 'active' : null]" @click="select(3)">{{lang === 'en-US' ? 'My Works' : '我的发布'}}</div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: ['lang'],
+  data() {
+    return {
+      index: 0
+    }
+  },
+  methods: {
+    select(index) {
+      this.index = index;
+      this.$emit('onChange', index)
+    }
+  }
+}
+</script>
+
+
+<style scoped>
+.tabs {
+  background-color: #F3F5F8;
+  display: flex;
+  height: 40px;
+  line-height: 40px;
+}
+.tab {
+  width: 112px;
+  text-align: center;
+  border-right: 1px solid #e9ebec;
+  cursor: pointer;
+  font-size: 14px;
+}
+.tab.active {
+  background-color: #fff;
+  color: #00b4ff;
+  position: relative;
+}
+.tab.active:before {
+  position: absolute;
+  left: 0;
+  top: 0;
+  content: '';
+  width: 100%;
+  height: 3px;
+  background-color: #00b4ff;
+}
+</style>
diff --git a/docs/README.md b/docs/README.md
index 59f7ff8..78878ef 100644
--- a/docs/README.md
+++ b/docs/README.md
@@ -1,7 +1,3 @@
-<script>
-module.exports = {
-  created(){
-    this.$router.push('/guide/')
-  }
-}
-</script>
\ No newline at end of file
+---
+layout: IndexEn
+---
\ No newline at end of file
diff --git a/docs/blog/weex-third-party-extensions.md b/docs/blog/weex-third-party-extensions.md
new file mode 100644
index 0000000..85a8830
--- /dev/null
+++ b/docs/blog/weex-third-party-extensions.md
@@ -0,0 +1,14 @@
+In this article, we list some mature third-party plugins for Weex.
+
+<img src="https://img.alicdn.com/tfs/TB1o1ulg1GSBuNjSspbXXciipXa-579-134.svg" alt="drawing" width="200"/>
+
+BindingX is a new way to implement complex effect on Weex and React Native and Html5.
+The main idea is translate the user interaction into expression, then transfer those expressions into native environment. When the action occurs, all computing task will running on the native side, NO redundant js-bridge calls any more.
+
+[Visit BindingX](https://alibaba.github.io/bindingx/guide/introduce)
+
+# GCanvas
+
+GCanvas is a cross-platform rendering engine for mobile devices developed by Taobao. It is written with C++ based on OpenGL ES, so it can provide high performance 2D/WebGL rendering capabilities for Javascript runtime. It also has browser-like canvas APIs, so it's very convenient and flexiable for use, especially for web developers.
+
+[Visit GCanvas](https://github.com/alibaba/GCanvas)
\ No newline at end of file
diff --git a/docs/community/README.md b/docs/community/README.md
index 2cf69f4..ebdb160 100644
--- a/docs/community/README.md
+++ b/docs/community/README.md
@@ -1,7 +1,7 @@
 <script>
 module.exports = {
   created(){
-    this.$router.push('/community/roadmap.html')
+    this.$router.push('/community/weex-third-party-extensions.html')
   }
 }
 </script>
\ No newline at end of file
diff --git a/docs/community/release-procedure.md b/docs/community/release-procedure.md
deleted file mode 100644
index 4fc911a..0000000
--- a/docs/community/release-procedure.md
+++ /dev/null
@@ -1,244 +0,0 @@
-# Abstract
-::: warning
-This page only gives a brief step of Weex release, always reference the [release policy of ASF](https://www.apache.org/legal/release-policy.html) if you have questions or confusions. 
-:::
-
-::: tip
-Content of this page aimed at Weex release manager, PPMCs and committers of Weex. End-users may consider using the [artifacts of Weex release](../download/download) directly.
-:::
-
-This page describes the steps of Weex release under ASF policy. 
-
-> Releases are, by definition, anything that is published beyond the group that owns it. 
-
-A release is normally conducted by a release manager who is a committer or PPMC member of Weex. 
-
-::: warning
-Release must be voted before publishing according to the ASF's policy. 
-:::
-
-::: warning
-Release are always about source code, binary is only published for users' convenience.
-:::
-
-# Before start
-## Prepare environment
-To generate and compile a weex release, you need to set up the following environment:
-* [Weex build environment](https://github.com/apache/incubator-weex/blob/master/HOW-TO-BUILD.md#build-environment), which includes Android, iOS, JS, C++ toolchains.
-* [OpenPGP environment](http://www.apache.org/dev/openpgp.html#key-gen-generate-key), which is used to generate signature and checksum for release candidate. Please note that OpenPGP is not the same as your `ssh` key though both of them may use the same cryptography algorithm. You may simply use `brew install gpg` to install tools and setup your key pair by `gpg --full-gen-key`.
-
-## Create release branch
-The release branch should be named to `release/xxx`, like `release/0.24`. Then the release manager should push the release branch to the remote repository.
-
-::: tip
-Normally, developers should create a release branch based on the latest commit of `master`. One can also break this rule if you have proper reasons, like there is an unstable commit in `master`.
-:::
-
-## Request buy-in
-Remember to send an email to [dev@weex.apache.org](mailto:dev@weex.apache.org) to see that if there is any has any reason to postpone your release.
-
-    I'd like to start a release for Weex 0.xxxxxxx based on release/xxxxxxxxx branch.
-
-    Does anyone have any reason to delay a Weex release? Any vital patches needs to be merged?
-
-    If not, I will start the release process tomorrow.
-
-# Release candidate
-> Release Candidates are packages that have been proposed for approval as a release but have not yet been approved by the project. 
-
-## Generate release candidate
-Release manager could invoke `scripts/apache_release.sh $RELEASE_CANDIDATE $TAG_OF_LATEST_RELEASE` to generate a release candidate. The explanation of the variable is listed below:
-* `$RELEASE_CANDIDATE` The full-name of the release candidate, like 0.24.0-RC3
-* `$TAG_OF_LATEST_RELEASE`  Weex tag of last release, like 0.19.0.2. RELEASE_NOTE.md came from the difference between `$RELEASE_CANDIDATE` and `$TAG_OF_LATEST_RELEASE` .
-
-The above script will do following things for the release manager:
-1. Generate `RELEASE_NOTE.md` based on the history of git commit and `CHANGELOG.md`.
-1. Create a temp directory named `apache_release_temp` and copy files related to the release to this dir. Files like test file, local configure files, build directory, weex playground and etc. are exclude from a release by this script. 
-1. Run [Apache Rat](https://creadur.apache.org/rat/), which is a release audit tool used for check license and output the result to `RELEASE_AUDIT.LOG`
-1. Create a tarball, signature and checksum for your release.
-
-Release manager should always check the following things before you move to the next step:
-1. Check RELEASE_AUDIT.LOG to see if there is any license problems in your release candidate.
-1. Go to `apache_release_temp` and verify you can compile it from source by running `scripts/build_from_source.sh $NDK18_dir`
-
-## Publish release candidate
-::: warning
-The procedure below may not work well if the release manager is not a PPMC member of Weex as it needs to publish artifact with the privilege of PPMC. If this is the case, please contact one of the PPMC member and ask him/her to execute the following script for you with the following information:
-* The tarball of the source file, like `apache-weex-incubating-xxxxx-xxxxx-src.tar.gz`
-* The signature of the source file, like `apache-weex-incubating-xxxxx-xxxxx-src.tar.gz.asc`
-* The checksum of the source file, like `apache-weex-incubating-xxxxx-xxxxx-src.tar.gz.sha512`
-* The `KEYS` as a result of `gpg --list-sigs && gpg --armor --export >> KEYS` 
-* Remeber to append your public-key info to `KEYS` file in repository https://dist.apache.org/repos/dist/release/incubator/weex and https://dist.apache.org/repos/dist/dev/incubator/weex
-:::
-
-Release manager could invoke `scripts/publish_release_candidate.sh $RELEASE_CANDIDATE_PREFIX $RELEASE_CANDIDATE_SUFFIX $GIT_REMOTE` to publish a release candidate. The explanation of the variable is listed below:
-* `$RELEASE_CANDIDATE_PREFIX`, Weex release candidate prefix, like 0.24.0
-* `$RELEASE_CANDIDATE_SUFFIX`, The release candaidate suffix, like RC3
-* `$GIT_REMOTE` The name of your Github repository, like github-Apache whose URL should be `git@github.com:apache/incubator-weex.git`. You can view `.git/config` file to find the name of your repository.
-
-The above script will do following things for the release manager:
-1. Push git tag with the name `${RELEASE_CANDIDATE_PREFIX}-${RELEASE_CANDIDATE_SUFFIX}` to ${GIT_REMOTE} repository.
-2. Push the release candidate to [https://dist.apache.org/repos/dist/dev/incubator/weex/](https://dist.apache.org/repos/dist/dev/incubator/weex/)
-
-## Call a vote in PPMC
-::: warning
-All the links in your emails must be `https` instead of `http`.
-:::
-
-::: warning
-It's recommendation that release manager should send email during release with him/her Apache email account instead of personal account.
-:::
-
-### Start Vote
-Release manager should call a vote for your release in [dev@weex.apache.org](mailto:dev@weex.apache.org). To get the vote passed, you need three positive vote(namely +1 binding vote) and more positive vote than negative vote(namely -1).
-
-::: tip
-In general community members are encouraged to vote, but their votes are only advisory. Only PMC members have formally binding vote.
-:::
-
-::: tip
-Though there are no vetoed in release vote, but negative vote should be considered seriously by the release manager.
-:::
-
-::: tip
-It is really normal that your release candidate failed in the vote. Don't bre frustrated. Read the message that makes you fail and try to fix them. Then start another release vote like RC2, RC3 and so on.
-:::
-
-One may reference the following email template:
-
-    Subject: [Vote] Release Apache Weex (Incubating) XXXXXXXXX-RCX
-
-    I am going to call a vote for release Apache Weex (Incubating) XXXXX-RCXXXXXX
-
-        * Git tag for this Release:  
-        * The source tarball could be found at : 
-        * The signature of the source tarball could be found at : 
-        * The SHA-512 checksum of the source tarball could be found at : 
-        * The source tarball is signed with Key: XXXXXXXXXXXXXXXXXXXXXXXXXX, which could be found in the key file: 
-        * ChangeLog about this version: 
-
-    One can build the binary from source according to XXXXXXXXXXXXXX
-
-
-    This vote will remain open for at least 72 hours, until we get enough votes. Please vote on releasing this RC.
-
-    [ ] +1 approve
-    [ ] +0 no opinion
-    [ ] -1 disapprove (and reason why)
-
-### Close the vote
-If your vote passed and the vote itself last over 72 hours. You can close the vote by sending another email to [dev@weex.apache.org](mailto:dev@weex.apache.org).
-
-    Subject: [RESULT][VOTE] Release Apache Weex (Incubating) XXXXXXXXX-RCX
-    
-    The vote for release Apache Weex (Incubating) XXXXXXXXXXX has passed with XXXXXXXXXXXXX +1 binding votes and XXXXXXXXXXX -1 vote.
-
-    * +1 vote: 
-        * XXXXXXXXXXXX (binding)
-        * XXXXXXXXXXXX (binding)
-        * XXXXXXXXXXXX (not binding)
-    * +0 vote:
-        * XXXXXXXXXXXX (binding)
-        * XXXXXXXXXXXX (binding)
-        * XXXXXXXXXXXX (not binding)
-    * -1 vote:
-        * XXXXXXXXXXXX (binding)
-        * XXXXXXXXXXXX (binding)
-        * XXXXXXXXXXXX (not binding) 
-
-    Vote Thread: XXXXXXXXXXXXXXXXXX
-
-:::tip
-You can use [Apache mailing list archives](https://mail-archives.apache.org/mod_mbox/weex-dev/) to find the link of your vote thread.
-:::
-
-::: tip
-If you vote don't get passed, you can start another vote directly without sending the email of closing vote. Of course, you can still send an email to close the vote even if it don't get passed. It's all your choice. Either way is acceptable.
-:::
-
-## Call a vote in IPMC
-After your vote passed in [dev@weex.apache.org](mailto:dev@weex.apache.org), release manager should bring this to [general@incubator.apache.org](mailto:general@incubator.apache.org). The vote rules are similar to vote in PPMC, where only difference are that only Incubator PMC votes are binding.
-
-::: warning
-A Release vote must be passed by PPMC and IPMC in order. 
-:::
-
-One may reference the following email template:
-
-    Subject: [Vote] Release Apache Weex (Incubating) XXXXXXXXX-RCX
-
-    The Apache Weex community has voted and approved the proposal to release Apache Weex (Incubating) version XXXXXXXXXXXXXXX, we now kindly request the Incubator PMC members to review and vote on this incubator release.
-        * Vote thread: 
-        * Vote result thread: 
-        * Git tag for this Release:  
-        * The source tarball could be found at : 
-        * The signature of the source tarball could be found at : 
-        * The SHA-512 checksum of the source tarball could be found at : 
-        * The source tarball is signed with Key: XXXXXXXXXXXXXXXXXXXXXXXXXX, which could be found in the key file: 
-        * ChangeLog about this version: 
-
-    One can build the binary from source according to XXXXXXXXXXXXXXXXXXXXX
-
-
-    This vote will remain open for at least 72 hours, until we get enough votes. Please vote on releasing this RC.
-
-    [ ] +1 approve
-    [ ] +0 no opinion
-    [ ] -1 disapprove (and reason why)
-
-### Close Vote
-Similarly, release manager need to close the vote if it get passed the vote itself last over 72 hours. Please remember send the email of closing vote to [general@incubator.apache.org](mailto:general@incubator.apache.org) and [dev@weex.apache.org](mailto:dev@weex.apache.org) together.
-
-# Official release
-> Releases are packages that have been approved for general public release, with varying degrees of caveat regarding their perceived quality or potential for change.
-
-In order to make your release official, here are the next steps.
-
-## Publish release
-::: warning
-The procedure below may not work well if the release manager is not a PPMC member of Weex as it needs to publish artifact with the privilege of PPMC. If this is the case, please ask help from one of the PPMC member.
-:::
-
-Release manager could invoke `scripts/publish_release_official.sh $RELEASE_CANDIDATE_PREFIX $RELEASE_CANDIDATE_SUFFIX $TAG_OF_LATEST_RELEASE $GIT_REMOTE $GITHUB_PERSONAL_TOKEN $JCENTER_TOKEN` to publish the release officially. The explanation of the variable is listed below:
-* `$RELEASE_CANDIDATE_PREFIX`, Weex release candidate prefix, like 0.24.0
-* `$RELEASE_CANDIDATE_SUFFIX`, The release candidate suffix, like RC3
-* `$TAG_OF_LATEST_RELEASE`  Weex tag of last release, like 0.19.0.2. RELEASE_NOTE.md came from the difference between `${RELEASE_CANDIDATE_PREFIX}-${RELEASE_CANDIDATE_SUFFIX}` and `$TAG_OF_LATEST_RELEASE`.
-* `$GIT_REMOTE` The name of your Github repository, like github-Apache whose URL should be `git@github.com:apache/incubator-weex.git`
-* `$GITHUB_PERSONAL_TOKEN` The personal access token of your [github Account](https://github.com/settings/tokens), which should have write privilege to `git@github.com:apache/incubator-weex.git` . The personal access token is used to publish Github Release
-* `$JCENTER_TOKEN` The private key for [JCenter](https://bintray.com/alibabaweex/maven/weex_sdk/), which is the distribution channel for Android
-
-The above script will do following things for the release manager:
-1. Generate `RELEASE_NOTE.md` based on the history of git commit and `CHANGELOG.md`.
-1. Download release candidate from `https://dist.apache.org/repos/dist/dev/incubator/weex/${RELEASE_CANDIDATE_PREFIX}/${RELEASE_CANDIDATE_SUFFIX}`, rename it to `apache-weex-incubating-${$RELEASE_CANDIDATE_PREFIX}-src.tar.gz`, then upload it to [https://dist.apache.org/repos/dist/release/incubator/weex/](https://dist.apache.org/repos/dist/release/incubator/weex/)
-1. Push git tag named `${RELEASE_CANDIDATE_PREFIX}` to `${GIT_REMOTE}` repository and generate a corresponding [Github Release](https://help.github.com/en/articles/about-releases) with `${GITHUB_PERSONAL_TOKEN}`. As the script will install [release-it](https://github.com/release-it/release-it#github-releases) with `npm install -g release-it` to publish github release, make sure your npm environment is ready.
-1. Publish the convenience binary of Android to JCenter with your `${JCENTER_TOKEN}`. You can see the [JCenter token](https://svn.apache.org/repos/private/pmc/incubator/weex/) if you are a PPMC member of Weex.
-
-::: warning
-The convenience binary of iOS can only be published manually now.
-:::
-
-You should also archive your old release by deleting them from [https://dist.apache.org/repos/dist/release/incubator/weex/](https://dist.apache.org/repos/dist/release/incubator/weex/) once your latest release is published according to [ASF' release policy](http://www.apache.org/legal/release-policy.html#when-to-archive).
-
-## Update website
-Please remember update the [website](https://weex.apache.org/download/download.html) with your latest release information and correct link.
-
-::: warning
-* The download link of the latest release source must be provided in the format of mirror, like `https://www.apache.org/dyn/closer.cgi?filename=incubator/weex/${RELEASE_CANDIDATE_PREFIX}/apache-weex-incubating-${RELEASE_CANDIDATE_PREFIX}-src.tar.gz&action=download` according to [ASF' policy](http://www.apache.org/dev/release-download-pages#links).
-
-* As the old release is archived, you should probably update the link of your previous release to new address like, `https://archive.apache.org/dist/incubator/weex/${PREVIOUS_RELEASE}/apache-weex-incubating-${PREVIOUS_RELEASE}-src.tar.gz`
-:::
-
-::: tip
-* Remember to move old latest version to Archived Release section.
-
-* The version information like `pod version` in [Github Page](https://github.com/apache/incubator-weex/edit/master/README.md) will get updated within 24 hours automatically. Please be patient.
-:::
-
-## Announce it
-You are almost there. Just send an email to [dev@weex.apache.org](mailto:dev@weex.apache.org) to announce it.
-
-    Subject: [ANNOUNCEMENT] Weex XXXXXXXXXXXXXXX Released
-
-    Weex XXXXXXXXXXXXXX is released now, one can download source or convenience binary through the link in our website [1].
-
-    [1] https://weex.apache.org/download/download.html#latest-release
\ No newline at end of file
diff --git a/docs/community/roadmap.md b/docs/community/roadmap.md
deleted file mode 100644
index 60acc5a..0000000
--- a/docs/community/roadmap.md
+++ /dev/null
@@ -1,34 +0,0 @@
-# Weex Project Roadmap
-
-> This document outlines work that is currently being worked on and things we plan to work on next.  And  we hope to obtain valuable feedback from the community to help us better understand user needs and adjust our roadmaps.
-
-## WeexCore
-### JS binding
-#### v0.21
-* New WeexCore 3.0 structure. Support more platforms, Android, iOS.
-* Standlone jsRuntime with javaScriptCore standard API instead of source code. Available for both android and ios.
-* Support native dom Binding for better portability and performance.
-
-### Layout
-#### v0.21
-* Support more layout attribute.
-* Add enough test cases to cover layout engine.
-### Render
-#### v0.21
-## tools
-
-Weex-toolkit will release version 2.0.0 this year, it mainly provides those following new features:
-
-- Flawless installation and upgrade experience.
-- Better unit & functional testing support.
-- Visual Studio Code extensions with support for build/run/debug.
-- Split into multiple packages that can be reused on the Node-side program.
-
-Also, there will be some feartures and optimization for the submodules, such as weex-debugger, weexpack and so on. 
-
-All the schedules can be viewed on the [milestones](https://github.com/weexteam/weex-toolkit/milestones).
-
-### Community
-#### v0.22
-* Github commit/PR will be send to commit@weex.incubator.apache.org instead of dev@weex.incubator.apache.org
-* Make the code design and development process of Layout transparent to the community, make it happen on [github project](https://github.com/apache/incubator-weex/projects)
\ No newline at end of file
diff --git a/docs/community/who-is-using-weex.md b/docs/community/who-is-using-weex.md
new file mode 100644
index 0000000..bd9d8ed
--- /dev/null
+++ b/docs/community/who-is-using-weex.md
@@ -0,0 +1,5 @@
+---
+pageClass: noFooter
+---
+
+<Who-Is-Using-Weex lang="en-US" />
\ No newline at end of file
diff --git a/docs/docs/components/recycle-list.md b/docs/docs/components/recycle-list.md
index 9ba0255..475034b 100644
--- a/docs/docs/components/recycle-list.md
+++ b/docs/docs/components/recycle-list.md
@@ -2,7 +2,7 @@
 
 ## Summary
 
-`<recycle-list>`  is a new list container with the ability to recycle and reuse, which can greatly optimize memory usage and rendering performance.
+`<recycle-list>`  is a new  vertical or horizontal list container with the ability to recycle and reuse, which can greatly optimize memory usage and rendering performance.
 
 > * Please refer to [Design.md](https://github.com/Hanks10100/weex-native-directive/blob/master/Design.md) for design ideas. For details, please refer to  [Implementation.md](https://github.com/Hanks10100/weex-native-directive/blob/master/Implementation.md)
 > * This feature is partially dependent on the build tool, please ensure that the version of weex-loader is up to date (v0.7.2+)
@@ -46,6 +46,8 @@
   </cell-slot>
 </recycle-list>
 ```
+* `scrollDirection`  
+  Value vertical or horizontal
 
 ## Recyclable component
 Subcomponents used in `<recycle-list>` will also be treated as templates, and the recyclable attribute will be added to the `<template> `tag when developing the component before it can be used in `<recycle-list>`.
diff --git a/docs/docs/components/richtext.md b/docs/docs/components/richtext.md
index 704fc4e..f702fd4 100644
--- a/docs/docs/components/richtext.md
+++ b/docs/docs/components/richtext.md
@@ -31,6 +31,7 @@
 #### a
 
 * **herf**. The herf.
+* **pseudo-ref**. A ref assigned by developers and passed to the callback function of **itemclick**.
 
 #### span
 
@@ -64,16 +65,16 @@
 ## Events
 
 * **common events**. Support [common events](../events/common-events.html).
-* **itemclick**. Only works on `img` and `span`:
+* **itemclick**. Only works on `img` and `a`:
    * `img` tag:
       * None of parents is an `a` tag when the `img` tag is clicked.
       * If the first condition is not satisfied, Weex will try to open the hyperlink of `a` tag instead.
       * **pseudo-ref** of img will be passed to the callback function of onitemclick.
-   * `span` tag:
-      * The `span` tag is clicked whose parent is an `a` tag.
+   * `a` tag:
       * The href property is 'click://' (This condition is required on iOS and is optional on Android).
-      * The `a` tag has a `pseudo-ref` property whose value will be sent with the itemclick event.
+      * The `a` tag has a `pseudo-ref` property whose value will be sent with the itemclick event. **Please be noted that the default jump behavior on `a` tag will be disabled at this moment.`[Demo](http://editor.weex.io/p/sunshl/Contribute/commit/b21e1133830b48767c6d00d712e415b2)
+    * If `itemclick` is specified on nested nodes, only the event on the outer node will take effect.
 
 ## Example
 
-[Demo](http://dotwe.org/vue/f748b0cee3991522a66d4376b66a4f2a)
+[Demo](http://dotwe.org/vue/8a817e1acb46c2910caf1b53b8016a48)
diff --git a/docs/docs/components/slider.md b/docs/docs/components/slider.md
index 1cdcc24..e8b65c8 100644
--- a/docs/docs/components/slider.md
+++ b/docs/docs/components/slider.md
@@ -14,7 +14,7 @@
 * **interval**, number in millisecond. This value determines time interval for each page displayed in slider.
 * **index**, number. This value determines the  index of current shown slide. The default value is 0.
 * **offset-x-accuracy**, number. Set the scroll event trigger precision, precision value represents the rolling distance of a page width ratio.
-* **show-indicators**, boolean. Set whether to display indicator.
+* **show-indicators**, boolean. Set whether to display indicator. This attribute is useless if there is no [`<indicator>`](indicator.html) in the slider despite the default value of `show-indicators` is true.
 * **infinite**, boolean. Set whether the page in the slider can be scrolled. The default value is true.
 * **scrollable**, boolean. Set whether slider pages can be switched by sliding gestures. The default value is true.
 * **keep-index**, boolean, <Badge text="Android" type="warning"/>. Set whether to maintain the index of the page after the data changes.
diff --git a/docs/docs/events/common-events.md b/docs/docs/events/common-events.md
index 9720c38..8a10b1b 100644
--- a/docs/docs/events/common-events.md
+++ b/docs/docs/events/common-events.md
@@ -10,6 +10,21 @@
 
 Weex provide the ability to let events trigger action, like starting a JavaScript when a user click on a component. Below are the common event attributes that can be added to weex components to define event actions.
 
+## Event penetration
+
+**Notes: ** The principle of native event delivery under `Android` and `iOS` is different, only for `iOS` here.
+
+When a parent view has multiple peer views, iOS will select the highest level View to respond to the event, and the underlying view event will never be responded.
+
+Weex add attribute `eventPenetrationEnabled` to `<div>` component. When the value is `true`, the view's children views still respond to the event normally, while the view itself will not respond to the event, but pass the event to the lower level View.
+
+[Event penetration](https://jsplayground.taobao.org/raxplayground/c230a32e-489c-4fda-ae90-40faa6aaafbc??from=)
+
+## View interactivity
+
+Weex add attribute `userInteractionEnabled` to `<div>` component. When the value is `true`, neither the view nor its children views respond to the event. The event is passed to the lower layer View.
+
+
 ## Click event
 
 The onclick attribute fires on a click gesture on the element.
diff --git a/docs/docs/modules/meta.md b/docs/docs/modules/meta.md
index c792d72..95a46f3 100644
--- a/docs/docs/modules/meta.md
+++ b/docs/docs/modules/meta.md
@@ -13,7 +13,17 @@
 * **@options**
   * **`width`**, number value or `"device-width"` or `"device-height"` macros.
   * **`height`**, number value or `"device-width"` or `"device-height"` macros.
+    * **`deviceWidth`**，number value.
+  ::: danger
+  iOS only,Android not support yet
+  :::
+  * **`deviceHeight`**，number value.
+  ::: danger
+  iOS only,Android not support yet
+  :::
   * **`roundOffDeviation`** <Badge text="0.20.0+" type="warn" vertical="middle"/>, The default value is true, which means that the layout engine ignores the error caused by the decimal point in the layout; if there is a gap in the component splicing, you can set the `roundOffDeviation` to false, and the layout engine will automatically fill in the decimal point error.
+  * **`reserveCssStyles`**,set true to let the page reserve all CSS style values,designed to support screen rotation
+,[document](https://weex.apache.org/guide/advanced/multi-size-screen.html)。
 
 ::: tip
 * Referance: W3C Spec [CSS Device Adaptation](https://drafts.csswg.org/css-device-adapt/#viewport-meta).
@@ -35,6 +45,7 @@
 meta.setViewport({
   width: 640,
   roundOffDeviation: false
+  reserveCssStyles: true
 })
 
 App.el = '#root'
diff --git a/docs/docs/styles/common-styles.md b/docs/docs/styles/common-styles.md
index 9af0607..3d38b2e 100644
--- a/docs/docs/styles/common-styles.md
+++ b/docs/docs/styles/common-styles.md
@@ -7,7 +7,7 @@
 :::
 
 ::: warning
-Weex only supports `px` as length unit, `%`, `rem`, `em` are not supported.
+Weex supports `px`and `wx`(not affected by screen width and viewPortWidth) as length unit, `%`, `rem`, `em` are not supported.
 :::
 
 ## Box Model
diff --git a/docs/docs/styles/css-units.md b/docs/docs/styles/css-units.md
index 3b37b34..69f4755 100644
--- a/docs/docs/styles/css-units.md
+++ b/docs/docs/styles/css-units.md
@@ -2,10 +2,10 @@
 
 ## CSS `length` unit
 
-`px` is the only supported length units.
+`px` 、`wx` are supported as length units. For styles that should not be affected by screen width and viewPortWidth, please use `wx` as unit.
 
 ::: danger
-Ignoring `px` will cause render error on Webview.
+Ignoring `px` or  `wx` will cause render error on Webview.
 :::
 
 ::: warning
@@ -217,4 +217,4 @@
 | white | #FFFFFF |
 | whitesmoke | #F5F5F5 |
 | yellow | #FFFF00 |
-| yellowgreen | #9ACD32 |
\ No newline at end of file
+| yellowgreen | #9ACD32 |
diff --git a/docs/guide/advanced/multi-size-screen.md b/docs/guide/advanced/multi-size-screen.md
index 294b2ba..8b7e370 100644
--- a/docs/guide/advanced/multi-size-screen.md
+++ b/docs/guide/advanced/multi-size-screen.md
@@ -11,6 +11,9 @@
 
 In this article, we demonstrate how to fit Weex pages for different or changable screen sizes such as orientation switches.
 
+::: danger 
+iOS only,Android not support yet
+:::
 ## How Weex convert a CSS style ot view coordinate
 
 Take iOS as example, when your application starts up, Weex acquires current device screen width as global variable. On iOS, this value is screen physical pixels divided by screen scale. For iPhone6, this value is 375.
@@ -83,15 +86,26 @@
 
 #### b. Use WXSDKInstance
 
+* iOS:  
 ```Objective-C
 WXSDKInstance* instance = [[WXSDKInstance alloc] init];
 [instance setViewportWidth:800.f];
 ```
+* Android:  
+```Java
+WXSDKInstance instance = new WXSDKInstance(mContext);
+instance.setInstanceViewPortWidth(800);
+```
 
 ### 2. Set deviceWidth of a page
 
+::: danger 
+iOS only,Android not support yet
+:::
+
 <Badge text="v0.25+" type="warning"/>
 
+
 #### a. Use Meta Module
 
 ```Javascript
@@ -130,18 +144,29 @@
 
 #### b. Use WXSDKInstance
 
+* iOS:  
 ```Objective-C
 WXSDKInstance* instance = [[WXSDKInstance alloc] init];
 [instance setPageKeepRawCssStyles];
 ```
+* Android:
+```Java
+WXSDKInstance instance = new WXSDKInstance(mContext);
+instance.setPageKeepRawCssStyles();
+```
 
 ### 4. Force the page to relayout
 
 <Badge text="v0.25+" type="warning"/>
 
+* iOS:  
 ```Objective-C
 [instance reloadLayout];
 ```
+* Android:  
+```Java
+instance.reloadPageLayout();
+```
 
 ## Scenarios
 
@@ -156,12 +181,18 @@
 1. Let the page reserve all CSS style values.
 2. After screen rotation is done, use the code below to reset screen width for the page and trigger relayout.
 
+* iOS:
 ```Objective-C
 CGFloat w = [UIScreen mainScreen].bounds.size.width;
 CGFloat h = [UIScreen mainScreen].bounds.size.height;
 [_instance setPageRequiredWidth:w height:h];
 [_instance reloadLayout];
 ```
+* Android:
+```Java
+instance.resetDeviceDisplayOfPage();
+instance.reloadPageLayout();
+```
 
 You could use latest Playground to test the [demo](http://editor.weex.io/p/wqyfavor/scroller/commit/37810078ef963388b699b5ad7d5e9881)
 
diff --git a/docs/guide/contribute/bug-report-guidelines.md b/docs/guide/contribute/bug-report-guidelines.md
deleted file mode 100644
index e51a7a2..0000000
--- a/docs/guide/contribute/bug-report-guidelines.md
+++ /dev/null
@@ -1,23 +0,0 @@
-# Bug Report
-
-Weex Community [Github Issue](https://github.com/apache/incubator-weex/issues) to report and track bugs 。The more information provided in a Github issue, the sooner it get solved.
-
-::: tip
-* Avoid duplicated: Always search on Github before you fire a new one.
-* Always run with the latest version before you fire a bug
-* Only report one bug in one Github Issue.
-:::
-
-## Format of Github issue
-Please use the [Bug Report](https://github.com/apache/incubator-weex/issues/new?template=bug_report.md) template when firing a bug. All the information needed to solve a bug is listed in the Bug report template , please fill it out as much as you can. **The more information provided in a Github issue, the sooner it get solved.**
-
-::: warning
-Report bug with fact and expected behavior, not complaint or emotional words.
-:::
-
-## 96 Hours rule
-Generally speaking, weex community response to a Github issue within 96 hours, which could be longer if there is a holiday. Please be patient.
-
-::: tip
-If your Github issue doesn't get any response over a week, you can ask developers through [weex mailing list](./how-to-contribute.html#join-in-discussions).
-:::
\ No newline at end of file
diff --git a/docs/guide/contribute/contribute-code.md b/docs/guide/contribute/contribute-code.md
deleted file mode 100644
index 452730e..0000000
--- a/docs/guide/contribute/contribute-code.md
+++ /dev/null
@@ -1,84 +0,0 @@
-# Contribute Code
-
-This page describes the standard procedure to modify code of weex.
-## Before Coding
-### Check License
-Weex adopts [Apache License 2.0](https://choosealicense.com/licenses/apache-2.0/) as its open source license. Make sure your potential contribution obeys the requirement of Apache License 2.0.
-
-### Bug or Feature ?
-* If you are going to fix a bug of Weex, check whether it already exists in [Github Issue](https://github.com/apache/incubator-weex/issues). If it exists, make sure to write down the link to the corresponding Github issue in the PR you are going to create.
-* If you are going to add a feature for weex, reference the following recommend procedure:
-    1. Writing a email to [mailing list](how-to-contribute.html#mailing-list) to talk about what you'd like to do.
-    1. Write the corresponding [document](how-to-contribute.html#contribute-code-or-document)
-
-
-## Coding
-1. [Fork](https://help.github.com/articles/fork-a-repo/) the Github repository at [https://github.com/apache/incubator-weex](https://github.com/apache/incubator-weex). 
-
-1. Clone the forked repository and create a new branch from `master` to push your commits to.
-
-1. Develop your feature or bug fix in your new branch. Make sure your code meets the [style guidelines](contribute-code.html#code-style-guidelines).
-
-1. Add the **License** below to the top of any new file(s) you've added.
-   
-        /*
-        * Licensed to the Apache Software Foundation (ASF) under one
-        * or more contributor license agreements.  See the NOTICE file
-        * distributed with this work for additional information
-        * regarding copyright ownership.  The ASF licenses this file
-        * to you under the Apache License, Version 2.0 (the
-        * "License"); you may not use this file except in compliance
-        * with the License.  You may obtain a copy of the License at
-        *
-        *   http://www.apache.org/licenses/LICENSE-2.0
-        *
-        * Unless required by applicable law or agreed to in writing,
-        * software distributed under the License is distributed on an
-        * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
-        * KIND, either express or implied.  See the License for the
-        * specific language governing permissions and limitations
-        * under the License.
-        */
-   
-1. Commit all the changes to your branch.
-
-:::tip
-If you are writing Java or C++ with Android Studio, **License** will be added to the head of the file automatically.
-:::
-
-### Code Style Guidelines 
-
-#### Objective-C
-
-- Tabs should be used for indentation. Please do not use spaces.
-- `*` operator goes with the variable name (e.g. Type *variable;)
-- For function definitions, place each brace on its own line.
-- For all the other braces, place the open brace on the line preceding the code block and place the close brace on its own line.
-- Use `#pragma marks` to categorize methods into functional groupings and protocol implementations
-- Follow other guidelines on [GitHub Objective-C Style Guide](https://github.com/github/objective-c-style-guide)
-
-#### Java & Android
-
-- Use [Google Java Style](https://google.github.io/styleguide/javaguide.html) as basic guidelines of java code.
-- Follow [AOSP Code Style](https://source.android.com/source/code-style.html) for rest of android related code style.
-
-#### C & C++
-
-- Use [Google C++ Style ](https://google.github.io/styleguide/cppguide.html)  as basic guidelines of C++ code
-- Weex defines [a subset of the Google C++ development specification](https://github.com/jianhan-he/C-Style-Guide/blob/master/C%2B%2B_Style_Guide_en.md) that covers some of the major C++ scenario usage specifications.
-
-## Publish your Change
-[Open a pull request](https://help.github.com/articles/using-pull-requests/) against the `master` branch of `apache/incubator-weex`. Make sure following guidelines are considered when creating a pull request.
-
-1. One PR should solve only one problem.
-1. The PR title should be the form of `[COMPONENT] Summary`:
-    * `COMPONENT` is one of the mentioned PR categories (android, iOS, JsFm, web, test, etc..). 
-    * `Summary` should be a brief description of your change within one sentence.
-1. Content description of PR
-    * If the PR is about fixing a bug *excluding crash*, a [demo](http://dotwe.org/vue) is necessary in code's description.
-    * If the PR is about adding a new feature, another [PR for documentation](how-to-contribute.html#contribute-code-or-document) is necessary in codes' PR description.
-    * *Optional* If the PR fixes an existing Github issue, you may add the link to the corresponding issue in the PR.
-
-:::tip
-Reviewing PR may take a great deal of time, please be patient. If your PR doesn't get response over 96 hours, you might send an email to [mailing list](how-to-contribute.html#mailing-list) to ask the progress.
-:::
\ No newline at end of file
diff --git a/docs/guide/contribute/how-to-contribute.md b/docs/guide/contribute/how-to-contribute.md
index 31dc7b4..abd86fc 100644
--- a/docs/guide/contribute/how-to-contribute.md
+++ b/docs/guide/contribute/how-to-contribute.md
@@ -6,7 +6,7 @@
 
 ## Code of Conduct
 
-To make an open and friendly community, Weex community adopt [Contributor Covenant](https://www.contributor-covenant.org/version/1/4/code-of-conduct) as the code of conduct.
+To make an open and friendly community, Weex community adopt [Contributor Covenant](https://github.com/apache/incubator-weex/blob/master/CODE_OF_CONDUCT.md) as the code of conduct.
 
 ## Mailing List
 > If it didn't happen on a mailing list, it didn't happen.
@@ -21,10 +21,12 @@
 
 Read [Apache mailing list](https://apache.org/foundation/mailinglists.html) to have a deeper view of mailing list.
 
+## Members and Governance Model
+You can find committers, PPMCs and governance model of Weex from [confluence](https://cwiki.apache.org/confluence/x/bFoyBw)
 
 ## Ask or Answer Questions
 * You ask questions on [stackoverflow.com](http://stackoverflow.com/questions/tagged/weex) for basic use problems and concepts.
-* You can report a bug through Github Issue as mention in [bug report](./bug-report-guidelines.html).
+* You can report a bug through Github Issue as mention in [ask-or-answer-questions](https://github.com/apache/incubator-weex/blob/master/CONTRIBUTING.md#ask-or-answer-questions).
 
 :::tip
 Formally speaking, StackOverflow is not part of Weex community though developers around the world continually contribute to it. If your question on StackOverflow doesn't get response within 96 hours, you can fire a [Github Issue](https://github.com/apache/incubator-weex/issues) with link to your question on StackOverflow.
@@ -36,6 +38,15 @@
 * StackOverflow questions, which doesn't get response over 96 hours.
 :::
 
+## Development Process
+Most of the development process is described in [confluence](https://cwiki.apache.org/confluence/x/eJBTBw), which services the contributors of Weex and is transparent to all users.
+
+* [Release Plan](https://github.com/apache/incubator-weex/milestones): All feature, bugfix, issue-solved are associated with a certain milestone since Weex 0.27. As every Weex release needs approval from PPMC and IPMC, the due date of milestone is just an estimation of release date, not accuracy schedule.
+* [Release Procedure](https://cwiki.apache.org/confluence/x/_I5TBw)
+* [Major feature](https://github.com/apache/incubator-weex/projects)
+* [System Design](https://cwiki.apache.org/confluence/x/XYxTBw)
+* [Road Map](https://cwiki.apache.org/confluence/x/fJBTBw)
+
 ## Contribute Code or document
 In Weex community, **Documentation is as important as code**, and Weex community respects all the contribution of documentation or code.
 
@@ -54,4 +65,4 @@
 :::
 
 ### Contribute code
-You can fix a bug or develop a new feature when contributing code, ref [Contribution of Code](./contribute-code.html) to see more detail.
+You can fix a bug or develop a new feature when contributing code, ref [Contribution of Code](https://github.com/apache/incubator-weex/blob/master/CONTRIBUTING.md#contribute-code) to see more detail.
diff --git a/docs/guide/contribute/thanks.md b/docs/guide/contribute/thanks.md
new file mode 100644
index 0000000..90ee2c8
--- /dev/null
+++ b/docs/guide/contribute/thanks.md
@@ -0,0 +1,4 @@
+# Thanks
+Weex could not exist without the continued generous support from the community, We would like to take this opportunity to thank our sponsors.
+
+* ![Sauce Lab](/sauce_labs_red.svg)[Sauce Labs](https://saucelabs.com): A Cross-browser Testing Platform.
\ No newline at end of file
diff --git a/docs/guide/debug/integrate-devtool-to-android.md b/docs/guide/debug/integrate-devtool-to-android.md
index 48f5b9f..15683e6 100644
--- a/docs/guide/debug/integrate-devtool-to-android.md
+++ b/docs/guide/debug/integrate-devtool-to-android.md
@@ -16,6 +16,7 @@
 | 0.19.0+  | 0.18.68        |
 | 0.20.3.0-beta | 0.20.3.0-beta |
 | 0.24.0+  | 0.24.2.4 |
+| 0.26.0+  | 0.24.2.4 |
 
 ## Integrate to Android
 
diff --git a/docs/guide/playground.md b/docs/guide/playground.md
new file mode 100644
index 0000000..0a5ba7f
--- /dev/null
+++ b/docs/guide/playground.md
@@ -0,0 +1,5 @@
+---
+pageClass: tool
+---
+
+<Tool-Playground lang="en-US"/>
\ No newline at end of file
diff --git a/docs/guide/use-vue-in-weex.md b/docs/guide/use-vue-in-weex.md
index 1d9d18c..33c45de 100644
--- a/docs/guide/use-vue-in-weex.md
+++ b/docs/guide/use-vue-in-weex.md
@@ -118,6 +118,57 @@
 Always use javascript file as the entry file.
 :::
 
+**Example of using weex-loader compile targets**
+1. execute `npm init` in terminal
+2. update `package.json`，add belows content into it
+```
+  "dependencies": {
+    "babel-loader": "^8.0.6",
+    "weex-loader": "^0.7.12",
+    "webpack": "^2.2.1"
+  },
+  "scripts": {
+    "build": "webpack --config webpack.config.js"
+  },
+```
+3. create `webpack.config.js`,modify `<your-input-file>` and `<your-output-file>`
+```
+const webpack = require('webpack');
+const path = require('path');
+module.exports = {
+  entry: '<your-input-file>',
+  output: {
+    path: path.resolve(__dirname, './'),
+    filename: <your-output-file>
+  },
+  module: {
+	    rules: [
+	      {
+	        test: /\.vue(\?[^?]+)?$/,
+	        loaders: ['weex-loader']
+	      },
+	      {
+	        test: /\.js$/,
+	        loaders: ['babel-loader']
+	      }
+	    ]
+	  },
+	plugins: [
+		new webpack.BannerPlugin({
+			raw: true ,
+			banner: '// { "framework": "Vue" }\n'
+		})
+	]
+}
+```
+4. execute `npm run build` in terminal
+5. Done 
+
+**Example of using weex-toolkit compile targets**
+1. install [weex-toolkit](https://weex.apache.org/tools/toolkit.html#system-components)：`npm install weex-toolkit -g`
+2. execute `weex compile [resource file] [product address]`
+3. Done
+
 ## Supported Features
 
 ### Global Config
diff --git a/docs/tools/README.md b/docs/tools/README.md
index 75e3486..a999861 100644
--- a/docs/tools/README.md
+++ b/docs/tools/README.md
@@ -1,7 +1,7 @@
 <script>
 module.exports = {
   created(){
-    this.$router.push('/tools/playground.html')
+    this.$router.push('/tools/toolkit.html')
   }
 }
 </script>
\ No newline at end of file
diff --git a/docs/tools/dotwe.md b/docs/tools/dotwe.md
new file mode 100644
index 0000000..224b3f4
--- /dev/null
+++ b/docs/tools/dotwe.md
@@ -0,0 +1,5 @@
+---
+pageClass: tool
+---
+
+<Tool-Dotwe lang="en-US" />
\ No newline at end of file
diff --git a/docs/tools/playground.md b/docs/tools/playground.md
deleted file mode 100644
index 6796501..0000000
--- a/docs/tools/playground.md
+++ /dev/null
@@ -1 +0,0 @@
-# Playground App
\ No newline at end of file
diff --git a/docs/zh/README.md b/docs/zh/README.md
index 748fe9b..78a3c62 100644
--- a/docs/zh/README.md
+++ b/docs/zh/README.md
@@ -1,7 +1,3 @@
-<script>
-module.exports = {
-  created(){
-    this.$router.push('/zh/guide/')
-  }
-}
-</script>
\ No newline at end of file
+---
+layout: IndexZh
+---
\ No newline at end of file
diff --git a/docs/zh/blog/weex-third-party-extensions.md b/docs/zh/blog/weex-third-party-extensions.md
new file mode 100644
index 0000000..95f2aa0
--- /dev/null
+++ b/docs/zh/blog/weex-third-party-extensions.md
@@ -0,0 +1,13 @@
+这里罗列的是除 Weex 官方组件外，一些比较成熟的三方组件。
+
+<img src="https://img.alicdn.com/tfs/TB1o1ulg1GSBuNjSspbXXciipXa-579-134.svg" alt="drawing" width="200"/>
+
+BindingX 是解决 Weex 和 React Native 上富交互问题的一种解决方案。它提供了一种称之为 "Expression Binding" 的机制可以在 Weex、React Native 上让手势等复杂交互操作以60fps的帧率流畅执行，而不会导致卡顿，因而带来了更优秀的用户体验。
+
+[访问 BindingX 官网](https://alibaba.github.io/bindingx/guide/cn_introduce)
+
+# GCanvas
+
+GCanvas 是一个移动端的跨平台的渲染引擎，它基于 OpenGL ES，可以直接由 Javascript 驱动。
+
+[访问 GCanvas 官网](https://github.com/alibaba/GCanvas)
\ No newline at end of file
diff --git a/docs/zh/blog/weexcore-multiprocess-evolution.md b/docs/zh/blog/weexcore-multiprocess-evolution.md
index 361474e..b285540 100644
--- a/docs/zh/blog/weexcore-multiprocess-evolution.md
+++ b/docs/zh/blog/weexcore-multiprocess-evolution.md
@@ -25,7 +25,7 @@
 
 初始化时, 父进程锁住 0 内存块. 子进程锁住 1 内存块, 子进程启动监听, 请求锁 0 内存块. 但此时 0 内存块被父进程锁着, 所以子进程请求锁 0 内存块失败, wait 父进程释放 0 内存块. 就这样, 两个进程因为互相竞争一块共享内存, 所以变相的成为单线程模式. 既同一时间只有一个进程能够保持活跃状态. 
 
-这意味着当前模型下, **Weex 所有的操作入口只能是 Platform 层, 子进程只能响应父进程的任务, 不能主动的执行某个人物, 且父进程在执行 Layout 或 parser 操作时, JSEngine 是处于挂起的状态的.**
+这意味着当前模型下, **Weex 所有的操作入口只能是 Platform 层, 子进程只能响应父进程的任务, 不能主动的执行某个任务, 且父进程在执行 Layout 或 parser 操作时, JSEngine 是处于挂起的状态的.**
 
 所以, WeexCore 的线程模型演变成下面这个样子.
 
diff --git a/docs/zh/community/README.md b/docs/zh/community/README.md
index f9e438e..77582ec 100644
--- a/docs/zh/community/README.md
+++ b/docs/zh/community/README.md
@@ -1,7 +1,7 @@
 <script>
 module.exports = {
   created(){
-    this.$router.push('/zh/community/roadmap.html')
+    this.$router.push('/zh/community/weex-third-party-extensions.html')
   }
 }
 </script>
\ No newline at end of file
diff --git a/docs/zh/community/release-procedure.md b/docs/zh/community/release-procedure.md
deleted file mode 100644
index 974959a..0000000
--- a/docs/zh/community/release-procedure.md
+++ /dev/null
@@ -1,248 +0,0 @@
-# Abstract
-::: danger
-我们欢迎您将此文档从英文翻译成中文。
-:::
-
-::: warning
-This page only gives a brief step of Weex release, always reference the [release policy of ASF](https://www.apache.org/legal/release-policy.html) if you have questions or confusions. 
-:::
-
-::: tip
-Content of this page aimed at Weex release manager, PPMCs and committers of Weex. End-users may consider using the [artifacts of Weex release](../download/download) directly.
-:::
-
-This page describes the steps of Weex release under ASF policy. 
-
-> Releases are, by definition, anything that is published beyond the group that owns it. 
-
-A release is normally conducted by a release manager who is a committer or PPMC member of Weex. 
-
-::: warning
-Release must be voted before publishing according to the ASF's policy. 
-:::
-
-::: warning
-Release are always about source code, binary is only published for users' convenience.
-:::
-
-# Before start
-## Prepare environment
-To generate and compile a weex release, you need to set up the following environment:
-* [Weex build environment](https://github.com/apache/incubator-weex/blob/master/HOW-TO-BUILD.md#build-environment), which includes Android, iOS, JS, C++ toolchains.
-* [OpenPGP environment](http://www.apache.org/dev/openpgp.html#key-gen-generate-key), which is used to generate signature and checksum for release candidate. Please note that OpenPGP is not the same as your `ssh` key though both of them may use the same cryptography algorithm. You may simply use `brew install gpg` to install tools and setup your key pair by `gpg --full-gen-key`.
-
-## Create release branch
-The release branch should be named to `release/xxx`, like `release/0.24`. Then the release manager should push the release branch to the remote repository.
-
-::: tip
-Normally, developers should create a release branch based on the latest commit of `master`. One can also break this rule if you have proper reasons, like there is an unstable commit in `master`.
-:::
-
-## Request buy-in
-Remember to send an email to [dev@weex.apache.org](mailto:dev@weex.apache.org) to see that if there is any has any reason to postpone your release.
-
-    I'd like to start a release for Weex 0.xxxxxxx based on release/xxxxxxxxx branch.
-
-    Does anyone have any reason to delay a Weex release? Any vital patches needs to be merged?
-
-    If not, I will start the release process tomorrow.
-
-# Release candidate
-> Release Candidates are packages that have been proposed for approval as a release but have not yet been approved by the project. 
-
-## Generate release candidate
-Release manager could invoke `scripts/apache_release.sh $RELEASE_CANDIDATE $TAG_OF_LATEST_RELEASE` to generate a release candidate. The explanation of the variable is listed below:
-* `$RELEASE_CANDIDATE` The full-name of the release candidate, like 0.24.0-RC3
-* `$TAG_OF_LATEST_RELEASE`  Weex tag of last release, like 0.19.0.2. RELEASE_NOTE.md came from the difference between `$RELEASE_CANDIDATE` and `$TAG_OF_LATEST_RELEASE` .
-
-The above script will do following things for the release manager:
-1. Generate `RELEASE_NOTE.md` based on the history of git commit and `CHANGELOG.md`.
-1. Create a temp directory named `apache_release_temp` and copy files related to the release to this dir. Files like test file, local configure files, build directory, weex playground and etc. are exclude from a release by this script. 
-1. Run [Apache Rat](https://creadur.apache.org/rat/), which is a release audit tool used for check license and output the result to `RELEASE_AUDIT.LOG`
-1. Create a tarball, signature and checksum for your release.
-
-Release manager should always check the following things before you move to the next step:
-1. Check RELEASE_AUDIT.LOG to see if there is any license problems in your release candidate.
-1. Go to `apache_release_temp` and verify you can compile it from source by running `scripts/build_from_source.sh $NDK18_dir`
-
-## Publish release candidate
-::: warning
-The procedure below may not work well if the release manager is not a PPMC member of Weex as it needs to publish artifact with the privilege of PPMC. If this is the case, please contact one of the PPMC member and ask him/her to execute the following script for you with the following information:
-* The tarball of the source file, like `apache-weex-incubating-xxxxx-xxxxx-src.tar.gz`
-* The signature of the source file, like `apache-weex-incubating-xxxxx-xxxxx-src.tar.gz.asc`
-* The checksum of the source file, like `apache-weex-incubating-xxxxx-xxxxx-src.tar.gz.sha512`
-* The `KEYS` as a result of `gpg --list-sigs && gpg --armor --export >> KEYS` 
-* Remeber to append your public-key info to `KEYS` file in repository https://dist.apache.org/repos/dist/release/incubator/weex and https://dist.apache.org/repos/dist/dev/incubator/weex
-:::
-
-Release manager could invoke `scripts/publish_release_candidate.sh $RELEASE_CANDIDATE_PREFIX $RELEASE_CANDIDATE_SUFFIX $GIT_REMOTE` to publish a release candidate. The explanation of the variable is listed below:
-* `$RELEASE_CANDIDATE_PREFIX`, Weex release candidate prefix, like 0.24.0
-* `$RELEASE_CANDIDATE_SUFFIX`, The release candaidate suffix, like RC3
-* `$GIT_REMOTE` The name of your Github repository, like github-Apache whose URL should be `git@github.com:apache/incubator-weex.git`. You can view `.git/config` file to find the name of your repository.
-
-The above script will do following things for the release manager:
-1. Push git tag with the name `${RELEASE_CANDIDATE_PREFIX}-${RELEASE_CANDIDATE_SUFFIX}` to ${GIT_REMOTE} repository.
-2. Push the release candidate to [https://dist.apache.org/repos/dist/dev/incubator/weex/](https://dist.apache.org/repos/dist/dev/incubator/weex/)
-
-## Call a vote in PPMC
-::: warning
-All the links in your emails must be `https` instead of `http`.
-:::
-
-::: warning
-It's recommendation that release manager should send email during release with him/her Apache email account instead of personal account.
-:::
-
-### Start Vote
-Release manager should call a vote for your release in [dev@weex.apache.org](mailto:dev@weex.apache.org). To get the vote passed, you need three positive vote(namely +1 binding vote) and more positive vote than negative vote(namely -1).
-
-::: tip
-In general community members are encouraged to vote, but their votes are only advisory. Only PMC members have formally binding vote.
-:::
-
-::: tip
-Though there are no vetoed in release vote, but negative vote should be considered seriously by the release manager.
-:::
-
-::: tip
-It is really normal that your release candidate failed in the vote. Don't bre frustrated. Read the message that makes you fail and try to fix them. Then start another release vote like RC2, RC3 and so on.
-:::
-
-One may reference the following email template:
-
-    Subject: [Vote] Release Apache Weex (Incubating) XXXXXXXXX-RCX
-
-    I am going to call a vote for release Apache Weex (Incubating) XXXXX-RCXXXXXX
-
-        * Git tag for this Release:  
-        * The source tarball could be found at : 
-        * The signature of the source tarball could be found at : 
-        * The SHA-512 checksum of the source tarball could be found at : 
-        * The source tarball is signed with Key: XXXXXXXXXXXXXXXXXXXXXXXXXX, which could be found in the key file: 
-        * ChangeLog about this version: 
-
-    One can build the binary from source according to XXXXXXXXXXXXXX
-
-
-    This vote will remain open for at least 72 hours, until we get enough votes. Please vote on releasing this RC.
-
-    [ ] +1 approve
-    [ ] +0 no opinion
-    [ ] -1 disapprove (and reason why)
-
-### Close the vote
-If your vote passed and the vote itself last over 72 hours. You can close the vote by sending another email to [dev@weex.apache.org](mailto:dev@weex.apache.org).
-
-    Subject: [RESULT][VOTE] Release Apache Weex (Incubating) XXXXXXXXX-RCX
-    
-    The vote for release Apache Weex (Incubating) XXXXXXXXXXX has passed with XXXXXXXXXXXXX +1 binding votes and XXXXXXXXXXX -1 vote.
-
-    * +1 vote: 
-        * XXXXXXXXXXXX (binding)
-        * XXXXXXXXXXXX (binding)
-        * XXXXXXXXXXXX (not binding)
-    * +0 vote:
-        * XXXXXXXXXXXX (binding)
-        * XXXXXXXXXXXX (binding)
-        * XXXXXXXXXXXX (not binding)
-    * -1 vote:
-        * XXXXXXXXXXXX (binding)
-        * XXXXXXXXXXXX (binding)
-        * XXXXXXXXXXXX (not binding) 
-
-    Vote Thread: XXXXXXXXXXXXXXXXXX
-
-:::tip
-You can use [Apache mailing list archives](https://mail-archives.apache.org/mod_mbox/weex-dev/) to find the link of your vote thread.
-:::
-
-::: tip
-If you vote don't get passed, you can start another vote directly without sending the email of closing vote. Of course, you can still send an email to close the vote even if it don't get passed. It's all your choice. Either way is acceptable.
-:::
-
-## Call a vote in IPMC
-After your vote passed in [dev@weex.apache.org](mailto:dev@weex.apache.org), release manager should bring this to [general@incubator.apache.org](mailto:general@incubator.apache.org). The vote rules are similar to vote in PPMC, where only difference are that only Incubator PMC votes are binding.
-
-::: warning
-A Release vote must be passed by PPMC and IPMC in order. 
-:::
-
-One may reference the following email template:
-
-    Subject: [Vote] Release Apache Weex (Incubating) XXXXXXXXX-RCX
-
-    The Apache Weex community has voted and approved the proposal to release Apache Weex (Incubating) version XXXXXXXXXXXXXXX, we now kindly request the Incubator PMC members to review and vote on this incubator release.
-        * Vote thread: 
-        * Vote result thread: 
-        * Git tag for this Release:  
-        * The source tarball could be found at : 
-        * The signature of the source tarball could be found at : 
-        * The SHA-512 checksum of the source tarball could be found at : 
-        * The source tarball is signed with Key: XXXXXXXXXXXXXXXXXXXXXXXXXX, which could be found in the key file: 
-        * ChangeLog about this version: 
-
-    One can build the binary from source according to XXXXXXXXXXXXXXXXXXXXX
-
-
-    This vote will remain open for at least 72 hours, until we get enough votes. Please vote on releasing this RC.
-
-    [ ] +1 approve
-    [ ] +0 no opinion
-    [ ] -1 disapprove (and reason why)
-
-### Close Vote
-Similarly, release manager need to close the vote if it get passed the vote itself last over 72 hours. Please remember send the email of closing vote to [general@incubator.apache.org](mailto:general@incubator.apache.org) and [dev@weex.apache.org](mailto:dev@weex.apache.org) together.
-
-# Official release
-> Releases are packages that have been approved for general public release, with varying degrees of caveat regarding their perceived quality or potential for change.
-
-In order to make your release official, here are the next steps.
-
-## Publish release
-::: warning
-The procedure below may not work well if the release manager is not a PPMC member of Weex as it needs to publish artifact with the privilege of PPMC. If this is the case, please ask help from one of the PPMC member.
-:::
-
-Release manager could invoke `scripts/publish_release_official.sh $RELEASE_CANDIDATE_PREFIX $RELEASE_CANDIDATE_SUFFIX $TAG_OF_LATEST_RELEASE $GIT_REMOTE $GITHUB_PERSONAL_TOKEN $JCENTER_TOKEN` to publish the release officially. The explanation of the variable is listed below:
-* `$RELEASE_CANDIDATE_PREFIX`, Weex release candidate prefix, like 0.24.0
-* `$RELEASE_CANDIDATE_SUFFIX`, The release candidate suffix, like RC3
-* `$TAG_OF_LATEST_RELEASE`  Weex tag of last release, like 0.19.0.2. RELEASE_NOTE.md came from the difference between `${RELEASE_CANDIDATE_PREFIX}-${RELEASE_CANDIDATE_SUFFIX}` and `$TAG_OF_LATEST_RELEASE`.
-* `$GIT_REMOTE` The name of your Github repository, like github-Apache whose URL should be `git@github.com:apache/incubator-weex.git`
-* `$GITHUB_PERSONAL_TOKEN` The personal access token of your [github Account](https://github.com/settings/tokens), which should have write privilege to `git@github.com:apache/incubator-weex.git` . The personal access token is used to publish Github Release
-* `$JCENTER_TOKEN` The private key for [JCenter](https://bintray.com/alibabaweex/maven/weex_sdk/), which is the distribution channel for Android
-
-The above script will do following things for the release manager:
-1. Generate `RELEASE_NOTE.md` based on the history of git commit and `CHANGELOG.md`.
-1. Download release candidate from `https://dist.apache.org/repos/dist/dev/incubator/weex/${RELEASE_CANDIDATE_PREFIX}/${RELEASE_CANDIDATE_SUFFIX}`, rename it to `apache-weex-incubating-${$RELEASE_CANDIDATE_PREFIX}-src.tar.gz`, then upload it to [https://dist.apache.org/repos/dist/release/incubator/weex/](https://dist.apache.org/repos/dist/release/incubator/weex/)
-1. Push git tag named `${RELEASE_CANDIDATE_PREFIX}` to `${GIT_REMOTE}` repository and generate a corresponding [Github Release](https://help.github.com/en/articles/about-releases) with `${GITHUB_PERSONAL_TOKEN}`. As the script will install [release-it](https://github.com/release-it/release-it#github-releases) with `npm install -g release-it` to publish github release, make sure your npm environment is ready.
-1. Publish the convenience binary of Android to JCenter with your `${JCENTER_TOKEN}`. You can see the [JCenter token](https://svn.apache.org/repos/private/pmc/incubator/weex/) if you are a PPMC member of Weex.
-
-::: warning
-The convenience binary of iOS can only be published manually now.
-:::
-
-You should also archive your old release by deleting them from [https://dist.apache.org/repos/dist/release/incubator/weex/](https://dist.apache.org/repos/dist/release/incubator/weex/) once your latest release is published according to [ASF' release policy](http://www.apache.org/legal/release-policy.html#when-to-archive).
-
-## Update website
-Please remember update the [website](https://weex.apache.org/download/download.html) with your latest release information and correct link.
-
-::: warning
-* The download link of the latest release source must be provided in the format of mirror, like `https://www.apache.org/dyn/closer.cgi?filename=incubator/weex/${RELEASE_CANDIDATE_PREFIX}/apache-weex-incubating-${RELEASE_CANDIDATE_PREFIX}-src.tar.gz&action=download` according to [ASF' policy](http://www.apache.org/dev/release-download-pages#links).
-
-* As the old release is archived, you should probably update the link of your previous release to new address like, `https://archive.apache.org/dist/incubator/weex/${PREVIOUS_RELEASE}/apache-weex-incubating-${PREVIOUS_RELEASE}-src.tar.gz`
-:::
-
-::: tip
-* Remember to move old latest version to Archived Release section.
-
-* The version information like `pod version` in [Github Page](https://github.com/apache/incubator-weex/edit/master/README.md) will get updated within 24 hours automatically. Please be patient.
-:::
-
-## Announce it
-You are almost there. Just send an email to [dev@weex.apache.org](mailto:dev@weex.apache.org) to announce it.
-
-    Subject: [ANNOUNCEMENT] Weex XXXXXXXXXXXXXXX Released
-
-    Weex XXXXXXXXXXXXXX is released now, one can download source or convenience binary through the link in our website [1].
-
-    [1] https://weex.apache.org/download/download.html#latest-release
\ No newline at end of file
diff --git a/docs/zh/community/roadmap.md b/docs/zh/community/roadmap.md
deleted file mode 100644
index 0a6f64c..0000000
--- a/docs/zh/community/roadmap.md
+++ /dev/null
@@ -1,35 +0,0 @@
-# Weex Project Roadmap
-
-> 这篇文章主要介绍我们目前正在做和计划要做的事情, 我们希望从社区收到大家的反馈来让我们能够更好的了解大家的需求, 我们会根据您提的需求来适当的调整计划.
-
-## WeexCore
-### JS Runtime
-#### v0.21
-
-* 全新的 WeexCore 3.0 架构, 支持更多的平台, ios, Android.
-* 使用 JavaScriptCore 标准的 api 代替原有的源码接入, 独立的 JSRuntime, 使 ios 和 Android 都可以运行在上面.
-* 更高性能的 C++ Dom API.
-
-### Layout
-#### v0.21
-*  为 Layout 引擎增加更多的属性支持
-*  为 Layout 引擎添加更多的测试用例.
-### Render
-#### v0.21
-## 工具
-
-今年我们将发布 Weex-toolkit 的 2.0.0 版本, 主要包含一下新功能
-
-- 无缝的安装和升级体验.
-- 更好的单元测试支持
-- Visual Studio Code  IDE插件支持 编译/运行/调试.
-- 拆成多包模式, 可以在服务端复用.
-
-另外, 我们添加了一些新功能和优化来支持子模块, 例如 weex-debugger,weexpack 等等.
-
-所有的计划可以参考这里 [milestones](https://github.com/weexteam/weex-toolkit/milestones).
-
-### Community
-#### 0.22
-* Github commit/PR 发送将发送至`commit@weex.incubator.apache.org`而不是`dev@weex.incubator.apache.org`
-* Layout 项目的代码设计和开发流程迁移到 [Github Project](https://github.com/apache/incubator-weex/projects) 中。
\ No newline at end of file
diff --git a/docs/zh/community/who-is-using-weex.md b/docs/zh/community/who-is-using-weex.md
new file mode 100644
index 0000000..9cc1430
--- /dev/null
+++ b/docs/zh/community/who-is-using-weex.md
@@ -0,0 +1,5 @@
+---
+pageClass: noFooter
+---
+
+<Who-Is-Using-Weex />
\ No newline at end of file
diff --git a/docs/zh/docs/components/richtext.md b/docs/zh/docs/components/richtext.md
index 1092a57..14e8a39 100644
--- a/docs/zh/docs/components/richtext.md
+++ b/docs/zh/docs/components/richtext.md
@@ -30,6 +30,7 @@
 #### a
 
 * **herf**. Herf。
+* **pseudo-ref**. 开发者指定的索引，会被传给回调方法 **itemclick**。
 
 #### span
 
@@ -63,16 +64,16 @@
 ## 事件
 
 * **通用事件** 支持所有[通用事件](../events/common-events.html)。
-* **itemclick**. 只有`img`和`span`标签可能触发，触发时机是: 
+* **itemclick**. 只有`img`和`a`标签可能触发，触发时机是: 
    * `img`标签:
       * `img`被点击时没有任何父节点是 `a`
       * 如果第一个条件不满足，Weex 会尝试打开 `a` 标签指定的链接。
       * `img` 的 **pseudo-ref** 会作为参数传回来。
-   * `span`标签:
-      * `a`标签中的`span`被点击
-      * 并且所在的`a`标签的href被指定为"click://"（这个条件iOS端强要求，Android端并不要求）
-      * a标签设置了pseudo-ref。此时itemclick事件会被触发，并且携带pseudo-ref的值。[示例](http://editor.weex.io/p/sunshl/Contribute/commit/b21e1133830b48767c6d00d712e415b2)
+   * `a`标签:
+      * `a`标签的href被指定为"click://"（这个条件iOS端强要求，Android端并不要求）
+      * `a`标签设置了pseudo-ref。此时itemclick事件会被触发，并且携带pseudo-ref的值。**此时 `a` 标签的无效。**。[示例](http://editor.weex.io/p/sunshl/Contribute/commit/b21e1133830b48767c6d00d712e415b2)
+    * 若多个嵌套节点上均包含 `itemclick` 事件，则只有最外层节点上的 `itemclick` 会被触发
 
 ## 示例
 
-[示例](http://dotwe.org/vue/f748b0cee3991522a66d4376b66a4f2a)
+[示例](http://dotwe.org/vue/8a817e1acb46c2910caf1b53b8016a48)
diff --git a/docs/zh/docs/components/slider.md b/docs/zh/docs/components/slider.md
index 38f5de0..1bbe1eb 100644
--- a/docs/zh/docs/components/slider.md
+++ b/docs/zh/docs/components/slider.md
@@ -14,7 +14,7 @@
 * **interval**, number（ms）. 轮播间隔，默认为 3000ms。
 * **index**, number. 设置显示slider的第几个页面。
 * **offset-x-accuracy**, number. 控制 `onscroll` 事件触发的频率，默认值为10，表示两次 `onscroll` 事件之间滚动容器至少滚动了10px。将该值设置为较小的数值会提高滚动事件采样的精度，但同时也会降低页面的性能。
-* **show-indicators**, boolean. 是否显示指示器。
+* **show-indicators**, boolean. 是否显示指示器。尽管`show-indicator`的默认值是true，本属性只有在slider下包含 [`<indicator>`](indicator.html) 时才有意义。
 * **infinite**, boolean. 设置是否可以无限轮播，默认为 true。
 * **scrollable**, boolean. 设置是否可以通过滑动手势来切换页面，默认为 true。
 * **keep-index**, boolean, <Badge text="Android" type="warning"/>. 设置轮播器中的数据发生变化后是否保持变化前的页面序号。
diff --git a/docs/zh/docs/events/common-events.md b/docs/zh/docs/events/common-events.md
index 23cb530..98cc1c9 100644
--- a/docs/zh/docs/events/common-events.md
+++ b/docs/zh/docs/events/common-events.md
@@ -2,6 +2,22 @@
 
 Weex 提供了通过事件触发动作的能力，例如在用户点击组件时执行 JavaScript。下面列出了可被添加到 Weex 组件上以定义事件动作的属性：
 
+## 事件穿透
+
+::: warning 注意
+`Android`和`iOS`下原生事件传递机制不同，这里仅针对`iOS`
+:::
+
+当一个父View存在多个同级子View时，由于`iOS`会选择层级最高的View来响应事件，底层的View的事件永远都不会响应。
+
+Weex在`<div>`组件中增加了`eventPenetrationEnabled`属性，当值为`true`时，View的子View仍能正常响应事件，但View自身将不会响应事件，而是将事件向下层View传递。
+
+[示例](https://jsplayground.taobao.org/raxplayground/c230a32e-489c-4fda-ae90-40faa6aaafbc??from=)
+
+## View交互性
+
+Weex在`<div>`组件中增加了`userInteractionEnabled`属性，当值为`true`时，View及其子View均不响应事件 事件向下层View传递
+
 ## click
 
 当组件上发生点击手势时被触发。
diff --git a/docs/zh/docs/modules/meta.md b/docs/zh/docs/modules/meta.md
index e472e0f..2d2e476 100644
--- a/docs/zh/docs/modules/meta.md
+++ b/docs/zh/docs/modules/meta.md
@@ -13,8 +13,16 @@
 * **@options**
   * **`width`**，number，具体数值或 `"device-width"` 和 `"device-height"` 宏。
   * **`height`**，number，具体数据或 `"device-width"` 和 `"device-height"` 宏。
+  * **`deviceWidth`**，number。
+  ::: danger
+  Android暂不支持
+  :::
+  * **`deviceHeight`**，number。
+  ::: danger
+  Android暂不支持
+  :::
   * **`roundOffDeviation`** <Badge text="0.20.0+ & Android Only" type="warn" vertical="middle"/>，表示layout引擎在布局时会忽略小数点导致的误差；若发现组件拼接处有缝隙，可以将 `roundOffDeviation` 设置为false，此时layout引擎将自动填补小数点误差，默认值为 true。
-
+  * **`reserveCssStyles`**，设置为true保留页面样式，用于支持横竖屏切换,[文档](https://weex.apache.org/zh/guide/advanced/multi-size-screen.html)。
 ::: tip 注意
 * 需要注意的是：只有在页面渲染开始之前设置 viewport 才会生效。 也就是说，setViewport 方法只能在入口文件中使用，而且要在 new Vue(...) 之前调用；如果是在组件中使用，就只有在渲染到该组件的时候才会执行相应的代码，此时页面已经处于渲染过程中，设置 viewport 将不会再生效。
 * 宽度和高度的单位默认是 px，暂不支持其他单位。
@@ -34,6 +42,7 @@
 meta.setViewport({
   width: 640,
   roundOffDeviation: false
+  reserveCssStyles: true
 });
 
 App.el = '#root';
diff --git a/docs/zh/docs/styles/common-styles.md b/docs/zh/docs/styles/common-styles.md
index 36b8221..669189e 100644
--- a/docs/zh/docs/styles/common-styles.md
+++ b/docs/zh/docs/styles/common-styles.md
@@ -7,7 +7,7 @@
 :::
 
 ::: warning
-Weex 对于长度值目前只支持像素值，不支持相对单位（`em`、`rem`）。
+Weex 对于长度值目前只支持`px`和`wx`（不受屏幕宽度和viewPortWidth影响），不支持相对单位（`em`、`rem`）。
 :::
 
 ## 盒模型
diff --git a/docs/zh/docs/styles/css-units.md b/docs/zh/docs/styles/css-units.md
index 5754bef..4b7a278 100644
--- a/docs/zh/docs/styles/css-units.md
+++ b/docs/zh/docs/styles/css-units.md
@@ -2,11 +2,11 @@
 
 ## CSS 长度单位
 
-在 Weex 中，我们**只支持 `px` 长度单位**。
+在 Weex 中，我们**支持 `px`和`wx` 长度单位**。对于不希望受屏幕宽度和 viewPortWidth 影响的尺寸，请使用 `wx` 单位。
 
 ::: warning 注意
 - Weex 不支持类似 `em`、`rem`、`pt`,`%` 这样的 CSS 标准中的其他长度单位；
-- 单位 `px` 不可省略，否则在 H5 环境无法正确渲染；
+- 单位 `px`或`wx` 不可省略，否则在 H5 环境无法正确渲染；
 :::
 
 ## CSS 数值单位
@@ -217,4 +217,4 @@
 | white | #FFFFFF |
 | whitesmoke | #F5F5F5 |
 | yellow | #FFFF00 |
-| yellowgreen | #9ACD32 |
\ No newline at end of file
+| yellowgreen | #9ACD32 |
diff --git a/docs/zh/guide/advanced/multi-size-screen.md b/docs/zh/guide/advanced/multi-size-screen.md
index 4201d4b..a189423 100644
--- a/docs/zh/guide/advanced/multi-size-screen.md
+++ b/docs/zh/guide/advanced/multi-size-screen.md
@@ -76,19 +76,30 @@
 ```Javascript
 const meta = weex.requireModule('meta');
 meta.setViewport({
-	width: 800
+    width: 800
 });
 ```
 
 #### 2. 使用 WXSDKInstance 的接口
 
+* iOS:  
 ```Objective-C
 WXSDKInstance* instance = [[WXSDKInstance alloc] init];
 [instance setViewportWidth:800.f];
 ```
 
+* Android:  
+```Java
+WXSDKInstance instance = new WXSDKInstance(mContext);
+instance.setInstanceViewPortWidth(800);
+```
+
 ### 二、设置页面使用的 deviceWidth
 
+::: danger 
+Android暂不支持
+:::
+
 <Badge text="v0.25+" type="warning"/>
 
 #### 1. 使用 Meta Module
@@ -96,8 +107,8 @@
 ```Javascript
 const meta = weex.requireModule('meta');
 meta.setViewport({
-	deviceWidth: 375,
-	deviceHeight: 800
+    deviceWidth: 375,
+    deviceHeight: 800
 });
 ```
 
@@ -123,24 +134,35 @@
 ```Javascript
 const meta = weex.requireModule('meta');
 meta.setViewport({
-	reserveCssStyles: true
+    reserveCssStyles: true
 });
 ```
 
 #### 2. 使用 WXSDKInstance 的接口
 
+* iOS:  
 ```Objective-C
 WXSDKInstance* instance = [[WXSDKInstance alloc] init];
 [instance setPageKeepRawCssStyles];
 ```
+* Android:
+```Java
+WXSDKInstance instance = new WXSDKInstance(mContext);
+instance.setPageKeepRawCssStyles();
+```
 
 ### 四、强制页面重新排版
 
-<Badge text="v0.25+" type="warning"/>
+<Badge text="v0.25+" type="warning"/> 
 
+* iOS:  
 ```Objective-C
 [instance reloadLayout];
 ```
+* Android:  
+```Java
+instance.reloadPageLayout();
+```
 
 ## 使用场景
 
@@ -154,12 +176,19 @@
 
 1、设置页面保留原始 CSS 样式值
 2、当屏幕旋转完成后，调用以下接口设置新的屏幕尺寸，并重新排版
+
+* iOS:
 ```Objective-C
 CGFloat w = [UIScreen mainScreen].bounds.size.width;
 CGFloat h = [UIScreen mainScreen].bounds.size.height;
 [_instance setPageRequiredWidth:w height:h];
 [_instance reloadLayout];
 ```
+* Android:
+```Java
+instance.resetDeviceDisplayOfPage();
+instance.reloadPageLayout();
+```
 
 你可以使用最新 Playground 扫码[示例](http://editor.weex.io/p/wqyfavor/scroller/commit/37810078ef963388b699b5ad7d5e9881)
 要在控制面板里允许屏幕自动旋转。
diff --git a/docs/zh/guide/contribute/bug-report-guidelines.md b/docs/zh/guide/contribute/bug-report-guidelines.md
deleted file mode 100644
index ad25358..0000000
--- a/docs/zh/guide/contribute/bug-report-guidelines.md
+++ /dev/null
@@ -1,27 +0,0 @@
-# 反馈 Bug
-
-Weex 社区使用 [Github Issue](https://github.com/apache/incubator-weex/issues) 来跟踪并处理 Bug 。Bug 反馈中包含的信息越多，越有助于该 Bug 被快速修复。
-
-::: tip
-* 避免重复: 在报 bug 前先搜索。
-* 总是测试最新的可用版本。
-* 每个报告只报一个 bug。
-:::
-
-## Bug 反馈的格式
-在 Weex 的 Github Issue 中提 Bug 时，请选择 [Bug Report](https://github.com/apache/incubator-weex/issues/new?template=bug_report.md)模板，并按照其中的格式填写，这样有助于 Bug 被更快的处理。
-
-::: tip
-为了让你的 Bug 反馈被更多人看到，请尽量使用英文描述 Bug
-:::
-
-::: warning
-反馈 Bug 时陈述有用的事实，而不是意见或抱怨。
-:::
-
-## 96小时原则
-一般情况下，Weex 社区会在 96 小时内响应新提出的Bug，如遇到法定假日或其他节假日，响应速度可能会变慢，请耐心等待。
-
-::: tip
-如果你提出的 Bug 在一周内无任何反馈，请勇敢的在[邮件列表](./how-to-contribute.html#%E9%82%AE%E4%BB%B6%E5%88%97%E8%A1%A8)中询问 Weex 社区的开发者们。
-:::
\ No newline at end of file
diff --git a/docs/zh/guide/contribute/contribute-code.md b/docs/zh/guide/contribute/contribute-code.md
deleted file mode 100644
index d0da9f6..0000000
--- a/docs/zh/guide/contribute/contribute-code.md
+++ /dev/null
@@ -1,87 +0,0 @@
-# 代码贡献指南
-
-本文档描述了如何对 Weex 源代码进行更改和提交，以下是建议的步骤：
-
-## 写代码前
-### 检查 License
-Weex 采用 [Apache License 2.0](https://choosealicense.com/licenses/apache-2.0/)作为其开源证书，Weex的任何新增改动需要符合该开源证书的要求。
-
-### 修复 Bug 还是提供新特性 ？
-* 如果你准备为 Weex 修复一个Bug，先在[ Github Issues ](https://github.com/apache/incubator-weex/issues)中查看对应的 Bug 是否存在，如果存在的话，请在提交Pull Request时附上对应的链接。
-
-* 如果你准备为 Weex 添加一个新的特性，请遵循以下流程：
-    1. 向[邮件列表](how-to-contribute.html#邮件列表)中发送邮件，说明你需要你想要做的事情。
-    1. 编写[文档](how-to-contribute.html#贡献文档或代码).
-
-
-## 编写代码
-1. Fork Weex 的 [Github 仓库](https://github.com/apache/incubator-weex)。
-
-1. 编写需要开发的特性或 bug 修复代码，确保你的更改符合[代码风格指南](./contribute-code.html#代码风格指南)。
-
-1. 复制下面的**License注释**到你的新文件顶部:
-   
-        /*
-        * Licensed to the Apache Software Foundation (ASF) under one
-        * or more contributor license agreements.  See the NOTICE file
-        * distributed with this work for additional information
-        * regarding copyright ownership.  The ASF licenses this file
-        * to you under the Apache License, Version 2.0 (the
-        * "License"); you may not use this file except in compliance
-        * with the License.  You may obtain a copy of the License at
-        *
-        *   http://www.apache.org/licenses/LICENSE-2.0
-        *
-        * Unless required by applicable law or agreed to in writing,
-        * software distributed under the License is distributed on an
-        * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
-        * KIND, either express or implied.  See the License for the
-        * specific language governing permissions and limitations
-        * under the License.
-        */
-   
-
-1. 提交代码到你的分支上。
-
-:::tip
-如果你使用Android Studio开发 Java 或 C++ 代码，**License注释**会在编译时自动添加到文件头部，无需人工操作。
-:::
-
-### 代码风格指南
-
-#### Objective-C
-
-- 用 tab 缩进而不是空格
-
-- `*` 操作符靠近变量名（如 Type *variable）
-- 方法定义：大括号需要另起一行
-- 其他大括号：开括号紧跟在代码后面，不另起一行，闭括号单独占一行
-- 使用 `#pragma marks` 标记将方法分类
-- 遵循 [GitHub Objective-C Style Guide](https://github.com/github/objective-c-style-guide) 中其他的代码风格指南
-
-#### Java & Android
-
-- 使用 [Google Java Style](https://google.github.io/styleguide/javaguide.html) 作为基本的 Java 代码风格指南
-- 其他 android 相关代码需遵循 [AOSP Code Style](https://source.android.com/source/code-style.html)
-
-#### C & C++
-
-* 整体使用[Google C++ Style](https://google.github.io/styleguide/cppguide.html)作为C++代码风格指南
-* Weex定义了一套[Google C++ 开发规范子集](https://github.com/jianhan-he/C-Style-Guide/blob/master/C%2B%2B%20Style%20Guide.md)，涵盖了一些主要C++场景使用规范
-
-## 提交代码
-
-[创建一个 pull request](https://help.github.com/articles/using-pull-requests/) 并提交到 [`apache/incubator-weex`](https://github.com/apache/incubator-weex) 的 `master` 分支，确保它符合这些准则:
-
-1. 一个 Pull Request 只解决一个问题
-2. PR 标题应符合 `[模块] 标题` 格式：
-    * 模块是 PR 的类别（android、iOS、JsFm、web、doc、test、other），
-    * 标题是对PR内容不超过一句话的描述。
-3. PR 内容
-    * 如果 PR 是修复了某个 Bug *非Crash*，需要在 PR 内容中添加对应的 [Demo 地址](http://dotwe.org/vue)
-    * 如果 PR 是添加了某个特性，需要在 PR 内容中添加对应的[文档PR](how-to-contribute.html#贡献文档或代码)。
-    * *可选项* 如果 PR 解决了某个Github issue， 需要在 PR 内容中添加对应的链接
-
-:::tip
-PR的 Review 需要一定时间，请耐心等待。如果某个 PR 超过**96小时**无人回复，可向[Weex邮件列表](how-to-contribute.html#邮件列表)发送邮件，询问进展。
-:::
\ No newline at end of file
diff --git a/docs/zh/guide/contribute/how-to-contribute.md b/docs/zh/guide/contribute/how-to-contribute.md
index 32d5b81..1461350 100644
--- a/docs/zh/guide/contribute/how-to-contribute.md
+++ b/docs/zh/guide/contribute/how-to-contribute.md
@@ -23,6 +23,9 @@
 在Weex邮件组中，请使用英文沟通，以便让来自全球的开发者知道你的观点。
 :::
 
+## Members and Governance Model
+Weex 目前的 Committer，PPMC 成员以及加入 Weex Committer 的方式都列在[文档](https://cwiki.apache.org/confluence/x/bFoyBw)中。
+
 ## 提出与解决解答问题
 * 如果你对weex的用法或基本概念有疑惑，可以在[stackoverflow.com](http://stackoverflow.com/questions/tagged/weex)上提出相关问题。
 * 如果你确定某个问题是一个bug，请参考[Bug 反馈指南](./bug-report-guidelines.html)，并使用Github Issue来反馈。
@@ -35,8 +38,17 @@
 Github Issue 仅用接收 Bug 反馈以及 StackOverflow 上超过 96 小时无人回复的问题，其他问题请通过邮件列表进行沟通。
 :::
 
+## 研发流程
+Weex 研发流程的文档被放置于 [Confluence](https://cwiki.apache.org/confluence/x/eJBTB) 上，这个文档对所有用户可以，文档的主要使用者是 Weex 的 Contributor 。
+
+* [Release Plan](https://github.com/apache/incubator-weex/milestones): 从 0.27 开始，Weex 使用 Github Milestone 管理版本计划。所有的 feature, bugfix 和已经解决的 issue 都和某个里程碑关联。由于 Weex 发布需要两轮投票，里程碑的发布日期仅供参考。
+* [Release Procedure](https://cwiki.apache.org/confluence/x/_I5TBw)
+* [Major feature](https://github.com/apache/incubator-weex/projects)
+* [System Design](https://cwiki.apache.org/confluence/x/XYxTBw)
+* [Road Map](https://cwiki.apache.org/confluence/x/fJBTBw)
+
 ## 贡献文档或代码
-提交代码 *Pull Request* 并不是参与 Weex 贡献的唯一方式，在Weex社区中，**文档和一样重要**，并尊重所有开发者对 Weex 文档或代码的贡献。
+提交代码 *Pull Request* 并不是参与 Weex 贡献的唯一方式，在Weex社区中，**文档和代码一样重要**，并尊重所有开发者对 Weex 文档或代码的贡献。
 
 :::tip
 Weex 采用了 Apache License 2.0，请确保你的贡献符合Apache License 2.0的约束。
@@ -54,4 +66,4 @@
 :::
 
 ### 贡献代码
-贡献的代码可以是修复已知的 bug 或者 开发新 feature，参考[代码提交指南](./contribute-code.html)了解更多细节。
\ No newline at end of file
+贡献的代码可以是修复已知的 bug 或者 开发新 feature，参考[代码提交指南](./contribute-code.html)了解更多细节。
diff --git a/docs/zh/guide/contribute/thanks.md b/docs/zh/guide/contribute/thanks.md
new file mode 100644
index 0000000..8c33d5d
--- /dev/null
+++ b/docs/zh/guide/contribute/thanks.md
@@ -0,0 +1,4 @@
+# Thanks
+Weex的存在离不开社区的持续支持，我们在这里感谢以下项目/公司对我们的支持。
+
+* ![Sauce Lab](/sauce_labs_red.svg)[Sauce Labs](https://saucelabs.com): A Cross-browser Testing Platform.
\ No newline at end of file
diff --git a/docs/zh/guide/debug/integrate-devtool-to-android.md b/docs/zh/guide/debug/integrate-devtool-to-android.md
index 50f4f47..e8afe3a 100644
--- a/docs/zh/guide/debug/integrate-devtool-to-android.md
+++ b/docs/zh/guide/debug/integrate-devtool-to-android.md
@@ -16,6 +16,7 @@
 | 0.19.0+  | 0.18.68        |
 | 0.20.3.0-beta | 0.20.3.0-beta |
 | 0.24.0+  | 0.24.2.4 |
+| 0.26.0+  | 0.24.2.4 |
 
 ## Android接入指南
 
diff --git a/docs/zh/guide/playground.md b/docs/zh/guide/playground.md
new file mode 100644
index 0000000..022cedf
--- /dev/null
+++ b/docs/zh/guide/playground.md
@@ -0,0 +1,5 @@
+---
+pageClass: tool
+---
+
+<Tool-Playground />
\ No newline at end of file
diff --git a/docs/zh/guide/use-vue-in-weex.md b/docs/zh/guide/use-vue-in-weex.md
index e62d61d..fed2c3a 100644
--- a/docs/zh/guide/use-vue-in-weex.md
+++ b/docs/zh/guide/use-vue-in-weex.md
@@ -62,7 +62,7 @@
 
 ## 单文件组件
 
-Vue 中的[单文件组件](https://cn.vuejs.org/v2/guide/single-file-components.html)（即`*.vue`文件）是一种特殊的文件格式，扩展名为`.vue`。这个模板会在构建时便于到`render`函数里。
+Vue 中的[单文件组件](https://cn.vuejs.org/v2/guide/single-file-components.html)（即`*.vue`文件）是一种特殊的文件格式，扩展名为`.vue`。这个模板会在构建时编译到`render`函数里。
 
 此外，所有的编辑器里都支持一个好的[语法高亮插件](https://github.com/vuejs/awesome-vue#source-code-editing)。
 
@@ -118,6 +118,58 @@
 无论什么情况下都使用 javascript 文件作为入口文件。
 :::
 
+**使用weex-loader单文件编译示例**
+1. 执行`npm init`
+2. 修改`package.json`文件，向其中添加：
+```
+  "dependencies": {
+    "babel-loader": "^8.0.6",
+    "weex-loader": "^0.7.12",
+    "webpack": "^2.2.1"
+  },
+  "scripts": {
+    "build": "webpack --config webpack.config.js"
+  },
+```
+3. 创建`webpack.config.js`,按照你的需要更改。
+```
+const webpack = require('webpack');
+const path = require('path');
+
+module.exports = {
+  entry: '<your-input-file>',
+  output: {
+    path: path.resolve(__dirname, './'),
+    filename: <your-output-file>
+  },
+  module: {
+	    rules: [
+	      {
+	        test: /\.vue(\?[^?]+)?$/,
+	        loaders: ['weex-loader']
+	      },
+	      {
+	        test: /\.js$/,
+	        loaders: ['babel-loader']
+	      }
+	    ]
+	  },
+	plugins: [
+		new webpack.BannerPlugin({
+			raw: true ,
+			banner: '// { "framework": "Vue" }\n'
+		})
+	]
+}
+```
+4. 执行`npm run build`。
+5. 完成。
+
+**使用weex compile编译**
+1. 安装[weex-toolkit](https://weex.apache.org/zh/tools/toolkit.html#安装)：`npm install weex-toolkit -g`
+2. 执行`weex compile [资源文件] [产物地址]`命令
+3. 完成。
+
 ## 支持的功能
 
 ### 全局配置
diff --git a/docs/zh/tools/README.md b/docs/zh/tools/README.md
index 061c316..c155a6f 100644
--- a/docs/zh/tools/README.md
+++ b/docs/zh/tools/README.md
@@ -1,7 +1,7 @@
 <script>
 module.exports = {
   created(){
-    this.$router.push('/zh/tools/playground.html')
+    this.$router.push('/zh/tools/toolkit.html')
   }
 }
 </script>
\ No newline at end of file
diff --git a/docs/zh/tools/dotwe.md b/docs/zh/tools/dotwe.md
new file mode 100644
index 0000000..a526877
--- /dev/null
+++ b/docs/zh/tools/dotwe.md
@@ -0,0 +1,5 @@
+---
+pageClass: tool
+---
+
+<Tool-Dotwe />
\ No newline at end of file
diff --git a/docs/zh/tools/playground.md b/docs/zh/tools/playground.md
deleted file mode 100644
index 6796501..0000000
--- a/docs/zh/tools/playground.md
+++ /dev/null
@@ -1 +0,0 @@
-# Playground App
\ No newline at end of file