From 83bfe6481d0309b412343fff831a5f25603ee719 Mon Sep 17 00:00:00 2001
From: Yun Dong <yundong.me@gmail.com>
Date: Wed, 1 Mar 2017 10:32:03 +0800
Subject: [PATCH 1/4] * [doc] auto switch language only on the landing page.

---
 doc/source/cn/guide/index.md                  | 35 ++++++-
 doc/source/cn/references/modules/websocket.md | 75 +++++++--------
 doc/source/guide/index.md                     | 34 ++++++-
 doc/source/references/modules/websocket.md    | 91 +++++++++----------
 doc/themes/weex/languages/cn.yml              |  2 +-
 doc/themes/weex/languages/en.yml              |  2 +-
 doc/themes/weex/layout/_partial/footer.ejs    |  2 +-
 doc/themes/weex/layout/_partial/head.ejs      | 43 ---------
 doc/themes/weex/layout/index.ejs              | 29 +++++-
 doc/themes/weex/source/css/index.scss         |  4 +-
 doc/themes/weex/source/js/common.js           | 33 ++++---
 11 files changed, 190 insertions(+), 160 deletions(-)

diff --git a/doc/source/cn/guide/index.md b/doc/source/cn/guide/index.md
index 1fdc4ceec6..e2d43e41e1 100644
--- a/doc/source/cn/guide/index.md
+++ b/doc/source/cn/guide/index.md
@@ -12,7 +12,7 @@ Weex 是一套简单易用的跨平台开发方案，能以 web 的开发体验
 
 ## Vue 是什么？
 
-Vue.js 是 Evan You 开发的渐进式 JavaScript 框架，在易用性、灵活性和性能等方面都非常优秀。开发者能够通过撰写 `*.vue` 文件，基于 `<template>`, `<style>`, `<script>` 快速构建组件化的 web 应用。
+Vue.js 是 Evan You 开发的渐进式 JavaScript 框架。开发者能够通过撰写 `*.vue` 文件，基于 `<template>`, `<style>`, `<script>` 快速构建组件化的 web 应用。
 
 ## Hello World
 
@@ -21,13 +21,44 @@ Vue.js 是 Evan You 开发的渐进式 JavaScript 框架，在易用性、灵活
 - 为你的手机安装 [Playground App](https://alibaba.github.io/weex/download.html)，当然，Weex 是跨平台的框架，你依然可以使用浏览器进行预览，只是这样你就无法感受到 native 优秀的体验了。
 - 在新标签页中打开 [Hello World](http://dotwe.org/vue/4d5a0471ece3daabd4681bc6d703c4c1) 例子，点击预览，然后用  Playground 扫码即可。
 
+在这个例子中，我们看到了熟悉的 HTML 语义化标签、CSS 样式和 Javascript 代码。这是一个最简单的 Weex 示例，它在页面中渲染了一个 “Hello World”。请注意，这不是一个 H5 页面，而是 native 的。
 
 ![mobile_preview](https://img.alicdn.com/tps/TB1Ymw3OpXXXXcvXpXXXXXXXXXX-500-1013.jpg)
 
-很简单，我们可以看到语法就是我们熟悉的 Vue。你可以修改这个例子，再次扫码尝试。
+### 发生了什么？
+
+就如示例代码所示：
+
+```html
+<template>
+  <div>
+    <text class="text">{{text}}</text>
+  </div>
+</template>
+
+<style>
+  .text {
+    font-size: 50;
+  }
+</style>
+
+<script>
+  export default {
+    data () {
+      return {
+        text: 'Hello World.'
+      }
+    }
+  }
+</script>
+```
+
+我们暂时不去关心 Weex 的技术细节，仅看大致的代码结构，我们可以看到语法就是我们熟悉的 Vue。你可以修改这个例子，再次扫码尝试。
 
 ## 搭建开发环境
 
+使用 dotWe 对 Weex 尝鲜是一个不错的选择，但如果你想更专业的开发 Weex， dotWe 就不怎么够用了。本节会教你如何搭建本地开发环境进行 Weex 开发。
+
 ### 第一步：安装依赖
 
 Weex 官方提供了 weex-toolkit 的脚手架工具来辅助开发和调试。首先，你需要 Node.js 和 weex-toolkit。
diff --git a/doc/source/cn/references/modules/websocket.md b/doc/source/cn/references/modules/websocket.md
index 4835e8e6e9..8efaaa660a 100644
--- a/doc/source/cn/references/modules/websocket.md
+++ b/doc/source/cn/references/modules/websocket.md
@@ -90,7 +90,7 @@ WebSockets 是一种先进的技术, 这使得在用户的 H5/iOS/Android 和一
   <scroller>
     <div>
       <div style="background-color: #286090">
-        <text class="title" style="height: 80px ;padding: 20px;color: white">websocket</text>
+        <text class="title" style="height: 80 ;padding: 20;color: #FFFFFF">websocket</text>
       </div>
       <input
               type="text"
@@ -107,64 +107,54 @@ WebSockets 是一种先进的技术, 这使得在用户的 H5/iOS/Android 和一
         <text class="button" onclick="{{send}}">send</text>
         <text class="button" onclick="{{close}}">close</text>
       </div>
-
-      <div style="background-color: lightgray">
-        <text class="title" style="height: 80px ;padding: 20px;color: black">method = send</text>
+      <div style="background-color: #D3D3D3;margin-top: 20">
+        <text class="title" style="height: 80 ;padding: 20;color: #000000">method = send</text>
       </div>
-      <text style="color: black;height: 80px">{{sendinfo}}</text>
-
-
-      <div style="background-color: lightgray">
-        <text class="title" style="height: 80px ;padding: 20px;color: black">method = onopen</text>
+      <text style="color: #000000;height: 80">{{sendinfo}}</text>
+      <div style="background-color: #D3D3D3">
+        <text class="title" style="height: 80 ;padding: 20;color: #000000">method = onopen</text>
       </div>
-      <text style="color: black;height: 80px">{{onopeninfo}}</text>
-
-      <div style="background-color: lightgray">
-        <text class="title" style="height: 80px ;padding: 20px;color: black">method = onmessage</text>
+      <text style="color: #000000;height: 80">{{onopeninfo}}</text>
+      <div style="background-color: #D3D3D3">
+        <text class="title" style="height: 80 ;padding: 20;color: #000000">method = onmessage</text>
       </div>
-      <text style="color: black;height: 400px">{{onmessage}}</text>
-
-      <div style="background-color: lightgray">
-        <text class="title" style="height: 80px ;padding: 20px;color: black">method = onclose</text>
+      <text style="color: #000000;height: 100">{{onmessage}}</text>
+      <div style="background-color: #D3D3D3">
+        <text class="title" style="height: 80 ;padding: 20;color: #000000">method = onclose</text>
       </div>
-      <text style="color: black;height: 80px">{{oncloseinfo}}</text>
-
-      <div style="background-color: lightgray">
-        <text class="title" style="height: 80px ;padding: 20px;color: black">method = onerror</text>
+      <text style="color: #000000;height: 80">{{oncloseinfo}}</text>
+      <div style="background-color: #D3D3D3">
+        <text class="title" style="height: 80 ;padding: 20;color: #000000">method = onerror</text>
       </div>
-      <text style="color: black;height: 80px">{{onerrorinfo}}</text>
-
-      <div style="background-color: lightgray">
-        <text class="title" style="height: 80px ;padding: 20px;color: black">method = close</text>
+      <text style="color: #000000;height: 80">{{onerrorinfo}}</text>
+      <div style="background-color: #D3D3D3">
+        <text class="title" style="height: 80 ;padding: 20;color: #000000">method = close</text>
       </div>
-      <text style="color: black;height: 80px">{{closeinfo}}</text>
-
+      <text style="color: #000000;height: 80">{{closeinfo}}</text>
     </div>
     </div>
   </scroller>
 </template>
-
 <style>
   .input {
-    font-size: 40px;
-    height: 80px;
-    width: 600px;
+    font-size: 40;
+    height: 80;
+    width: 600;
   }
   .button {
-    font-size: 36px;
-    width: 150px;
+    font-size: 36;
+    width: 150;
     color: #41B883;
     text-align: center;
-    padding-top: 25px;
-    padding-bottom: 25px;
-    border-width: 2px;
+    padding-top: 10;
+    padding-bottom: 10;
+    border-width: 2;
     border-style: solid;
-    margin-right: 20px;
+    margin-right: 20;
     border-color: rgb(162, 217, 192);
     background-color: rgba(162, 217, 192, 0.2);
   }
 </style>
-
 <script>
   var websocket = require('@weex-module/webSocket');
   module.exports = {
@@ -184,11 +174,12 @@ WebSockets 是一种先进的技术, 这使得在用户的 H5/iOS/Android 和一
     },
     methods: {
       connect:function() {
-        websocket.WebSocket('ws://115.29.193.48:8088','');
+        websocket.WebSocket('ws://echo.websocket.org','');
         var self = this;
+        self.onopeninfo = 'connecting...'
         websocket.onopen = function(e)
         {
-          self.onopeninfo = JSON.stringify(e);
+          self.onopeninfo = 'websocket open';
         }
         websocket.onmessage = function(e)
         {
@@ -200,6 +191,7 @@ WebSockets 是一种先进的技术, 这使得在用户的 H5/iOS/Android 和一
         }
         websocket.onclose = function(e)
         {
+          self.onopeninfo = '';
           self.onerrorinfo = e.code;
         }
       },
@@ -208,7 +200,6 @@ WebSockets 是一种先进的技术, 这使得在用户的 H5/iOS/Android 和一
         input.blur();
         websocket.send(this.txtInput);
         this.sendinfo = this.txtInput;
-
       },
       oninput: function(event) {
         this.txtInput = event.value;
@@ -221,4 +212,4 @@ WebSockets 是一种先进的技术, 这使得在用户的 H5/iOS/Android 和一
 </script>
 ```
 
-[Have a try](http://dotwe.org/weex/993f33173a712fecfb61c1c4b03bcb70)
+[Have a try](http://dotwe.org/weex/0256bbfc448f0fdbe8b10ba311c947b4)
\ No newline at end of file
diff --git a/doc/source/guide/index.md b/doc/source/guide/index.md
index 0abde32d40..6c11d544b0 100644
--- a/doc/source/guide/index.md
+++ b/doc/source/guide/index.md
@@ -12,7 +12,7 @@ Weex is a framework for building Mobile cross-platform high performance UI. Deve
 
 ## What is Vue?
 
-[Vue.js](https://vuejs.org/) is an excellent progressive JavaScript framework written by [Evan You](https://twitter.com/youyuxi) which is very ease and flexible to use. Developers can write `*.vue` files with friendly `<template>`, `<style>`, `<script>` tags to build componentized web app. Now Weex and Vue has supported each other officially. Weex put Vue 2.x as its built-in JS Framework, and Vue has already been able to develop native mobile app.
+[Vue.js](https://vuejs.org/) is an excellent progressive JavaScript framework written by [Evan You](https://twitter.com/youyuxi). Now Weex and Vue has supported each other officially. Weex put Vue 2.x as its built-in JS Framework, and Vue has already been able to develop native mobile app.
 
 ## Hello world
 
@@ -21,16 +21,46 @@ The easiest way to try Weex is to use the [Playground App](../playground.html) a
 - Install the [Playground App](../playground.html) for your phone.
 - Open [the Hello World example](http://dotwe.org/vue/4d5a0471ece3daabd4681bc6d703c4c1) in a new tab, click run, and then use the Playground App to scan the QR code.
 
-Nailed it!
+Nailed it! In this case, We can see HTML semantic tags, CSS styles and Javascript code. This is one of the simplest Weex examples. It rendered a "Hello World" in the page. Please note that this is not a Web page.
 
 ![mobile_preview](https://img.alicdn.com/tps/TB1Ymw3OpXXXXcvXpXXXXXXXXXX-500-1013.jpg)
 
+### What happened?
+
+As shown in the following code：
+
+```html
+<template>
+  <div>
+    <text class="text">{{text}}</text>
+  </div>
+</template>
+
+<style>
+  .text {
+    font-size: 50;
+  }
+</style>
+
+<script>
+  export default {
+    data () {
+      return {
+        text: 'Hello World.'
+      }
+    }
+  }
+</script>
+```
+
 It's too easy，right? Let's focus on the syntax, obviously this is vue.
 
 You can try to modify the Hello World, then generate a new QR code to scan.
 
 ## Set up development environment 
 
+Use dotWe is a good choice, But if you want to develop locally on your own machine, you will set up your development environment.
+
 You will need Node.js and the Weex CLi.
 
 You can installing Node using [nvm](https://github.com/creationix/nvm) (Simple bash script to manage multiple active node.js versions). Run the following commands in a Terminal after installing nvm:
diff --git a/doc/source/references/modules/websocket.md b/doc/source/references/modules/websocket.md
index 7868903f3f..b2752f46a3 100644
--- a/doc/source/references/modules/websocket.md
+++ b/doc/source/references/modules/websocket.md
@@ -89,81 +89,71 @@ An event listener to be called when an error occurs.
   <scroller>
     <div>
       <div style="background-color: #286090">
-        <text class="title" style="height: 80px ;padding: 20px;color: white">websocket</text>
+        <text class="title" style="height: 80 ;padding: 20;color: #FFFFFF">websocket</text>
       </div>
       <input
-        type="text"
-        placeholder="please input message to send"
-        class="input"
-        autofocus="false"
-        value=""
-        onchange="onchange"
-        oninput="oninput"
-        id = "input"
+              type="text"
+              placeholder="please input message to send"
+              class="input"
+              autofocus="false"
+              value=""
+              onchange="onchange"
+              oninput="oninput"
+              id = "input"
       />
       <div style="flex-direction: row; justify-content: center;">
         <text class="button" onclick="{{connect}}">connect</text>
         <text class="button" onclick="{{send}}">send</text>
         <text class="button" onclick="{{close}}">close</text>
       </div>
-
-      <div style="background-color: lightgray">
-        <text class="title" style="height: 80px ;padding: 20px;color: black">method = send</text>
+      <div style="background-color: #D3D3D3;margin-top: 20">
+        <text class="title" style="height: 80 ;padding: 20;color: #000000">method = send</text>
       </div>
-      <text style="color: black;height: 80px">{{sendinfo}}</text>
-
-
-      <div style="background-color: lightgray">
-        <text class="title" style="height: 80px ;padding: 20px;color: black">method = onopen</text>
+      <text style="color: #000000;height: 80">{{sendinfo}}</text>
+      <div style="background-color: #D3D3D3">
+        <text class="title" style="height: 80 ;padding: 20;color: #000000">method = onopen</text>
       </div>
-      <text style="color: black;height: 80px">{{onopeninfo}}</text>
-
-      <div style="background-color: lightgray">
-        <text class="title" style="height: 80px ;padding: 20px;color: black">method = onmessage</text>
+      <text style="color: #000000;height: 80">{{onopeninfo}}</text>
+      <div style="background-color: #D3D3D3">
+        <text class="title" style="height: 80 ;padding: 20;color: #000000">method = onmessage</text>
       </div>
-      <text style="color: black;height: 400px">{{onmessage}}</text>
-
-      <div style="background-color: lightgray">
-        <text class="title" style="height: 80px ;padding: 20px;color: black">method = onclose</text>
+      <text style="color: #000000;height: 100">{{onmessage}}</text>
+      <div style="background-color: #D3D3D3">
+        <text class="title" style="height: 80 ;padding: 20;color: #000000">method = onclose</text>
       </div>
-      <text style="color: black;height: 80px">{{oncloseinfo}}</text>
-
-      <div style="background-color: lightgray">
-        <text class="title" style="height: 80px ;padding: 20px;color: black">method = onerror</text>
+      <text style="color: #000000;height: 80">{{oncloseinfo}}</text>
+      <div style="background-color: #D3D3D3">
+        <text class="title" style="height: 80 ;padding: 20;color: #000000">method = onerror</text>
       </div>
-      <text style="color: black;height: 80px">{{onerrorinfo}}</text>
-
-      <div style="background-color: lightgray">
-        <text class="title" style="height: 80px ;padding: 20px;color: black">method = close</text>
+      <text style="color: #000000;height: 80">{{onerrorinfo}}</text>
+      <div style="background-color: #D3D3D3">
+        <text class="title" style="height: 80 ;padding: 20;color: #000000">method = close</text>
       </div>
-      <text style="color: black;height: 80px">{{closeinfo}}</text>
-
+      <text style="color: #000000;height: 80">{{closeinfo}}</text>
     </div>
     </div>
   </scroller>
 </template>
-
 <style>
   .input {
-    font-size: 40px;
-    height: 80px;
-    width: 600px;
+    font-size: 40;
+    height: 80;
+    width: 600;
   }
   .button {
-    font-size: 36px;
-    width: 150px;
+    font-size: 36;
+    width: 150;
     color: #41B883;
     text-align: center;
-    padding-top: 25px;
-    padding-bottom: 25px;
-    border-width: 2px;
+    padding-top: 10;
+    padding-bottom: 10;
+    border-width: 2;
     border-style: solid;
-    margin-right: 20px;
+    margin-right: 20;
     border-color: rgb(162, 217, 192);
     background-color: rgba(162, 217, 192, 0.2);
   }
 </style>
-
 <script>
   var websocket = require('@weex-module/webSocket');
   module.exports = {
@@ -183,11 +173,12 @@ An event listener to be called when an error occurs.
     },
     methods: {
       connect:function() {
-        websocket.WebSocket('ws://115.29.193.48:8088','');
+        websocket.WebSocket('ws://echo.websocket.org','');
         var self = this;
+        self.onopeninfo = 'connecting...'
         websocket.onopen = function(e)
         {
-          self.onopeninfo = JSON.stringify(e);
+          self.onopeninfo = 'websocket open';
         }
         websocket.onmessage = function(e)
         {
@@ -199,6 +190,7 @@ An event listener to be called when an error occurs.
         }
         websocket.onclose = function(e)
         {
+          self.onopeninfo = '';
           self.onerrorinfo = e.code;
         }
       },
@@ -207,7 +199,6 @@ An event listener to be called when an error occurs.
         input.blur();
         websocket.send(this.txtInput);
         this.sendinfo = this.txtInput;
-
       },
       oninput: function(event) {
         this.txtInput = event.value;
@@ -220,4 +211,4 @@ An event listener to be called when an error occurs.
 </script>
 ```
 
-[Have a try](http://dotwe.org/weex/993f33173a712fecfb61c1c4b03bcb70)
+[Have a try](http://dotwe.org/weex/0256bbfc448f0fdbe8b10ba311c947b4)
diff --git a/doc/themes/weex/languages/cn.yml b/doc/themes/weex/languages/cn.yml
index b158e53e07..67f72e698c 100644
--- a/doc/themes/weex/languages/cn.yml
+++ b/doc/themes/weex/languages/cn.yml
@@ -79,7 +79,7 @@ menu:
   advanced: 高阶知识
   baichuan: 阿里百川
   github: GitHub
-  legacy: 旧文档
+  legacy: 旧语法文档
 playground:
   content: Weex Native 运行时实例 & Weex 文件预览工具。
 categories: Categories
diff --git a/doc/themes/weex/languages/en.yml b/doc/themes/weex/languages/en.yml
index d5a0015f19..47ca0ecb7a 100644
--- a/doc/themes/weex/languages/en.yml
+++ b/doc/themes/weex/languages/en.yml
@@ -80,7 +80,7 @@ menu:
   advanced: Advanced
   baichuan: AliBaichuan
   github: GitHub
-  legacy: Legacy
+  legacy: Old Syntax Doc
 playground:
   content: Weex Native Runtime showcase & Weex we file preview.
 categories: Categories
diff --git a/doc/themes/weex/layout/_partial/footer.ejs b/doc/themes/weex/layout/_partial/footer.ejs
index 8e36aecdca..80fdc14d36 100644
--- a/doc/themes/weex/layout/_partial/footer.ejs
+++ b/doc/themes/weex/layout/_partial/footer.ejs
@@ -13,7 +13,7 @@
           <a href="<%= pick_lang('en') %>" data-lang="en">English</a>
         </li>
         <li>
-          <a href="<%= pick_lang('cn') %>" data-lang="cn">中文</a>
+          <a href="<%= pick_lang('cn') %>" data-lang="zh-cn">中文</a>
         </li>
       </ul>
     </div>
diff --git a/doc/themes/weex/layout/_partial/head.ejs b/doc/themes/weex/layout/_partial/head.ejs
index f3d428c5cb..e3f7962901 100644
--- a/doc/themes/weex/layout/_partial/head.ejs
+++ b/doc/themes/weex/layout/_partial/head.ejs
@@ -21,49 +21,6 @@
   %>
   <title><% if (title){ %><%= title %> | <% } %><%= config.title %></title>
   <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
-  <script>
-  ;(function(){
-    var currentOrigin = location.origin,
-        currentPathname = location.pathname,
-        currentLang = navigator.language,
-        selectedLang = '';
-
-    if (!currentLang) {
-      currentLang = navigator.browserLanguage;
-    }
-
-    if (window.sessionStorage) {
-      selectedLang = window.sessionStorage.getItem('lang')
-    }
-
-    if (!selectedLang) {
-      if (currentLang.indexOf('zh') >= 0 && currentPathname.indexOf('/cn/') != 0) {
-        location.href = getUrl('cn', currentOrigin, currentPathname);
-      } else if (currentLang.indexOf('en') >= 0 && currentPathname.indexOf('/cn/') == 0) {
-        location.href = getUrl('en', currentOrigin, currentPathname);
-      }
-    }
-
-    function getUrl (lang, origin, path) {
-      if (lang == 'en') {
-        if (path.indexOf('/cn/') == 0) {
-          return origin + path.substr(3)
-        } else {
-          return origin + path
-        }
-      } else {
-        var langPath = '/' + lang + '/'
-        var pathStart = path.indexOf(langPath)
-
-        if (pathStart == 0) {
-          return origin + path
-        } else {
-          return origin + langPath + path.substr(1)
-        }
-      }
-    }
-  })();
-  </script>
   <%- open_graph({twitter_id: theme.twitter, google_plus: theme.google_plus, fb_admins: theme.fb_admins, fb_app_id: theme.fb_app_id}) %>
   <% if (theme.rss){ %>
     <link rel="alternate" href="<%- theme.rss %>" title="<%= config.title %>" type="application/atom+xml">
diff --git a/doc/themes/weex/layout/index.ejs b/doc/themes/weex/layout/index.ejs
index d112ba7823..01c964a272 100644
--- a/doc/themes/weex/layout/index.ejs
+++ b/doc/themes/weex/layout/index.ejs
@@ -1,3 +1,30 @@
+<script>
+  ;(function(){
+    var currentOrigin = location.origin || 'https://weex-project.io',
+        currentPathname = location.pathname,
+        currentLang = navigator.language || navigator.browserLanguage || 'en',
+        selectedLang = '';
+
+    if (window.localStorage) {
+      selectedLang = window.localStorage.getItem('lang')
+      currentLang = selectedLang ? selectedLang : currentLang
+    }
+
+    if (/zh|cn/i.test(currentLang)) { // Chinese
+      if (currentPathname.indexOf('/cn/') != 0) {
+        location.href = currentOrigin + '/cn/'
+      }
+    } else if (/en/i.test(currentLang)) { // English
+      if (!/^\/$|^\/index/.test(currentPathname)) {
+        location.href = currentOrigin
+      }
+    } else { // Other
+      if (!/^\/$|^\/index/.test(currentPathname)) {
+        location.href = currentOrigin
+      }
+    }
+  })();
+</script>
 <div class="scene header" style="background: #00BDFF;">
   <div class="scene-container">
     <div class="galaxy left">
@@ -206,6 +233,6 @@ var swiper = new Swiper('.swiper-container', {
   loop: false,
   autoplay: false,
   autoplayDisableOnInteraction: false
-})
+});
 </script>
     
\ No newline at end of file
diff --git a/doc/themes/weex/source/css/index.scss b/doc/themes/weex/source/css/index.scss
index a11852cc25..8eb4e76552 100644
--- a/doc/themes/weex/source/css/index.scss
+++ b/doc/themes/weex/source/css/index.scss
@@ -13,12 +13,12 @@
   height: 100%;
   height: calc(100% - 72px);
 
-  &:nth-child(odd) {
+  &:nth-child(even) {
     background: $bg-gray;
     color: $text-blue;
   }
 
-  &:nth-child(even) {
+  &:nth-child(odd) {
     background: $bg-blue; 
     color: $text-white;
   }
diff --git a/doc/themes/weex/source/js/common.js b/doc/themes/weex/source/js/common.js
index 1eddfc647d..70dc2dc58d 100644
--- a/doc/themes/weex/source/js/common.js
+++ b/doc/themes/weex/source/js/common.js
@@ -73,34 +73,37 @@
   initSidebar()
 
   /**
-   * Pick lang
+   * Switch language
    */
   function initPickLang () {
-    var pick = document.querySelector('.pick-lang')
-    var elements = document.querySelectorAll('.pick-lang a')
+    document.addEventListener('DOMContentLoaded', function (e) {
+      var pick = document.querySelector('.pick-lang')
+      var elements = document.querySelectorAll('.pick-lang a')
 
-    pick.addEventListener('click', function (e) {
-      e.preventDefault()
-      e.stopPropagation()
+      pick.addEventListener('click', function (e) {
+        e.preventDefault()
+        e.stopPropagation()
 
-      var target = e.target;
-      if (pick.contains(target)) {
-        var lang = target.getAttribute('data-lang')
+        var target = e.target;
+        if (pick.contains(target)) {
+          var lang = target.getAttribute('data-lang')
 
-        if (window.sessionStorage) {
-          window.sessionStorage.setItem('lang', lang)
-        }
+          if (window.localStorage) {
+            window.localStorage.setItem('lang', lang)
+          }
 
-        location.href = target.href
-      }
+          location.href = target.href
+        }
+      })
     })
   }
+
   initPickLang()
 
   /**
    *  Search
    */
-  function initSearch() {
+  function initSearch () {
     var form = document.querySelector('.search-form')
     var inputElements = document.querySelectorAll('.search-input')
 

From 6e72a2429e26b48159933a2415c29451f1c25c3d Mon Sep 17 00:00:00 2001
From: Yun Dong <yundong.me@gmail.com>
Date: Wed, 1 Mar 2017 16:37:43 +0800
Subject: [PATCH 2/4] * [doc] add language selector on the header.

---
 doc/source/cn/references/modules/index.md     | 31 +++++++-----------
 doc/source/references/modules/index.md        | 31 +++++++-----------
 doc/themes/weex/layout/_partial/header.ejs    | 16 ++++++++++
 .../weex/layout/_partial/search-form.ejs      |  2 +-
 doc/themes/weex/layout/_partial/sidebar.ejs   |  2 +-
 doc/themes/weex/source/css/media-queries.scss |  3 ++
 .../weex/source/css/partial/footer.scss       |  1 +
 .../weex/source/css/partial/header.scss       | 32 ++++++++++++++++---
 .../weex/source/css/partial/search-form.scss  |  3 --
 .../weex/source/css/partial/sidebar.scss      |  1 +
 doc/themes/weex/source/js/common.js           | 28 +++++++++-------
 11 files changed, 89 insertions(+), 61 deletions(-)

diff --git a/doc/source/cn/references/modules/index.md b/doc/source/cn/references/modules/index.md
index 8171de2b82..543b9d21f2 100644
--- a/doc/source/cn/references/modules/index.md
+++ b/doc/source/cn/references/modules/index.md
@@ -8,23 +8,14 @@ version: 2.1
 
 # 内建模块
 
-## 如何使用
-
-你可以简单的通过类似 `weex.requireModule('name')` 这样的语法获取一个模块的 API，比如：
-
-```html
-<script>
-  const modal = weex.requireModule('modal')
-
-  module.exports = {
-    data: {},
-    methods: {
-      toast: function () {
-        modal.toast({
-          message: 'props: ' + event.data.join(', ')
-        })
-      }
-    }
-  }
-</script>
-```
+- [animation](./animation.html)
+- [WebSocket](./websocket.html)
+- [picker](./picker.html)
+- [clipboard](./clipboard.html)
+- [dom](./dom.html)
+- [modal](./modal.html)
+- [navigator](./navigator.html)
+- [storage](./storage.html)
+- [stream](./stream.html)
+- [webview](./webview.html)
+- [globalEvent](./globalevent.html)
diff --git a/doc/source/references/modules/index.md b/doc/source/references/modules/index.md
index ec3b4a028c..444ec818cf 100644
--- a/doc/source/references/modules/index.md
+++ b/doc/source/references/modules/index.md
@@ -7,23 +7,14 @@ version: 2.1
 
 # Built-in Modules
 
-## How to use
-
-You can use a simply way like `requireModule('name')` to access the apis of module. e.g.
-
-```html
-<script>
-  const modal = weex.requireModule('modal')
-
-  module.exports = {
-    data: {},
-    methods: {
-      toast: function () {
-        modal.toast({
-          message: 'props: ' + event.data.join(', ')
-        })
-      }
-    }
-  }
-</script>
-```
\ No newline at end of file
+- [animation](./animation.html)
+- [WebSocket](./websocket.html)
+- [picker](./picker.html)
+- [clipboard](./clipboard.html)
+- [dom](./dom.html)
+- [modal](./modal.html)
+- [navigator](./navigator.html)
+- [storage](./storage.html)
+- [stream](./stream.html)
+- [webview](./webview.html)
+- [globalEvent](./globalevent.html)
diff --git a/doc/themes/weex/layout/_partial/header.ejs b/doc/themes/weex/layout/_partial/header.ejs
index a1d42cdefc..9b2cdb6000 100644
--- a/doc/themes/weex/layout/_partial/header.ejs
+++ b/doc/themes/weex/layout/_partial/header.ejs
@@ -36,6 +36,22 @@
         <li>
           <%- partial('_partial/search-form', {id_name: 'search-input-header'}) %>
         </li>
+        <li>
+          <div class="dropdown select-lang">
+            <a href="javascript:;" class="dropdown-toggle">
+              Language
+              <span class="caret"></span>
+            </a>
+            <ul class="dropdown-menu pick-lang">
+              <li>
+                <a href="<%= pick_lang('en') %>" data-lang="en">English</a>
+              </li>
+              <li>
+                <a href="<%= pick_lang('cn') %>" data-lang="zh-cn">中文</a>
+              </li>
+            </ul>
+          </div>
+        </li>
         <!--<li></li>-->
       </ul>
     </div>
diff --git a/doc/themes/weex/layout/_partial/search-form.ejs b/doc/themes/weex/layout/_partial/search-form.ejs
index 347c3419ca..7331be5bd0 100644
--- a/doc/themes/weex/layout/_partial/search-form.ejs
+++ b/doc/themes/weex/layout/_partial/search-form.ejs
@@ -1,6 +1,6 @@
 <div class="search">
   <form id="search-form" class="search-form"> <!-- 搜索框相关 -->
-    <input type="text" id="<%= id_name %>" name="q" results="0" placeholder="search..." class="form-control search-input" autocomplete="off" autocorrect="off"/>
+    <input type="text" id="<%= id_name %>" name="q" results="0" class="form-control search-input" autocomplete="off" autocorrect="off"/>
     <span class="iconfont icon-search"></span>
   </form>
   <div class="results-panel">
diff --git a/doc/themes/weex/layout/_partial/sidebar.ejs b/doc/themes/weex/layout/_partial/sidebar.ejs
index a6c0968510..228767104e 100644
--- a/doc/themes/weex/layout/_partial/sidebar.ejs
+++ b/doc/themes/weex/layout/_partial/sidebar.ejs
@@ -19,7 +19,7 @@
           </a>
         </li>
         <li>
-          <a href="<%= url_for_lang('faq') %>">
+          <a href="<%= url_for_lang('faq.html') %>">
             <%= _p('menu.faq') %>
           </a>
         </li>
diff --git a/doc/themes/weex/source/css/media-queries.scss b/doc/themes/weex/source/css/media-queries.scss
index 6aa9a790e4..f461e84749 100644
--- a/doc/themes/weex/source/css/media-queries.scss
+++ b/doc/themes/weex/source/css/media-queries.scss
@@ -31,6 +31,9 @@
 
   #footer {
     padding: 0 20px;
+    .select-lang {
+      display: block;
+    }
   }
 
   /***********************************************
diff --git a/doc/themes/weex/source/css/partial/footer.scss b/doc/themes/weex/source/css/partial/footer.scss
index 959d3c5029..3c4d976777 100644
--- a/doc/themes/weex/source/css/partial/footer.scss
+++ b/doc/themes/weex/source/css/partial/footer.scss
@@ -18,6 +18,7 @@
   }
 
   .select-lang {
+    display: none;
     width: 105px;
     height: 25px;
     line-height: 25px;
diff --git a/doc/themes/weex/source/css/partial/header.scss b/doc/themes/weex/source/css/partial/header.scss
index 85d8a29fba..f10940457c 100644
--- a/doc/themes/weex/source/css/partial/header.scss
+++ b/doc/themes/weex/source/css/partial/header.scss
@@ -79,12 +79,17 @@
   }
 
   .info li {
-    margin-left: 50px;
+    margin-left: 40px;
   }
 
-  .tools li {
-    position: relative;
-    margin-left: 4em;
+  .tools {
+    > li {
+      margin-left: 30px;
+      position: relative;
+    }
+    .search-form {
+      width: 120px;
+    }
   }
 
   .dropdown {
@@ -101,4 +106,23 @@
       }
     }
   }
+
+  .select-lang {
+    width: 90px;
+  }
+
+  .select-lang .dropdown-toggle {
+    color: #00293D;
+  }
+
+  .select-lang .dropdown-menu {
+    width: 105px;
+    left: 0;
+  }
+
+  .caret {
+    display: inline-block;
+    margin-left: 2px;
+    @include triangle-down($border-gray, 4px);
+  }
 }
\ No newline at end of file
diff --git a/doc/themes/weex/source/css/partial/search-form.scss b/doc/themes/weex/source/css/partial/search-form.scss
index 0bed6df124..1f18e6cd26 100644
--- a/doc/themes/weex/source/css/partial/search-form.scss
+++ b/doc/themes/weex/source/css/partial/search-form.scss
@@ -25,9 +25,6 @@
     }
   }
 
-  /*.search-label {
-    display: block;
-  }*/
   .icon-search {
     position: absolute;
     font-size: 14px;
diff --git a/doc/themes/weex/source/css/partial/sidebar.scss b/doc/themes/weex/source/css/partial/sidebar.scss
index aba94e404a..6e681b106a 100644
--- a/doc/themes/weex/source/css/partial/sidebar.scss
+++ b/doc/themes/weex/source/css/partial/sidebar.scss
@@ -64,6 +64,7 @@
 
   .summary {
     display: block;
+    margin-top: 20px;
   }
 
   .results-panel {
diff --git a/doc/themes/weex/source/js/common.js b/doc/themes/weex/source/js/common.js
index 70dc2dc58d..d4177dd406 100644
--- a/doc/themes/weex/source/js/common.js
+++ b/doc/themes/weex/source/js/common.js
@@ -77,23 +77,27 @@
    */
   function initPickLang () {
     document.addEventListener('DOMContentLoaded', function (e) {
-      var pick = document.querySelector('.pick-lang')
+      var pickers = document.querySelectorAll('.pick-lang')
       var elements = document.querySelectorAll('.pick-lang a')
+      var pickersArr = Array.prototype.slice.call(pickers)
 
-      pick.addEventListener('click', function (e) {
-        e.preventDefault()
-        e.stopPropagation()
+      pickersArr.forEach(function (picker) {
+        picker.addEventListener('click', function (e) {
+          e.preventDefault()
+          e.stopPropagation()
 
-        var target = e.target;
-        if (pick.contains(target)) {
-          var lang = target.getAttribute('data-lang')
+          var target = e.target;
 
-          if (window.localStorage) {
-            window.localStorage.setItem('lang', lang)
-          }
+          if (picker.contains(target)) {
+            var lang = target.getAttribute('data-lang')
 
-          location.href = target.href
-        }
+            if (window.localStorage) {
+              window.localStorage.setItem('lang', lang)
+            }
+
+            location.href = target.href
+          }
+        })
       })
     })
   }

From 16ba148532739ccfb9373763a32961706c225d74 Mon Sep 17 00:00:00 2001
From: Yun Dong <yundong.me@gmail.com>
Date: Thu, 2 Mar 2017 00:45:55 +0800
Subject: [PATCH 3/4] * [doc] Update weex-vue-render.js

---
 doc/themes/weex/source/js/example.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/doc/themes/weex/source/js/example.js b/doc/themes/weex/source/js/example.js
index e87215e875..43012c4d45 100644
--- a/doc/themes/weex/source/js/example.js
+++ b/doc/themes/weex/source/js/example.js
@@ -16,7 +16,7 @@
                 '}' +
               '</style>' +
               '<script src="https://unpkg.com/vue/dist/vue.runtime.js"></script>' +
-              '<script src="https://unpkg.com/weex-vue-render/index.js"></script>' +
+              '<script src="https://unpkg.com/weex-vue-render@0.10.0/dist/index.min.js"></script>' +
             '</head>' +
             '<body>' +
               '<div id="root"></div>' +

From 2c47e81ce10f9cd92f21e4f738f0c12c7314a243 Mon Sep 17 00:00:00 2001
From: Yun Dong <yundong.me@gmail.com>
Date: Thu, 2 Mar 2017 11:11:22 +0800
Subject: [PATCH 4/4] * [doc] Migrate examples to dotwe.

---
 doc/source/cn/references/components/a.md         | 8 ++++----
 doc/source/cn/references/components/cell.md      | 2 +-
 doc/source/cn/references/components/div.md       | 2 +-
 doc/source/cn/references/components/image.md     | 2 +-
 doc/source/cn/references/components/indicator.md | 2 +-
 doc/source/cn/references/components/input.md     | 2 +-
 doc/source/cn/references/components/list.md      | 2 +-
 doc/source/cn/references/components/loading.md   | 2 ++
 doc/source/cn/references/components/refresh.md   | 2 +-
 doc/source/cn/references/components/scroller.md  | 2 +-
 doc/source/cn/references/components/slider.md    | 2 +-
 doc/source/cn/references/components/switch.md    | 2 +-
 doc/source/cn/references/components/text.md      | 2 +-
 doc/source/cn/references/components/textarea.md  | 2 +-
 doc/source/cn/references/components/video.md     | 2 +-
 doc/source/cn/references/components/web.md       | 2 +-
 doc/source/cn/references/modules/animation.md    | 2 +-
 doc/source/cn/references/modules/clipboard.md    | 2 +-
 doc/source/cn/references/modules/dom.md          | 4 ++--
 doc/source/cn/references/modules/modal.md        | 2 +-
 doc/source/cn/references/modules/navigator.md    | 2 +-
 doc/source/cn/references/modules/storage.md      | 2 +-
 doc/source/cn/references/modules/stream.md       | 2 +-
 doc/source/cn/references/modules/webview.md      | 2 +-
 doc/source/references/components/a.md            | 2 +-
 doc/source/references/components/div.md          | 2 +-
 doc/source/references/components/image.md        | 2 +-
 doc/source/references/components/indicator.md    | 2 +-
 doc/source/references/components/input.md        | 2 +-
 doc/source/references/components/list.md         | 2 +-
 doc/source/references/components/refresh.md      | 2 +-
 doc/source/references/components/scroller.md     | 2 +-
 doc/source/references/components/slider.md       | 2 +-
 doc/source/references/components/switch.md       | 2 +-
 doc/source/references/components/text.md         | 2 +-
 doc/source/references/components/textarea.md     | 2 +-
 doc/source/references/components/video.md        | 2 +-
 doc/source/references/components/web.md          | 2 +-
 doc/source/references/modules/animation.md       | 2 +-
 doc/source/references/modules/clipboard.md       | 2 +-
 doc/source/references/modules/dom.md             | 4 ++--
 doc/source/references/modules/modal.md           | 2 +-
 doc/source/references/modules/navigator.md       | 2 +-
 doc/source/references/modules/storage.md         | 2 +-
 doc/source/references/modules/stream.md          | 2 +-
 doc/source/references/modules/webview.md         | 2 +-
 46 files changed, 52 insertions(+), 50 deletions(-)

diff --git a/doc/source/cn/references/components/a.md b/doc/source/cn/references/components/a.md
index ce2dcf163e..f6fd6105cd 100644
--- a/doc/source/cn/references/components/a.md
+++ b/doc/source/cn/references/components/a.md
@@ -43,7 +43,7 @@ version: 2.1
 
 ## 约束
 
-1. **不能**直接在 `<a>` 中添加文本。
+- **不能**直接在 `<a>` 中添加文本。
   错误示例，“click” 无法被正常渲染。
 
   ```html
@@ -62,9 +62,9 @@ version: 2.1
   </style>
   ```
 
-[体验一下](http://dotwe.org/0a22d65138691a208e3fb1f8f6392b38)
+  [体验一下](http://dotwe.org/0a22d65138691a208e3fb1f8f6392b38)
 
-2. 请不要为 `<a>` 添加 `click` 事件。我们不能确保 `click` 事件和 `href` 跳转的执行顺序。
+- 请不要为 `<a>` 添加 `click` 事件。我们不能确保 `click` 事件和 `href` 跳转的执行顺序。
 
 ## 示例
 
@@ -101,4 +101,4 @@ version: 2.1
 </style>
 ```
 
-[try it](../../../examples/a.html)
+[try it](http://dotwe.org/vue/025db54e37123ab5336a4b848397660f)
diff --git a/doc/source/cn/references/components/cell.md b/doc/source/cn/references/components/cell.md
index f7ecbe41c4..8f90d9cb9a 100644
--- a/doc/source/cn/references/components/cell.md
+++ b/doc/source/cn/references/components/cell.md
@@ -102,4 +102,4 @@ version: 2.1
 </style>
 ```
 
-[try it](../../../examples/list.html)
+[try it](http://dotwe.org/vue/d31c85e7cd2dc54fa098e920a5376c38)
diff --git a/doc/source/cn/references/components/div.md b/doc/source/cn/references/components/div.md
index 2790c2c7cc..79cfae063f 100644
--- a/doc/source/cn/references/components/div.md
+++ b/doc/source/cn/references/components/div.md
@@ -113,4 +113,4 @@ version: 2.1
 </style>
 ```
 
-[try it](../../../examples/div.html)
+[try it](http://dotwe.org/vue/edfbd1806508cb86254b03dc0b8e28ac)
diff --git a/doc/source/cn/references/components/image.md b/doc/source/cn/references/components/image.md
index 47434142a5..1c70f10a89 100644
--- a/doc/source/cn/references/components/image.md
+++ b/doc/source/cn/references/components/image.md
@@ -158,4 +158,4 @@ version: 2.1
 </style>
 ```
 
-[try it](../../../examples/image.html)
+[try it](http://dotwe.org/vue/e2122bc245beafb0348d79bfd1274904)
diff --git a/doc/source/cn/references/components/indicator.md b/doc/source/cn/references/components/indicator.md
index 5425af09c9..7980bb5264 100644
--- a/doc/source/cn/references/components/indicator.md
+++ b/doc/source/cn/references/components/indicator.md
@@ -132,4 +132,4 @@ version: 2.1
 </script>
 ```
 
-[try it](../../../examples/indicator.html)
+[try it](http://dotwe.org/vue/d2a654c4b75f1b4d80336c8a5fe133b9)
diff --git a/doc/source/cn/references/components/input.md b/doc/source/cn/references/components/input.md
index 97d4787378..a73db32592 100644
--- a/doc/source/cn/references/components/input.md
+++ b/doc/source/cn/references/components/input.md
@@ -178,4 +178,4 @@ Weex 内置的 `<input>` 组件用来创建接收用户输入字符的输入组
 </style>
 ```
 
-[try it](../../../examples/input.html)
+[try it](http://dotwe.org/vue/c1b1a5fdcf0937df1d847f8812a7ccb2)
diff --git a/doc/source/cn/references/components/list.md b/doc/source/cn/references/components/list.md
index 453108c68e..2cb0a90787 100644
--- a/doc/source/cn/references/components/list.md
+++ b/doc/source/cn/references/components/list.md
@@ -155,4 +155,4 @@ version: 2.1
 </style>
 ```
 
-[try it](../../../examples/list.html)
+[try it](http://dotwe.org/vue/d31c85e7cd2dc54fa098e920a5376c38)
diff --git a/doc/source/cn/references/components/loading.md b/doc/source/cn/references/components/loading.md
index ca28405ee6..cd630c3f77 100644
--- a/doc/source/cn/references/components/loading.md
+++ b/doc/source/cn/references/components/loading.md
@@ -123,3 +123,5 @@ version: 2.1
   }
 </style>
 ```
+
+[Try it](http://dotwe.org/vue/d5c1b2336a703a6e6e47c303af41ffcd)
\ No newline at end of file
diff --git a/doc/source/cn/references/components/refresh.md b/doc/source/cn/references/components/refresh.md
index 1eba39c5a5..a6eb6fbc58 100644
--- a/doc/source/cn/references/components/refresh.md
+++ b/doc/source/cn/references/components/refresh.md
@@ -120,6 +120,6 @@ version: 2.1
 </style>
 ```
 
-[try it](../../../examples/refresh.html)
+[try it](http://dotwe.org/vue/d3db5f344220a6339de044a5e33c502b)
 
 更多示例可查看 [`<list>`](./list.html)
diff --git a/doc/source/cn/references/components/scroller.md b/doc/source/cn/references/components/scroller.md
index acd49d48e7..4bb9f4b55d 100644
--- a/doc/source/cn/references/components/scroller.md
+++ b/doc/source/cn/references/components/scroller.md
@@ -171,4 +171,4 @@ version: 2.1
 </style>
 ```
 
-[try it](../../../examples/scroller.html)
+[try it](http://dotwe.org/vue/2f22f14fb711d88515e63c3f67bed46a)
diff --git a/doc/source/cn/references/components/slider.md b/doc/source/cn/references/components/slider.md
index 745c66cb83..190e01dc0e 100644
--- a/doc/source/cn/references/components/slider.md
+++ b/doc/source/cn/references/components/slider.md
@@ -102,4 +102,4 @@ version: 2.1
 </script>
 ```
 
-[try it](../../../examples/slider.html)
+[try it](http://dotwe.org/vue/0c43ffd743c90b3bd9f5371062652e60)
diff --git a/doc/source/cn/references/components/switch.md b/doc/source/cn/references/components/switch.md
index 01c61e146d..42b24d9897 100644
--- a/doc/source/cn/references/components/switch.md
+++ b/doc/source/cn/references/components/switch.md
@@ -130,4 +130,4 @@ version: 2.1
 </style>
 ```
 
-[try it](../../../examples/switch.html)
+[try it](http://dotwe.org/vue/06b1d740fb69d04f9ebe9eaf730974d1)
diff --git a/doc/source/cn/references/components/text.md b/doc/source/cn/references/components/text.md
index dfb34d6c75..ac43eeaa46 100644
--- a/doc/source/cn/references/components/text.md
+++ b/doc/source/cn/references/components/text.md
@@ -98,4 +98,4 @@ version: 2.1
 </style>
 ```
 
-[try it](../../../examples/text.html)
+[try it](http://dotwe.org/vue/154e20171d350a081fba7878c53cf7d2)
diff --git a/doc/source/cn/references/components/textarea.md b/doc/source/cn/references/components/textarea.md
index d09956db0c..a5ec4d493e 100644
--- a/doc/source/cn/references/components/textarea.md
+++ b/doc/source/cn/references/components/textarea.md
@@ -159,4 +159,4 @@ version: 2.1
 </style>
 ```
 
-[try it](../../../examples/textarea.html)
+[try it](http://dotwe.org/vue/a1877866e8b91ffa1e6ea9bc66c200fa)
diff --git a/doc/source/cn/references/components/video.md b/doc/source/cn/references/components/video.md
index 54fb715981..eee6eb92de 100644
--- a/doc/source/cn/references/components/video.md
+++ b/doc/source/cn/references/components/video.md
@@ -91,4 +91,4 @@ version: 2.1
 </script>
 ```
 
-[try it](../../../examples/video.html)
+[try it](http://dotwe.org/vue/01d3d27073a471bb234b1a76e130d197)
diff --git a/doc/source/cn/references/components/web.md b/doc/source/cn/references/components/web.md
index 72bf4c0073..fb48aa96aa 100644
--- a/doc/source/cn/references/components/web.md
+++ b/doc/source/cn/references/components/web.md
@@ -151,4 +151,4 @@ version: 2.1
 </style>
 ```
 
-[try it](../../../examples/web.html)
+[try it](http://dotwe.org/vue/154c7fa8ac13e87ff4e7bf9862147d50)
diff --git a/doc/source/cn/references/modules/animation.md b/doc/source/cn/references/modules/animation.md
index 2ae020e535..7e6def6489 100644
--- a/doc/source/cn/references/modules/animation.md
+++ b/doc/source/cn/references/modules/animation.md
@@ -93,4 +93,4 @@ version: 2.1
 </style>
 ```
 
-[try it](../../../examples/animation.html)
+[try it](http://dotwe.org/vue/2d1b61bef061448c1a5a13eac9624410)
diff --git a/doc/source/cn/references/modules/clipboard.md b/doc/source/cn/references/modules/clipboard.md
index 3fc012e66e..300340cd72 100644
--- a/doc/source/cn/references/modules/clipboard.md
+++ b/doc/source/cn/references/modules/clipboard.md
@@ -98,4 +98,4 @@ version: 2.1
 </style>
 ```
 
-[try it](../../../examples/clipboard.html)
+[try it](http://dotwe.org/vue/126d3cfc5533393e28943978b07aa5c1)
diff --git a/doc/source/cn/references/modules/dom.md b/doc/source/cn/references/modules/dom.md
index b7473c21d4..2fa153a103 100644
--- a/doc/source/cn/references/modules/dom.md
+++ b/doc/source/cn/references/modules/dom.md
@@ -120,7 +120,7 @@ version: 2.1
 </style>
 ```
 
-[try it](../../../examples/dom-scroll.html)
+[try it](http://dotwe.org/vue/56e0d256cbb26facd958dbd6424f42b2)
 
 ### getComponentRect(ref, callback) <span class="api-version">v0.9.4+</span>
 
@@ -203,7 +203,7 @@ version: 2.1
 </style>
 ```
 
-[try it](../../../examples/dom-rect.html)
+[try it](http://dotwe.org/vue/87d4ed571de129ab28052b06a5d65fc8)
 
 ## 其他
 
diff --git a/doc/source/cn/references/modules/modal.md b/doc/source/cn/references/modules/modal.md
index bc9d610a96..614d249ad4 100644
--- a/doc/source/cn/references/modules/modal.md
+++ b/doc/source/cn/references/modules/modal.md
@@ -136,4 +136,4 @@ version: 2.1
 </style>
 ```
 
-[try it](../../../examples/modal.html)
+[try it](http://dotwe.org/vue/a7dddfb24edb72be947fc4eec3803f1d)
diff --git a/doc/source/cn/references/modules/navigator.md b/doc/source/cn/references/modules/navigator.md
index fd258b1906..fdfa55dc92 100644
--- a/doc/source/cn/references/modules/navigator.md
+++ b/doc/source/cn/references/modules/navigator.md
@@ -87,4 +87,4 @@ version: 2.1
 </style>
 ```
 
-[try it](../../../examples/navigator.html)
+[try it](http://dotwe.org/vue/5c670b07735ee6d08de5c8eb93f91f11)
diff --git a/doc/source/cn/references/modules/storage.md b/doc/source/cn/references/modules/storage.md
index d344281330..e0c863786c 100644
--- a/doc/source/cn/references/modules/storage.md
+++ b/doc/source/cn/references/modules/storage.md
@@ -176,7 +176,7 @@ version: 2.1
 </style>
 ```
 
-[try it](../../../examples/storage.html)
+[try it](http://dotwe.org/vue/3fdd3e2d1646ca41199d80c7be799858)
 
 ## 其它参考
 
diff --git a/doc/source/cn/references/modules/stream.md b/doc/source/cn/references/modules/stream.md
index d6b20c3a3a..2ec169590c 100644
--- a/doc/source/cn/references/modules/stream.md
+++ b/doc/source/cn/references/modules/stream.md
@@ -121,4 +121,4 @@ version: 2.1
 </style>
 ```
 
-[try it](../../../examples/stream.html)
+[try it](http://dotwe.org/vue/29bbf2d49fc8a204f98240044bbe211a)
diff --git a/doc/source/cn/references/modules/webview.md b/doc/source/cn/references/modules/webview.md
index 9a2e4e6f14..30a1a4292a 100644
--- a/doc/source/cn/references/modules/webview.md
+++ b/doc/source/cn/references/modules/webview.md
@@ -134,4 +134,4 @@ version: 2.1
 </style>
 ```
 
-[try it](../../../examples/web.html)
+[try it](http://dotwe.org/vue/154c7fa8ac13e87ff4e7bf9862147d50)
diff --git a/doc/source/references/components/a.md b/doc/source/references/components/a.md
index 3b94a1e95c..ae436bbb58 100644
--- a/doc/source/references/components/a.md
+++ b/doc/source/references/components/a.md
@@ -68,4 +68,4 @@ We can't guarantee the order of execution between onclick function and href. we
 </style>
 ```
 
-[try it](../../examples/a.html)
+[try it](http://dotwe.org/vue/025db54e37123ab5336a4b848397660f)
diff --git a/doc/source/references/components/div.md b/doc/source/references/components/div.md
index d82ad0d00c..1bcc1626a3 100644
--- a/doc/source/references/components/div.md
+++ b/doc/source/references/components/div.md
@@ -60,5 +60,5 @@ There is no specific attribute for this component.
 </style>
 ```
 
-[try it](../../examples/div.html)
+[try it](http://dotwe.org/vue/edfbd1806508cb86254b03dc0b8e28ac)
 
diff --git a/doc/source/references/components/image.md b/doc/source/references/components/image.md
index 6d8fd3f29d..7cf981476b 100644
--- a/doc/source/references/components/image.md
+++ b/doc/source/references/components/image.md
@@ -102,4 +102,4 @@ This component supports no child components.
 </style>
 ```
 
-[try it](../../examples/image.html)
\ No newline at end of file
+[try it](http://dotwe.org/vue/e2122bc245beafb0348d79bfd1274904)
\ No newline at end of file
diff --git a/doc/source/references/components/indicator.md b/doc/source/references/components/indicator.md
index 9093656e14..29f44545ca 100644
--- a/doc/source/references/components/indicator.md
+++ b/doc/source/references/components/indicator.md
@@ -118,4 +118,4 @@ There is no specific attribute for this component.
 </script>
 ```
 
-[try it](../../examples/indicator.html)
\ No newline at end of file
+[try it](http://dotwe.org/vue/d2a654c4b75f1b4d80336c8a5fe133b9)
\ No newline at end of file
diff --git a/doc/source/references/components/input.md b/doc/source/references/components/input.md
index 10333516f1..837c86778f 100644
--- a/doc/source/references/components/input.md
+++ b/doc/source/references/components/input.md
@@ -151,4 +151,4 @@ does not support the common-event 'click'. Please listen to the 'input' or '
 </style>
 ```
 
-[try it](../../examples/input.html)
\ No newline at end of file
+[try it](http://dotwe.org/vue/c1b1a5fdcf0937df1d847f8812a7ccb2)
\ No newline at end of file
diff --git a/doc/source/references/components/list.md b/doc/source/references/components/list.md
index 07f50ec3d1..a524c7f94b 100644
--- a/doc/source/references/components/list.md
+++ b/doc/source/references/components/list.md
@@ -170,4 +170,4 @@ For example, a vertical list nested in a vertical list or scroller is not allowe
 </style>
 ```
 
-[try it](../../examples/list.html)
\ No newline at end of file
+[try it](http://dotwe.org/vue/d31c85e7cd2dc54fa098e920a5376c38)
\ No newline at end of file
diff --git a/doc/source/references/components/refresh.md b/doc/source/references/components/refresh.md
index 521e07c906..8aaecbb5b8 100644
--- a/doc/source/references/components/refresh.md
+++ b/doc/source/references/components/refresh.md
@@ -211,4 +211,4 @@ common styles: check out [common styles for components](../common-style.html)
 </style>
 ```
 
-[try it](../../examples/refresh.html)
\ No newline at end of file
+[try it](http://dotwe.org/vue/d3db5f344220a6339de044a5e33c502b)
\ No newline at end of file
diff --git a/doc/source/references/components/scroller.md b/doc/source/references/components/scroller.md
index 1de3721f79..1b659075b7 100644
--- a/doc/source/references/components/scroller.md
+++ b/doc/source/references/components/scroller.md
@@ -145,4 +145,4 @@ For example, a vertical list nested in a vertical list or scroller is not allowe
 </style>
 ```
 
-[try it](../../examples/scroller.html)
\ No newline at end of file
+[try it](http://dotwe.org/vue/2f22f14fb711d88515e63c3f67bed46a)
\ No newline at end of file
diff --git a/doc/source/references/components/slider.md b/doc/source/references/components/slider.md
index e826a2f497..a88ff22bc4 100644
--- a/doc/source/references/components/slider.md
+++ b/doc/source/references/components/slider.md
@@ -88,4 +88,4 @@ It supports all kinds of weex components as its slides, especially the `indicato
 </script>
 ```
 
-[try it](../../examples/slider.html)
\ No newline at end of file
+[try it](http://dotwe.org/vue/0c43ffd743c90b3bd9f5371062652e60)
\ No newline at end of file
diff --git a/doc/source/references/components/switch.md b/doc/source/references/components/switch.md
index 875644168e..8281c5fcc9 100644
--- a/doc/source/references/components/switch.md
+++ b/doc/source/references/components/switch.md
@@ -112,4 +112,4 @@ common styles: check out [common styles for components](../common-style.html)
 </style>
 ```
 
-[try it](../../examples/switch.html)
\ No newline at end of file
+[try it](http://dotwe.org/vue/06b1d740fb69d04f9ebe9eaf730974d1)
\ No newline at end of file
diff --git a/doc/source/references/components/text.md b/doc/source/references/components/text.md
index fc84214768..cfed19b9ed 100644
--- a/doc/source/references/components/text.md
+++ b/doc/source/references/components/text.md
@@ -95,4 +95,4 @@ check out [common events](../common-event.html)
 </style>
 ```
 
-[try it](../../examples/text.html)
\ No newline at end of file
+[try it](http://dotwe.org/vue/154e20171d350a081fba7878c53cf7d2)
\ No newline at end of file
diff --git a/doc/source/references/components/textarea.md b/doc/source/references/components/textarea.md
index 827674c0df..9b995da1c4 100644
--- a/doc/source/references/components/textarea.md
+++ b/doc/source/references/components/textarea.md
@@ -137,4 +137,4 @@ This component supports no child components.
 </style>
 ```
 
-[try it](../../examples/textarea.html)
\ No newline at end of file
+[try it](http://dotwe.org/vue/a1877866e8b91ffa1e6ea9bc66c200fa)
\ No newline at end of file
diff --git a/doc/source/references/components/video.md b/doc/source/references/components/video.md
index 9d13989705..d73c6165d3 100644
--- a/doc/source/references/components/video.md
+++ b/doc/source/references/components/video.md
@@ -84,4 +84,4 @@ common styles: check out [common styles for components](../common-style.html)
 </script>
 ```
 
-[try it](../../examples/video.html)
\ No newline at end of file
+[try it](http://dotwe.org/vue/01d3d27073a471bb234b1a76e130d197)
\ No newline at end of file
diff --git a/doc/source/references/components/web.md b/doc/source/references/components/web.md
index 7d2aa3987d..b96097de89 100644
--- a/doc/source/references/components/web.md
+++ b/doc/source/references/components/web.md
@@ -144,4 +144,4 @@ We use a simple Browser Demo to show how to use web component and webview module
 </style>
 ```
 
-[try it](../../examples/web.html)
\ No newline at end of file
+[try it](http://dotwe.org/vue/154c7fa8ac13e87ff4e7bf9862147d50)
\ No newline at end of file
diff --git a/doc/source/references/modules/animation.md b/doc/source/references/modules/animation.md
index a456f12b6c..4a9b7ec8b6 100644
--- a/doc/source/references/modules/animation.md
+++ b/doc/source/references/modules/animation.md
@@ -103,4 +103,4 @@ properties of `transform`:
 </style>
 ```
 
-[try it](../../examples/animation.html)
\ No newline at end of file
+[try it](http://dotwe.org/vue/2d1b61bef061448c1a5a13eac9624410)
\ No newline at end of file
diff --git a/doc/source/references/modules/clipboard.md b/doc/source/references/modules/clipboard.md
index db582b0be1..5728cc4cae 100644
--- a/doc/source/references/modules/clipboard.md
+++ b/doc/source/references/modules/clipboard.md
@@ -95,4 +95,4 @@ sets the text to clipboard, having the same effect as copying manually.
 </style>
 ```
 
-[try it](../../examples/clipboard.html)
\ No newline at end of file
+[try it](http://dotwe.org/vue/126d3cfc5533393e28943978b07aa5c1)
\ No newline at end of file
diff --git a/doc/source/references/modules/dom.md b/doc/source/references/modules/dom.md
index bfd80e05dd..cd5651ed32 100644
--- a/doc/source/references/modules/dom.md
+++ b/doc/source/references/modules/dom.md
@@ -114,7 +114,7 @@ Scroll the page to the specified node. This API should only be used on the eleme
 </style>
 ```
 
-[try it](../../examples/dom-scroll.html)
+[try it](http://dotwe.org/vue/56e0d256cbb26facd958dbd6424f42b2)
 
 ### getComponentRect(ref,callback) <span class="api-version">v0.9.4+</span>
 
@@ -201,4 +201,4 @@ Example Useage:
 </style>
 ```
 
-[try it](../../examples/dom-rect.html)
\ No newline at end of file
+[try it](http://dotwe.org/vue/87d4ed571de129ab28052b06a5d65fc8)
\ No newline at end of file
diff --git a/doc/source/references/modules/modal.md b/doc/source/references/modules/modal.md
index ea609829b4..32ffab6c34 100644
--- a/doc/source/references/modules/modal.md
+++ b/doc/source/references/modules/modal.md
@@ -141,4 +141,4 @@ When a prompt box pops up, the user will have to click either confirm or cancel
 </style>
 ```
 
-[try it](../../examples/modal.html)
\ No newline at end of file
+[try it](http://dotwe.org/vue/a7dddfb24edb72be947fc4eec3803f1d)
\ No newline at end of file
diff --git a/doc/source/references/modules/navigator.md b/doc/source/references/modules/navigator.md
index b33dd0cc56..e3ce51ad75 100644
--- a/doc/source/references/modules/navigator.md
+++ b/doc/source/references/modules/navigator.md
@@ -86,4 +86,4 @@ pop a weex page onto the navigator stack, you can specify whether apply animatio
 </style>
 ```
 
-[try it](../../examples/navigator.html)
\ No newline at end of file
+[try it](http://dotwe.org/vue/5c670b07735ee6d08de5c8eb93f91f11)
\ No newline at end of file
diff --git a/doc/source/references/modules/storage.md b/doc/source/references/modules/storage.md
index b7bcf4333a..faac53ca6d 100644
--- a/doc/source/references/modules/storage.md
+++ b/doc/source/references/modules/storage.md
@@ -169,4 +169,4 @@ Returns an array that contains all keys stored in Storage object.
 </style>
 ```
 
-[try it](../../examples/storage.html)
\ No newline at end of file
+[try it](http://dotwe.org/vue/3fdd3e2d1646ca41199d80c7be799858)
\ No newline at end of file
diff --git a/doc/source/references/modules/stream.md b/doc/source/references/modules/stream.md
index 09abb3bbc7..986ccdb5b9 100644
--- a/doc/source/references/modules/stream.md
+++ b/doc/source/references/modules/stream.md
@@ -128,4 +128,4 @@ Start a network request, use two callbacks to receive server's response data.
 </style>
 ```
 
-[try it](../../examples/stream.html)
\ No newline at end of file
+[try it](http://dotwe.org/vue/29bbf2d49fc8a204f98240044bbe211a)
\ No newline at end of file
diff --git a/doc/source/references/modules/webview.md b/doc/source/references/modules/webview.md
index d5dfbddcd3..1ca1b5e9c8 100644
--- a/doc/source/references/modules/webview.md
+++ b/doc/source/references/modules/webview.md
@@ -152,4 +152,4 @@ webview.reload(webElement.ref);
 </style>
 ```
 
-[try it](../../examples/web.html)
\ No newline at end of file
+[try it](http://dotwe.org/vue/154c7fa8ac13e87ff4e7bf9862147d50)
\ No newline at end of file