You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@weex.apache.org by ha...@apache.org on 2017/10/13 13:04:01 UTC

[06/51] [abbrv] incubator-weex-site git commit: rearrangement the structure of the document

http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/32a097bf/source/references/components/list.md
----------------------------------------------------------------------
diff --git a/source/references/components/list.md b/source/references/components/list.md
index 0a0a174..deffbaa 100644
--- a/source/references/components/list.md
+++ b/source/references/components/list.md
@@ -1,7 +1,8 @@
 ---
 title: <list>
 type: references
-order: 2.5
+group: Build-in Components
+order: 8.06
 version: 2.1
 ---
 
@@ -172,4 +173,4 @@ For example, a vertical list nested in a vertical list or scroller is not allowe
 </style>
 ```
 
-[try it](http://dotwe.org/vue/d31c85e7cd2dc54fa098e920a5376c38)
\ No newline at end of file
+[try it](http://dotwe.org/vue/d31c85e7cd2dc54fa098e920a5376c38)

http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/32a097bf/source/references/components/refresh.md
----------------------------------------------------------------------
diff --git a/source/references/components/refresh.md b/source/references/components/refresh.md
index ed3ef0a..e3f7526 100644
--- a/source/references/components/refresh.md
+++ b/source/references/components/refresh.md
@@ -1,7 +1,8 @@
 ---
 title: <refresh> & <loading>
 type: references
-order: 2.7
+group: Build-in Components
+order: 8.08
 version: 2.1
 ---
 
@@ -138,7 +139,7 @@ common styles: check out [common styles for components](../common-style.html)
  ```
   dy: the differencen between two scroll actions
   pullingDistance: the distance of pulling
-  viewHeight: the height of refreshView 
+  viewHeight: the height of refreshView
   type: "pullingdown" constant string type for this event
  ```
 
@@ -218,4 +219,4 @@ common styles: check out [common styles for components](../common-style.html)
 </style>
 ```
 
-[try it](http://dotwe.org/vue/d3db5f344220a6339de044a5e33c502b)
\ No newline at end of file
+[try it](http://dotwe.org/vue/d3db5f344220a6339de044a5e33c502b)

http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/32a097bf/source/references/components/scroller.md
----------------------------------------------------------------------
diff --git a/source/references/components/scroller.md b/source/references/components/scroller.md
index 4218757..5c9f637 100644
--- a/source/references/components/scroller.md
+++ b/source/references/components/scroller.md
@@ -1,7 +1,8 @@
 ---
 title: <scroller>
 type: references
-order: 2.8
+group: Build-in Components
+order: 8.09
 version: 2.1
 ---
 
@@ -19,8 +20,8 @@ Notes: A <scroller> can be used as a root element or a embed element. The scroll
 Scroller supports all kinds of components, such as div, text, etc.
 And there are two special components that can only be used inside scroller component.
 
-* refresh 0.6.1 used inside list to add pull-down-to-refresh functionality. 
-* loading 0.6.1 used inside list to add pull-up-to-load-more functionality. 
+* refresh 0.6.1 used inside list to add pull-down-to-refresh functionality.
+* loading 0.6.1 used inside list to add pull-up-to-load-more functionality.
 
 
 ## Attributes
@@ -152,4 +153,4 @@ For example, a vertical list nested in a vertical list or scroller is not allowe
 </style>
 ```
 
-[try it](http://dotwe.org/vue/2f22f14fb711d88515e63c3f67bed46a)
\ No newline at end of file
+[try it](http://dotwe.org/vue/2f22f14fb711d88515e63c3f67bed46a)

http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/32a097bf/source/references/components/slider.md
----------------------------------------------------------------------
diff --git a/source/references/components/slider.md b/source/references/components/slider.md
index b7ede27..920a6b8 100644
--- a/source/references/components/slider.md
+++ b/source/references/components/slider.md
@@ -1,7 +1,8 @@
 ---
 title: <slider>
 type: references
-order: 2.9
+group: Build-in Components
+order: 8.13
 version: 2.1
 ---
 
@@ -90,4 +91,4 @@ It supports all kinds of weex components as its slides, especially the `indicato
 </script>
 ```
 
-[try it](http://dotwe.org/vue/0c43ffd743c90b3bd9f5371062652e60)
\ No newline at end of file
+[try it](http://dotwe.org/vue/0c43ffd743c90b3bd9f5371062652e60)

http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/32a097bf/source/references/components/switch.md
----------------------------------------------------------------------
diff --git a/source/references/components/switch.md b/source/references/components/switch.md
index 8281c5f..be44c25 100644
--- a/source/references/components/switch.md
+++ b/source/references/components/switch.md
@@ -1,7 +1,8 @@
 ---
 title: <switch>
 type: references
-order: 2.11
+group: Build-in Components
+order: 8.12
 version: 2.1
 ---
 
@@ -32,7 +33,7 @@ Notes: There are several style properties that you mustn't use on this component
 * padding and padding-xxs
 * border and border-xxs
 
-Notes: If the container of `<switch>` is not set to `align-items:flex-start`, the switch in android will be stretched. 
+Notes: If the container of `<switch>` is not set to `align-items:flex-start`, the switch in android will be stretched.
 
 common styles: check out [common styles for components](../common-style.html)
 
@@ -112,4 +113,4 @@ common styles: check out [common styles for components](../common-style.html)
 </style>
 ```
 
-[try it](http://dotwe.org/vue/06b1d740fb69d04f9ebe9eaf730974d1)
\ No newline at end of file
+[try it](http://dotwe.org/vue/06b1d740fb69d04f9ebe9eaf730974d1)

http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/32a097bf/source/references/components/text.md
----------------------------------------------------------------------
diff --git a/source/references/components/text.md b/source/references/components/text.md
index f0a1bc5..f8417b0 100644
--- a/source/references/components/text.md
+++ b/source/references/components/text.md
@@ -1,7 +1,8 @@
 ---
 title: <text>
 type: references
-order: 2.12
+group: Build-in Components
+order: 8.02
 version: 2.1
 ---
 
@@ -15,7 +16,7 @@ This component supports no child components.
 
 ## Attributes
 
-* value(string): text value of this component. This is equal to the content of 'text'. 
+* value(string): text value of this component. This is equal to the content of 'text'.
 
 ### example
 
@@ -53,7 +54,7 @@ check out [common styles for components](../common-style.html)
 check out [common events](../common-event.html)
 
 * support 'click' event.
-* support 'appear' / 'disappear' event. 
+* support 'appear' / 'disappear' event.
 
 ## iconfont
 
@@ -128,4 +129,4 @@ support `ttf` and `woff` font format to custom your text, call [addRule](../modu
 </style>
 ```
 
-[try it](http://dotwe.org/vue/154e20171d350a081fba7878c53cf7d2)
\ No newline at end of file
+[try it](http://dotwe.org/vue/154e20171d350a081fba7878c53cf7d2)

http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/32a097bf/source/references/components/textarea.md
----------------------------------------------------------------------
diff --git a/source/references/components/textarea.md b/source/references/components/textarea.md
index 9b995da..db5fe63 100644
--- a/source/references/components/textarea.md
+++ b/source/references/components/textarea.md
@@ -1,7 +1,8 @@
 ---
 title: <textarea>
 type: references
-order: 2.13
+group: Build-in Components
+order: 8.11
 version: 2.1
 ---
 
@@ -137,4 +138,4 @@ This component supports no child components.
 </style>
 ```
 
-[try it](http://dotwe.org/vue/a1877866e8b91ffa1e6ea9bc66c200fa)
\ No newline at end of file
+[try it](http://dotwe.org/vue/a1877866e8b91ffa1e6ea9bc66c200fa)

http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/32a097bf/source/references/components/video.md
----------------------------------------------------------------------
diff --git a/source/references/components/video.md b/source/references/components/video.md
index d73c616..9295a12 100644
--- a/source/references/components/video.md
+++ b/source/references/components/video.md
@@ -1,7 +1,8 @@
 ---
 title: <video>
 type: references
-order: 2.14
+group: Build-in Components
+order: 8.15
 version: 2.1
 ---
 
@@ -84,4 +85,4 @@ common styles: check out [common styles for components](../common-style.html)
 </script>
 ```
 
-[try it](http://dotwe.org/vue/01d3d27073a471bb234b1a76e130d197)
\ No newline at end of file
+[try it](http://dotwe.org/vue/01d3d27073a471bb234b1a76e130d197)

http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/32a097bf/source/references/components/waterfall.md
----------------------------------------------------------------------
diff --git a/source/references/components/waterfall.md b/source/references/components/waterfall.md
index 57e1306..dea3742 100644
--- a/source/references/components/waterfall.md
+++ b/source/references/components/waterfall.md
@@ -1,7 +1,8 @@
 ---
 title: <waterfall>
 type: references
-order: 2.5
+group: Build-in Components
+order: 8.17
 version: 2.1
 ---
 
@@ -52,4 +53,4 @@ All subcomponents in waterfall support the scrollToElement API in [dom module](.
 
 ### Example
 
-see [playground waterfall example](http://dotwe.org/vue/7a9195643e9e8da352b0d879cdbe68c0)
\ No newline at end of file
+see [playground waterfall example](http://dotwe.org/vue/7a9195643e9e8da352b0d879cdbe68c0)

http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/32a097bf/source/references/components/web.md
----------------------------------------------------------------------
diff --git a/source/references/components/web.md b/source/references/components/web.md
index 1bac6d6..385f1a6 100644
--- a/source/references/components/web.md
+++ b/source/references/components/web.md
@@ -1,7 +1,8 @@
 ---
 title: <web>
 type: references
-order: 2.15
+group: Build-in Components
+order: 8.16
 version: 2.1
 ---
 
@@ -145,4 +146,4 @@ We use a simple Browser Demo to show how to use web component and webview module
 </style>
 ```
 
-[try it](http://dotwe.org/vue/221ff37113a12d692a7a92a100f20162)
\ No newline at end of file
+[try it](http://dotwe.org/vue/221ff37113a12d692a7a92a100f20162)

http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/32a097bf/source/references/downgrade.md
----------------------------------------------------------------------
diff --git a/source/references/downgrade.md b/source/references/downgrade.md
deleted file mode 100644
index f0271b1..0000000
--- a/source/references/downgrade.md
+++ /dev/null
@@ -1,11 +0,0 @@
----
-title: downgrade 
-type: references
-order: 1.3
-version: 2.1
----
-
-# downgrade 
-
-Weex 2.0 downgrade change to module,please refer to [downgrade](https://www.npmjs.com/package/@weex-project/downgrade)
-

http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/32a097bf/source/references/gesture.md
----------------------------------------------------------------------
diff --git a/source/references/gesture.md b/source/references/gesture.md
deleted file mode 100644
index d93d836..0000000
--- a/source/references/gesture.md
+++ /dev/null
@@ -1,56 +0,0 @@
----
-title: Gesture
-type: references
-order: 1.8
-version: 2.1
-has_chapter_content: true
----
-
-# Gesture
-
-> Experiment Feature
-
-Weex encapsulates native touch events to provide a gesture system. Using gesture is similar to use event in Weex. Just set `on` attributes on a node to listen to gesture.
-
-## Type
-For now, there are four types of gestures:
-
-* **Touch**. Touch gesture is fired when a touch point is placed, moved or removed from the touch surface. Touch gesture is accuracy as it will report every trivial event. As a result, listening to touch gesture may be slow, a great deal of events needs to be processed even a small move happened. There are three types of Touch gesture:
-	* `touchstart` will be fired when a touch point is placed on the touch surface.
-	* `touchmove` will be fired when a touch point is moved along the touch surface.
-	* `touchend` will be fired when a touch point is removed from the touch surface.
-* **Pan**. Pan gesture also report motion of touch point on the touch surface, which is similar to touch gesture. But Pan gesture is sampled and faster than the touch event. As consequence, it is less accuracy than touch gesture. There are also three types of Pan gesture, and the meaning of these types is very close to types of Touch.
-	* `panstart`
-	* `panmove`
-	* `panend`
-* **Horizontal/Vertical Pan** <span class="api-version">v0.10+</span> . Mainly used for cell swipe gestures before conflict resolving system is completed. start/move/end state of the gesture will be passed by `state` property. **Note**: These gestures are in conflict with click event on Android currently.
-  * `horizontalpan`
-  * `verticalpan`
-* **Swipe**. Swipe is fired when user swipe a touch point on the screen. A serial of motion will only trigger one Swipe gesture.
-* **LongPress**. LongPress is fired when a touch point is held for 500 ms or more.
-
-The Touch gesture and Pan is very close to each other, with following features hold:
-
-* **Touch**. Not sampled, accuracy, but slow.
-* **Pan**. Sampled, fast, less accuracy.
-
-Users may choose their gesture according to their situation.
-
-## Properties
-The following properties can be used in gesture callback:
-
-* `direction`. Only exists for **Swipe** gesture. Indicate the direcion of the swipe, choose from `up`, `left`, `bottom`, `right`.
-* `changedTouches`. An array of motion for every touch pointer that has contribute to the current gesture.
-
-### changedTouches
-
-`changedTouches` is an array, with the following properties in its children:
-
-* `identifier`. A unique identifier for a touch pointer.
-* `pageX`. The X coordinate of the touch pointer relative to the left edge of the document.
-* `pageY`. The Y coordinate of the touch pointer relative to the top of the document.
-* `screenX`. The X coordinate of the touch point relative to the left edge of the screen.
-* `screenY`. The Y coordinate of the touch point relative to the top edge of the screen.
-
-## Constrain
-Currently, Weex Android do not support listening to gesture on `scroller`, `list` and `webview`, as it would lead a large amount of event conflicting.

http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/32a097bf/source/references/html5-apis.md
----------------------------------------------------------------------
diff --git a/source/references/html5-apis.md b/source/references/html5-apis.md
deleted file mode 100644
index 8d61076..0000000
--- a/source/references/html5-apis.md
+++ /dev/null
@@ -1,10 +0,0 @@
----
-title: HTML5 APIs 
-type: references
-order: 1.4
-version: 2.1
----
-
-# HTML5 APIs 
-
-[Vue APIs](https://vuejs.org/v2/api/)
\ No newline at end of file

http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/32a097bf/source/references/index.md
----------------------------------------------------------------------
diff --git a/source/references/index.md b/source/references/index.md
index b20a713..6e74848 100644
--- a/source/references/index.md
+++ b/source/references/index.md
@@ -1,8 +1,9 @@
 ---
-title: Common Options
+title: References
 type: references
-order: 1
+order: 0
 version: 2.1
+has_chapter_content: true
 ---
 
 # Common Options

http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/32a097bf/source/references/ios-apis.md
----------------------------------------------------------------------
diff --git a/source/references/ios-apis.md b/source/references/ios-apis.md
index 071644e..6e5daad 100644
--- a/source/references/ios-apis.md
+++ b/source/references/ios-apis.md
@@ -1,7 +1,8 @@
 ---
-title: iOS APIs  
+title: iOS APIs
 type: references
-order: 1.1
+group: API
+order: 2.3
 version: 2.1
 ---
 
@@ -28,7 +29,7 @@ version: 2.1
     *              finished : a Boolean value indicating whether download action has finished.
     */
   - (id<WXImageOperationProtocol>)downloadImageWithURL:(NSString *)url imageFrame:(CGRect)imageFrame userInfo:(NSDictionary *)options completed:(void(^)(UIImage *image,  NSError *error, BOOL finished))completedBlock;
-  @end 
+  @end
   ```
 
 ## Native interacts with JavaScript
@@ -39,7 +40,7 @@ version: 2.1
 
   ```object-c
   /**
-    * @abstract Fire an event to the component and tell Javascript which value has been changed. 
+    * @abstract Fire an event to the component and tell Javascript which value has been changed.
     * @param eventName
     * @param params
     * @param domChanges
@@ -73,4 +74,4 @@ You can use the `setFrame(CGRect)` method to change the size of the Weex contain
 
 Weex in the development stage will add some new features and new methods, but these new features and functions must be upgraded to achieve the SDK, for the application should not be upgraded how to deal with it? You can use the downgrade feature.
 
-Native can be handled by the `onFailed` method in interface `WXSDKInstance`, and if it is an active demoulding error domain is `TemplateErrorType`, and the Native side can jump to the corresponding H5 page. Or otherwise prompted the user’s current environment does not support Weex.
\ No newline at end of file
+Native can be handled by the `onFailed` method in interface `WXSDKInstance`, and if it is an active demoulding error domain is `TemplateErrorType`, and the Native side can jump to the corresponding H5 page. Or otherwise prompted the user’s current environment does not support Weex.

http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/32a097bf/source/references/js-service.md
----------------------------------------------------------------------
diff --git a/source/references/js-service.md b/source/references/js-service.md
new file mode 100644
index 0000000..232f27b
--- /dev/null
+++ b/source/references/js-service.md
@@ -0,0 +1,115 @@
+---
+title: JS Service
+type: references
+group: API
+order: 2.6
+version: 2.1
+---
+
+
+# JS Service
+
+<span class="weex-version">v0.9.5+</span>
+
+JS service and Weex instance are parallel in js runtime. Weex instance lifecycle will invoke JS service lifecycle. Currently provide create, refresh, destroy of lifecycle.
+
+!!!Important: JS Service is very powerful. Please be careful to use.
+
+
+## Register JS Service
+
+### iOS
+```objective-c
+[WeexSDKEngine registerService:@"SERVICE_NAME" withScript: @"SERVICE_JS_CODE" withOptions: @{}];
+```
+
+### Android
+```java
+HashMap<String, String> options = new HashMap<>()
+options.put("k1", "v1")
+String SERVICE_NAME = "SERVICE_NAME"
+String SERVICE_JS_CODE = "SERVICE_JS_CODE"
+boolean result = WXSDKEngine.registerService(SERVICE_NAME, SERVICE_JS_CODE, options)
+```
+
+### Web
+```html
+<!-- Should be loaded after then jsfm -->
+<script src="SERVICE_JS_CODE_URL"></script>
+```
+
+
+
+## Write a JS Service
+```javascript
+// options: native inject options
+// options.serviceName is native options name
+service.register(options.serviceName, {
+  /**
+    * JS Service lifecycle. JS Service `create` will before then each instance lifecycle `create`. The return param `instance` is Weex protected param. This object will return to instance global. Other params will in the `services` at instance.
+    *
+    * @param  {String} id  instance id
+    * @param  {Object} env device environment
+    * @return {Object}
+    */
+  create: function(id, env, config) {
+    return {
+      instance: {
+        InstanceService: function(weex) {
+          var modal = weex.requireModule('modal')
+          return {
+            toast: function(title) {
+              modal.toast({ message: title })
+            }
+          }
+        }
+      },
+      NormalService: function(weex) {
+        var modal = weex.requireModule('modal')
+        return {
+          toast: function(title) {
+            modal.toast({ message: title })
+          }
+        }
+      }
+    }
+  },
+
+  /**
+    * JS Service lifecycle. JS Service `refresh` will before then each instance lifecycle `refresh`. If you want to reset variable or something on instance refresh.
+    *
+    * @param  {String} id  instance id
+    * @param  {Object} env device environment
+    */
+  refresh: function(id, env, config){
+
+  },
+
+  /**
+    * JS Service lifecycle. JS Service `destroy` will before then each instance lifecycle `destroy`. You can deleted variable here. If you doesn't detete variable define in JS Service. The variable will always in the js runtime. It's would be memory leak risk.
+    *
+    * @param  {String} id  instance id
+    * @param  {Object} env device environment
+    * @return {Object}
+    */
+  destroy: function(id, env) {
+
+  }
+})
+```
+
+## Using JS Service (vuejs)
+```html
+<script>
+var _InstanceService = new InstanceService(weex)
+var _NormalService = new service.normalService(weex)
+
+module.exports = {
+  created: fucntion() {
+    // called modal module to toast something
+    _InstanceService.toast('Instance JS Service')
+    _NormalService.toast('Normal JS Service')
+  }
+}
+</script>
+```

http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/32a097bf/source/references/js-service/index.md
----------------------------------------------------------------------
diff --git a/source/references/js-service/index.md b/source/references/js-service/index.md
deleted file mode 100644
index 9414452..0000000
--- a/source/references/js-service/index.md
+++ /dev/null
@@ -1,114 +0,0 @@
----
-title: JS Service
-type: references
-order: 9
-version: 2.1
----
-
-
-# JS Service
-
-<span class="weex-version">v0.9.5+</span>
-
-JS service and Weex instance are parallel in js runtime. Weex instance lifecycle will invoke JS service lifecycle. Currently provide create, refresh, destroy of lifecycle.
-
-!!!Important: JS Service is very powerful. Please be careful to use.
-
-
-## Register JS Service
-
-### iOS
-```objective-c
-[WeexSDKEngine registerService:@"SERVICE_NAME" withScript: @"SERVICE_JS_CODE" withOptions: @{}];
-```
-
-### Android
-```java
-HashMap<String, String> options = new HashMap<>()
-options.put("k1", "v1")
-String SERVICE_NAME = "SERVICE_NAME"
-String SERVICE_JS_CODE = "SERVICE_JS_CODE"
-boolean result = WXSDKEngine.registerService(SERVICE_NAME, SERVICE_JS_CODE, options)
-```
-
-### Web
-```html
-<!-- Should be loaded after then jsfm -->
-<script src="SERVICE_JS_CODE_URL"></script>
-```
-
-
-
-## Write a JS Service
-```javascript
-// options: native inject options
-// options.serviceName is native options name
-service.register(options.serviceName, {
-  /**
-    * JS Service lifecycle. JS Service `create` will before then each instance lifecycle `create`. The return param `instance` is Weex protected param. This object will return to instance global. Other params will in the `services` at instance.
-    *
-    * @param  {String} id  instance id
-    * @param  {Object} env device environment
-    * @return {Object}
-    */
-  create: function(id, env, config) {
-    return {
-      instance: {
-        InstanceService: function(weex) {
-          var modal = weex.requireModule('modal')
-          return {
-            toast: function(title) {
-              modal.toast({ message: title })
-            }
-          }
-        }
-      },
-      NormalService: function(weex) {
-        var modal = weex.requireModule('modal')
-        return {
-          toast: function(title) {
-            modal.toast({ message: title })
-          }
-        }
-      }
-    }
-  },
-
-  /**
-    * JS Service lifecycle. JS Service `refresh` will before then each instance lifecycle `refresh`. If you want to reset variable or something on instance refresh.
-    *
-    * @param  {String} id  instance id
-    * @param  {Object} env device environment
-    */
-  refresh: function(id, env, config){
-
-  },
-
-  /**
-    * JS Service lifecycle. JS Service `destroy` will before then each instance lifecycle `destroy`. You can deleted variable here. If you doesn't detete variable define in JS Service. The variable will always in the js runtime. It's would be memory leak risk.
-    *
-    * @param  {String} id  instance id
-    * @param  {Object} env device environment
-    * @return {Object}
-    */
-  destroy: function(id, env) {
-
-  }
-})
-```
-
-## Using JS Service (vuejs)
-```html
-<script>
-var _InstanceService = new InstanceService(weex)
-var _NormalService = new service.normalService(weex)
-
-module.exports = {
-  created: fucntion() {
-    // called modal module to toast something
-    _InstanceService.toast('Instance JS Service')
-    _NormalService.toast('Normal JS Service')
-  }
-}
-</script>
-```

http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/32a097bf/source/references/js_framework-apis.md
----------------------------------------------------------------------
diff --git a/source/references/js_framework-apis.md b/source/references/js_framework-apis.md
new file mode 100644
index 0000000..4f5a129
--- /dev/null
+++ b/source/references/js_framework-apis.md
@@ -0,0 +1,67 @@
+---
+title: JS Framework APIs
+type: references
+group: API
+order: 2.4
+version: 2.1
+---
+
+# JS Framework APIs
+
+## BroadcastChannel <span class="api-version">v0.9+</span>
+
+`BroadcastChannel` API is the solution for inter-instance communication.
+
+###  Reference
+
++ [BroadcastChannel specification](https://html.spec.whatwg.org/multipage/comms.html#broadcasting-to-other-browsing-contexts).
++ [MessageEvent specification](https://html.spec.whatwg.org/multipage/comms.html#messageevent)
+
+### API
+
++ `postMessage(message)`: Sends the given message to other BroadcastChannel objects set up for this channel.
++ `close`: Closes the BroadcastChannel object, opening it up to garbage collection.
++ `onmessage`: Event handler, the event will be triggered when the instance receive a message.
+
+### Usage
+
+```javascript
+const Stack = new BroadcastChannel('Avengers')
+Stack.onmessage = function (event) {
+  console.log(event.data) // in this case, it's "Hulk Smash !!!"
+}
+
+// in another instance
+const Hulk = new BroadcastChannel('Avengers')
+Hulk.postMessage("Hulk Smash !!!")
+```
+
+Run the code above, Stack can receive the message from Hulk.
+
+### Notice
+
+One thing should be noticed: **The `message` object is not deep cloned.**
+
+See the demo below:
+
+```javascript
+const a = new BroadcastChannel('app')
+const b = new BroadcastChannel('app')
+
+const message = {
+  lists: ['A', 'B']
+}
+
+a.onmessage = function (event) {
+
+  // in this case, event.data is a reference of message
+  console.assert(event.data === message)
+
+}
+
+b.postMessage(message)
+```
+
+In this case, `event.data` is strict equal to `message`.
+
+Compared to the deep clone, this behavior improves efficiency and reduces memory cost. However, developers are not recommended to cache or modify the `event` object when they are using it (All type of event handlers should have this restriction).

http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/32a097bf/source/references/jsfm-apis.md
----------------------------------------------------------------------
diff --git a/source/references/jsfm-apis.md b/source/references/jsfm-apis.md
deleted file mode 100644
index 15f6ee7..0000000
--- a/source/references/jsfm-apis.md
+++ /dev/null
@@ -1,66 +0,0 @@
----
-title: JS Framework APIs 
-type: references
-order: 1.3
-version: 2.1
----
-
-# JS Framework APIs 
-
-## BroadcastChannel <span class="api-version">v0.9+</span>
-
-`BroadcastChannel` API is the solution for inter-instance communication.
-
-###  Reference
-
-+ [BroadcastChannel specification](https://html.spec.whatwg.org/multipage/comms.html#broadcasting-to-other-browsing-contexts).
-+ [MessageEvent specification](https://html.spec.whatwg.org/multipage/comms.html#messageevent)
-
-### API
-
-+ `postMessage(message)`: Sends the given message to other BroadcastChannel objects set up for this channel.
-+ `close`: Closes the BroadcastChannel object, opening it up to garbage collection.
-+ `onmessage`: Event handler, the event will be triggered when the instance receive a message.
-
-### Usage
-
-```javascript
-const Stack = new BroadcastChannel('Avengers')
-Stack.onmessage = function (event) {
-  console.log(event.data) // in this case, it's "Hulk Smash !!!"
-}
-
-// in another instance
-const Hulk = new BroadcastChannel('Avengers')
-Hulk.postMessage("Hulk Smash !!!")
-```
-
-Run the code above, Stack can receive the message from Hulk.
-
-### Notice
-
-One thing should be noticed: **The `message` object is not deep cloned.**
-
-See the demo below:
-
-```javascript
-const a = new BroadcastChannel('app')
-const b = new BroadcastChannel('app')
-
-const message = {
-  lists: ['A', 'B']
-}
-
-a.onmessage = function (event) {
-
-  // in this case, event.data is a reference of message
-  console.assert(event.data === message)
-
-}
-
-b.postMessage(message)
-```
-
-In this case, `event.data` is strict equal to `message`.
-
-Compared to the deep clone, this behavior improves efficiency and reduces memory cost. However, developers are not recommended to cache or modify the `event` object when they are using it (All type of event handlers should have this restriction).

http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/32a097bf/source/references/migration/difference.md
----------------------------------------------------------------------
diff --git a/source/references/migration/difference.md b/source/references/migration/difference.md
deleted file mode 100644
index 9d31738..0000000
--- a/source/references/migration/difference.md
+++ /dev/null
@@ -1,10 +0,0 @@
----
-title: The difference between Weex and Vue   
-type: references
-order: 12.2
-version: 2.1
----
-
-# The difference between Weex and Vue
-
-Work in progresss.
\ No newline at end of file

http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/32a097bf/source/references/migration/index.md
----------------------------------------------------------------------
diff --git a/source/references/migration/index.md b/source/references/migration/index.md
deleted file mode 100644
index 36ac86b..0000000
--- a/source/references/migration/index.md
+++ /dev/null
@@ -1,11 +0,0 @@
----
-title: Migration 
-type: references
-order: 12
-version: 2.1
----
-
-# Migration
-
-- [Migration from Weex](./migration-from-weex.html)
-- [The difference between Weex and Vue](./difference.html)
\ No newline at end of file

http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/32a097bf/source/references/migration/migration-from-weex.md
----------------------------------------------------------------------
diff --git a/source/references/migration/migration-from-weex.md b/source/references/migration/migration-from-weex.md
deleted file mode 100644
index 2d2fad2..0000000
--- a/source/references/migration/migration-from-weex.md
+++ /dev/null
@@ -1,10 +0,0 @@
----
-title: Migration from Weex   
-type: references
-order: 12.1
-version: 2.1
----
-
-# Migration from Weex
-
-Work in progresss.
\ No newline at end of file

http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/32a097bf/source/references/modules/animation.md
----------------------------------------------------------------------
diff --git a/source/references/modules/animation.md b/source/references/modules/animation.md
index 870afb1..b77b06f 100644
--- a/source/references/modules/animation.md
+++ b/source/references/modules/animation.md
@@ -1,7 +1,8 @@
 ---
 title: animation
 type: references
-order: 3.1
+group: Build-in Modules
+order: 9.04
 version: 2.1
 ---
 
@@ -21,13 +22,13 @@ Smooth and meaningful animation is very effective for enhancing the user experie
 
 ##### options
 
-**type:** object   
+**type:** object
 
-**position:** Transition options.    
-- `duration` (number): Specifies the number of milliseconds of animation execution, the default value is `0`, means that no animation will occur.    
-- `delay` (number): Specifies the amount of milliseconds to wait between a change being requested to a property that is to be transitioned and the start of the transition effect. The default value is `0`.   
+**position:** Transition options.
+- `duration` (number): Specifies the number of milliseconds of animation execution, the default value is `0`, means that no animation will occur.
+- `delay` (number): Specifies the amount of milliseconds to wait between a change being requested to a property that is to be transitioned and the start of the transition effect. The default value is `0`.
 -  `needLayout`(boolean):Whether or not the layout animation occurs when animation is executed,default value is `false`
-- `timingFunction` (string): Used to describe how the intermediate values of the styles being affected by a transition effect are calculated, default value is `linear`, the allowed attributes are listed in the following table:    
+- `timingFunction` (string): Used to describe how the intermediate values of the styles being affected by a transition effect are calculated, default value is `linear`, the allowed attributes are listed in the following table:
 
 | name                           | description                              |
 | :----------------------------- | :--------------------------------------- |
@@ -37,7 +38,7 @@ Smooth and meaningful animation is very effective for enhancing the user experie
 | `ease-in-out`                  | Specifies a transition effect with a slow start and end |
 | `cubic-bezier(x1, y1, x2, y2)` | Define your own values in the cubic-bezier function. Possible values are parameter values from 0 to 1. More information about cubic-bezier please visit [cubic-bezier](http://cubic-bezier.com/) and [Bézier curve](https://en.wikipedia.org/wiki/B%C3%A9zier_curve). |
 
-- `styles` (object): Specify the names and values of styles to which a transition effect should be applied. The allowed attributes are listed in the following table:        
+- `styles` (object): Specify the names and values of styles to which a transition effect should be applied. The allowed attributes are listed in the following table:
 
 | name            | description                              | value type            | default value   |
 | :-------------- | :--------------------------------------- | :-------------------- | :-------------- |
@@ -48,7 +49,7 @@ Smooth and meaningful animation is very effective for enhancing the user experie
 | transformOrigin | The povit of transition. The possible values for `x-aris` are `left`/`center`/`right`/length or percent, and possible values of `y-axis` are `top`/`center`/`bottom`/ length or percent | `x-axis y-axis`       | `center center` |
 | transform       | Transform function to be applied to the element. The properties in the following table are supported | object                | none            |
 
-properties of `transform`:    
+properties of `transform`:
 
 | name                            | description                              | value type       | default value |
 | :------------------------------ | :--------------------------------------- | :--------------- | :------------ |

http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/32a097bf/source/references/modules/clipboard.md
----------------------------------------------------------------------
diff --git a/source/references/modules/clipboard.md b/source/references/modules/clipboard.md
index 5728cc4..6572dd1 100644
--- a/source/references/modules/clipboard.md
+++ b/source/references/modules/clipboard.md
@@ -1,7 +1,8 @@
 ---
 title: clipboard
 type: references
-order: 3.2
+group: Build-in Modules
+order: 9.08
 version: 2.1
 ---
 
@@ -95,4 +96,4 @@ sets the text to clipboard, having the same effect as copying manually.
 </style>
 ```
 
-[try it](http://dotwe.org/vue/126d3cfc5533393e28943978b07aa5c1)
\ No newline at end of file
+[try it](http://dotwe.org/vue/126d3cfc5533393e28943978b07aa5c1)

http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/32a097bf/source/references/modules/dom.md
----------------------------------------------------------------------
diff --git a/source/references/modules/dom.md b/source/references/modules/dom.md
index 0209f64..0298b53 100644
--- a/source/references/modules/dom.md
+++ b/source/references/modules/dom.md
@@ -1,7 +1,8 @@
 ---
 title: dom
 type: references
-order: 3.3
+group: Build-in Modules
+order: 9.01
 version: 2.1
 ---
 
@@ -152,15 +153,15 @@ Example Useage:
       <text class="info">Left: {{size.left}}</text>
       <text class="info">Right: {{size.right}}</text>
     </div>
-    
+
     <text class="info btn"  @click='click()'>{{this.tip}}</text>
-      
+
   </div>
-</template> 
+</template>
 
 <script>
   const dom = weex.requireModule('dom')
-  
+
  function round(size) {
       var roundSize = {
         'width': Math.round(size.width),
@@ -194,7 +195,7 @@ Example Useage:
         this.size = round.call(this,option.size);
       })
     },
-    
+
     methods:{
       click:function() {
         if (this.ref === 'viewport') {
@@ -204,14 +205,14 @@ Example Useage:
           this.ref = 'viewport'
           this.tip = "get box rect"
         }
-          
+
          const result = dom.getComponentRect(this.ref, option => {
           console.log('getComponentRect:', option)
           this.size = round.call(this,option.size);
         })
       }
     }
-    
+
   }
 </script>
 
@@ -225,13 +226,13 @@ Example Useage:
     margin-left:170px;
     padding-left:35px;
     border-color: rgb(162, 217, 192);
-    
+
   }
   .btn:active {
     background-color: #8fbc8f;
 		border-color: gray;
   }
-  
+
   .box {
     align-items:center;
     margin-left: 150px;

http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/32a097bf/source/references/modules/globalevent.md
----------------------------------------------------------------------
diff --git a/source/references/modules/globalevent.md b/source/references/modules/globalevent.md
index aa53957..ee673a7 100644
--- a/source/references/modules/globalevent.md
+++ b/source/references/modules/globalevent.md
@@ -1,7 +1,8 @@
 ---
 title: globalEvent
 type: references
-order: 3.10
+group: Build-in Modules
+order: 9.13
 version: 2.1
 ---
 
@@ -14,15 +15,15 @@ version: 2.1
 
 You can register events via `addEventListener`, which can be removed by `removeEventListener` when you do not need to listen for `globalEvent`.
 
-*AUCTION* 
-- Only instance level is not application level . 
+*AUCTION*
+- Only instance level is not application level .
 
 ## How to make your Module support global events
 API development is complete, when the event needs to be sent, the need through the following methods:
 
 ```javascript
 /**
-  * 
+  *
   * @param eventName eventName
   * @param params event params
   */
@@ -60,8 +61,8 @@ register global event.
 
 #### Arguments
 
-* `eventName`*(string)*: The name of the event you want to listen to.  
-* `callback`*(function)*: the callback function after executing this action.  
+* `eventName`*(string)*: The name of the event you want to listen to.
+* `callback`*(function)*: the callback function after executing this action.
 
 #### Example
 
@@ -74,7 +75,7 @@ globalEvent.addEventListener("geolocation", function (e) {
 
 ### removeEventListener(String eventName)
 
-remove global event 
+remove global event
 
 #### Arguments
 

http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/32a097bf/source/references/modules/index.md
----------------------------------------------------------------------
diff --git a/source/references/modules/index.md b/source/references/modules/index.md
deleted file mode 100644
index 444ec81..0000000
--- a/source/references/modules/index.md
+++ /dev/null
@@ -1,20 +0,0 @@
----
-title: Built-in Modules
-type: references
-order: 3
-version: 2.1
----
-
-# Built-in Modules
-
-- [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)

http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/32a097bf/source/references/modules/meta.md
----------------------------------------------------------------------
diff --git a/source/references/modules/meta.md b/source/references/modules/meta.md
index b9160b2..ebb60a6 100644
--- a/source/references/modules/meta.md
+++ b/source/references/modules/meta.md
@@ -1,7 +1,8 @@
 ---
 title: meta
 type: references
-order: 3.12
+group: Build-in Modules
+order: 9.06
 version: 2.1
 ---
 
@@ -42,11 +43,11 @@ import App from './app.vue'
 const meta = weex.requireModule('meta')
 
 // The width of the viewport is set to 640px
-meta.setViewport({  
+meta.setViewport({
   width: 640
 })
 
-App.el = '#root'  
+App.el = '#root'
 new Vue(App)
 ```
 

http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/32a097bf/source/references/modules/modal.md
----------------------------------------------------------------------
diff --git a/source/references/modules/modal.md b/source/references/modules/modal.md
index 5fd034e..fff2c17 100644
--- a/source/references/modules/modal.md
+++ b/source/references/modules/modal.md
@@ -1,44 +1,45 @@
 ---
 title: modal
 type: references
-order: 3.4
+group: Build-in Modules
+order: 9.02
 version: 2.1
 ---
 
-# modal  
+# modal
 
-Weex provides a series of message boxes: `toast`, `alert`, `confirm` and `prompt`.    
+Weex provides a series of message boxes: `toast`, `alert`, `confirm` and `prompt`.
 
-## API    
-### toast(options)   
+## API
+### toast(options)
 
-A toast provides simple feedback about an operation in a small popup. For example, navigating away from an email before you send it triggers a "Draft saved" toast to let you know that you can continue editing later. Toasts automatically disappear after a timeout.    
+A toast provides simple feedback about an operation in a small popup. For example, navigating away from an email before you send it triggers a "Draft saved" toast to let you know that you can continue editing later. Toasts automatically disappear after a timeout.
 
 #### Arguments
 - `options` (object): toast options.
  - `message` (string): the text message that the toast shows.
- - `duration` (number): the duration(seconds) that the toast shows.   
+ - `duration` (number): the duration(seconds) that the toast shows.
    - For Android: If the duration is longer than 3, it will use a system defined variable called **LONG**, otherwise it will use another variable called **SHORT**
    - For iOS: It will show the toast during the specified time.
- 
-### alert(options, callback)    
 
-An alert box is often used if you want to make sure information comes through to the user.    
-When an alert box pops up, the user will have to click "OK" to proceed.    
+### alert(options, callback)
 
-#### Arguments  
+An alert box is often used if you want to make sure information comes through to the user.
+When an alert box pops up, the user will have to click "OK" to proceed.
+
+#### Arguments
 
 - `options` (object): alert box options.
  - `message` (string): the text message that the alert shows.
  - `okTitle` (string): the text of positive button, default is 'OK'.
- - `callback` (function): callback when complete.    
-  This method has a callback function whose arguments will be:    
+ - `callback` (function): callback when complete.
+  This method has a callback function whose arguments will be:
 - `result` (string): the title text of the confirm button that clicked by user.
 
-### confirm(options, callback)    
-A confirm box is often used if you want the user to verify or accept something.    
+### confirm(options, callback)
+A confirm box is often used if you want the user to verify or accept something.
 
-When a confirm box pops up, the user will have to click either confirm or cancel button to proceed.    
+When a confirm box pops up, the user will have to click either confirm or cancel button to proceed.
 
 #### Arguments
 - `options` (object): confirm box options.
@@ -47,24 +48,24 @@ When a confirm box pops up, the user will have to click either confirm or cancel
   - `cancelTitle` (string): the title of cancel button, default is 'Cancel'.
 - `callback` (function): callback when complete.
 
-This method has a callback function whose arguments will be:    
-- `result`(string): the title text of the button that clicked by user.    
+This method has a callback function whose arguments will be:
+- `result`(string): the title text of the button that clicked by user.
 
-### prompt(options, callback)    
+### prompt(options, callback)
 
-A prompt box is often used if you want the user to input a value before entering a page.    
-When a prompt box pops up, the user will have to click either confirm or cancel button to proceed after entering an input value.    
+A prompt box is often used if you want the user to input a value before entering a page.
+When a prompt box pops up, the user will have to click either confirm or cancel button to proceed after entering an input value.
 
-#### Arguments    
+#### Arguments
 - `options` (object): some options.
   - `message` (string): the message that the prompt shows.
   - `okTitle` (string): the title text of confirm button, default is 'OK'.
   - `cancelTitle` (string): the title text of cancel button, default is 'Cancel'.
-- `callback` (function): callback when complete.     
-  This method has a callback function whose arguments will be:    
+- `callback` (function): callback when complete.
+  This method has a callback function whose arguments will be:
 - `ret` (object): the argument will be a object, which has attributes `result` and `data`,  like `{ result: 'OK', data: 'hello world' }`
   - `result` (string): the title of the button that clicked by user.
-  - `data` (string): the value of the text that entered by user.     
+  - `data` (string): the value of the text that entered by user.
 
 ## Example
 
@@ -143,4 +144,4 @@ When a prompt box pops up, the user will have to click either confirm or cancel
 </style>
 ```
 
-[try it](http://dotwe.org/vue/a7dddfb24edb72be947fc4eec3803f1d)
\ No newline at end of file
+[try it](http://dotwe.org/vue/a7dddfb24edb72be947fc4eec3803f1d)

http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/32a097bf/source/references/modules/navigator.md
----------------------------------------------------------------------
diff --git a/source/references/modules/navigator.md b/source/references/modules/navigator.md
index e3ce51a..8f28143 100644
--- a/source/references/modules/navigator.md
+++ b/source/references/modules/navigator.md
@@ -1,11 +1,12 @@
 ---
 title: navigator
 type: references
-order: 3.5
+group: Build-in Modules
+order: 9.05
 version: 2.1
 ---
 
-# Navigator 
+# Navigator
 
 <span class="weex-version">v0.6.1+</span>
 
@@ -86,4 +87,4 @@ pop a weex page onto the navigator stack, you can specify whether apply animatio
 </style>
 ```
 
-[try it](http://dotwe.org/vue/5c670b07735ee6d08de5c8eb93f91f11)
\ No newline at end of file
+[try it](http://dotwe.org/vue/5c670b07735ee6d08de5c8eb93f91f11)

http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/32a097bf/source/references/modules/picker.md
----------------------------------------------------------------------
diff --git a/source/references/modules/picker.md b/source/references/modules/picker.md
index 64f0ed6..1ecdedf 100644
--- a/source/references/modules/picker.md
+++ b/source/references/modules/picker.md
@@ -1,7 +1,8 @@
 ---
 title: picker
 type: references
-order: 3.11
+group: Build-in Modules
+order: 9.10
 version: 2.1
 ---
 
@@ -126,4 +127,4 @@ pick time
     background-color: rgba(162, 217, 192, 0.2);
   }
 </style>
-```
\ No newline at end of file
+```

http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/32a097bf/source/references/modules/storage.md
----------------------------------------------------------------------
diff --git a/source/references/modules/storage.md b/source/references/modules/storage.md
index faac53c..10875ff 100644
--- a/source/references/modules/storage.md
+++ b/source/references/modules/storage.md
@@ -1,7 +1,8 @@
 ---
 title: storage
 type: references
-order: 3.6
+group: Build-in Modules
+order: 9.09
 version: 2.1
 ---
 
@@ -23,7 +24,7 @@ or update that key's value if it already exists.
 
 * `key`*(string)*: the name of the key you want to store. "" or null is not allowed.
 * `value`*(string)*: the name of the value you want to store."" or null is not allowed.
-* `callback`*(object)*: the callback function after executing this action.  
+* `callback`*(object)*: the callback function after executing this action.
 
 ### getItem(key, callback)
 
@@ -32,7 +33,7 @@ When passed a key name, will return that key's value.
 #### Arguments
 
 * `key`*(string)*:  the name of the key you want to retrieve the value of."" or null is not allowed.
-* `callback`*(object)*: the callback function after executing this action.  
+* `callback`*(object)*: the callback function after executing this action.
 
 ### removeItem(key, callback)
 
@@ -41,7 +42,7 @@ When passed a key name, will remove that key from the storage.
 #### Arguments
 
 * `key`*(string)*:  the name of the key you want to remove."" or null is not allowed.
-* `callback`*(object)*: the callback function after executing this action.  
+* `callback`*(object)*: the callback function after executing this action.
 
 ##### Example
 
@@ -60,7 +61,7 @@ Returns an integer representing the number of data items stored in the Storage o
 
 #### Arguments
 
-* `callback`*(object)*: the callback function after executing this action.  
+* `callback`*(object)*: the callback function after executing this action.
 
 ### getAllKeys(callback)
 
@@ -68,7 +69,7 @@ Returns an array that contains all keys stored in Storage object.
 
 #### Arguments
 
-* `callback`*(object)*: the callback function after executing this action.  
+* `callback`*(object)*: the callback function after executing this action.
 
 ## Example
 
@@ -169,4 +170,4 @@ Returns an array that contains all keys stored in Storage object.
 </style>
 ```
 
-[try it](http://dotwe.org/vue/3fdd3e2d1646ca41199d80c7be799858)
\ No newline at end of file
+[try it](http://dotwe.org/vue/3fdd3e2d1646ca41199d80c7be799858)

http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/32a097bf/source/references/modules/stream.md
----------------------------------------------------------------------
diff --git a/source/references/modules/stream.md b/source/references/modules/stream.md
index 986ccdb..5c16bd2 100644
--- a/source/references/modules/stream.md
+++ b/source/references/modules/stream.md
@@ -1,7 +1,8 @@
 ---
 title: stream
 type: references
-order: 3.7
+group: Build-in Modules
+order: 9.07
 version: 2.1
 ---
 
@@ -128,4 +129,4 @@ Start a network request, use two callbacks to receive server's response data.
 </style>
 ```
 
-[try it](http://dotwe.org/vue/29bbf2d49fc8a204f98240044bbe211a)
\ No newline at end of file
+[try it](http://dotwe.org/vue/29bbf2d49fc8a204f98240044bbe211a)

http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/32a097bf/source/references/modules/timer.md
----------------------------------------------------------------------
diff --git a/source/references/modules/timer.md b/source/references/modules/timer.md
deleted file mode 100644
index 9e7da63..0000000
--- a/source/references/modules/timer.md
+++ /dev/null
@@ -1,58 +0,0 @@
----
-title: Timer
-type: references
-version: 0.10
----
-
-# Timer
-
-Weex encapsulates a series of APIs in order to start/stop a one-time task or a repeated task at a fixed delay. Please note that this module don't provide an accuracy delay. It provides best-effort delivery, but the actual delay may still exceed the delay user wants if the corresponding thread is busy.
-Actually, this module is made for the polyfill of HTML5 timer APIs, developers **should not** use this module directly unless they know exactly what they are doing.    
-
-## API
-
-All timeout or interval in this module are measured in milliseconds. Also, timeout and interval should be a non-negative **integer**(the max of integer is 0x7FFFFFFF). The behavior of invalid value for timeout or interval is undefined.
-
-### setTimeout(fn, timeout)    
-
-The `setTimeout()` method calls a function after a specified number of milliseconds. Use the `clearTimeout()` method to prevent the function from running. The function is only executed once. If you need to repeat execution, use the `setInterval()` method.    
-
-#### Arguments
-
-- `fn` (function): The function that will be executed
-- `timeout` (number): The number of milliseconds to wait before executing the function    
-
-#### Return value
-
-A Number, representing the fnId value of the timer that is set. Use this value with the `clearTimeout()` method to cancel the timer.   
-
-### setInterval(fn, interval)    
-
-The `setInterval()` method calls a function at specified intervals (in milliseconds), and it will continue calling the function until `clearInterval()` is called. The fnId value returned by `setInterval()` is used as the parameter for the `clearInterval()` method.  
-
-#### Arguments    
-
-- `fn` (function): The function that will be executed
-- `interval` (number): The intervals (in milliseconds) on how often to execute the function
-
-#### Return value    
-
-A Number, representing the fnId value of the timer that is set. Use this value with the `clearInterval()` method to cancel the timer  
-
-### clearTimeout(fnId)    
-
-The `clearTimeout()` method clears a timer set with the `setTimeout()` method. The fnId value returned by `setTimeout()` is used as the parameter for the `clearTimeout()` method. If the function has not already been executed, you will be able to stop the execution by calling the `clearTimeout()` method, otherwise, this method has no influence on the task.    
-
-#### Arguments    
-
-- `fnId` (number): The fnId value of the timer returned by the `setTimeout()` method
-
-### clearInterval(fnId)
-
-The `clearInterval()` method clears a timer set with the `setInterval()` method. The fnId value returned by `setInterval()` is used as the parameter for the `clearInterval()` method.    
-
-#### Arguments
-
-- `fnId` (number): The fnId of the timer returned by the `setInterval()` method    
-
-[Try it](http://dotwe.org/vue/ad564965f1eac5a4bc86946ecff70a0c)

http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/32a097bf/source/references/modules/websocket.md
----------------------------------------------------------------------
diff --git a/source/references/modules/websocket.md b/source/references/modules/websocket.md
index cb36ed1..1c8a445 100644
--- a/source/references/modules/websocket.md
+++ b/source/references/modules/websocket.md
@@ -1,7 +1,8 @@
 ---
 title: WebSocket
 type: references
-order: 3.11
+group: Build-in Modules
+order: 9.12
 version: 2.1
 ---
 

http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/32a097bf/source/references/modules/webview.md
----------------------------------------------------------------------
diff --git a/source/references/modules/webview.md b/source/references/modules/webview.md
index c67dfe7..2314aa0 100644
--- a/source/references/modules/webview.md
+++ b/source/references/modules/webview.md
@@ -1,7 +1,8 @@
 ---
 title: webview
 type: references
-order: 3.9
+group: Build-in Modules
+order: 9.11
 version: 2.1
 ---
 
@@ -153,4 +154,4 @@ webview.reload(webElement.ref);
 </style>
 ```
 
-[try it](http://dotwe.org/vue/221ff37113a12d692a7a92a100f20162)
\ No newline at end of file
+[try it](http://dotwe.org/vue/221ff37113a12d692a7a92a100f20162)

http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/32a097bf/source/references/native-dom-api.md
----------------------------------------------------------------------
diff --git a/source/references/native-dom-api.md b/source/references/native-dom-api.md
deleted file mode 100644
index 37729a2..0000000
--- a/source/references/native-dom-api.md
+++ /dev/null
@@ -1,212 +0,0 @@
----
-title: Native DOM APIs   
-type: references
-order: 6
-version: 2.1
-has_chapter_content: true
----
-
-# Native DOM APIs
-
-Weex in the JS engine, for each page provides a set of Native DOM APIs. This interface is very close to the HTML DOM APIs. Using this interface we can control native rendering logic via JavaScript. And Weex upper layer of Vue 2.0 is based on this interface to adapt.   
-
-In most cases, the JS framework will encapsulate native DOM APIs. That way, the developer does not need to work directly on the Native DOM.   
-
-+ `Document` class: full page document.
-+ `Node` class: the base class of nodes.
-+ `Element` class: element node, inherited from Node, single view unit.
-+ `Comment` class: comment node, inherited from Node, no practical meaning, usually used as placeholders.       
-
-Each Weex page has a `weex.document` object, which is an instance of the Document class and is the starting point for all the following interface calls.
-
-Let's take a look at their usage in detail:    
-
-## `Document` class
-Each `Document` instance will automatically have a `documentElement` property when it is created. This attribute represents the document node. The document node can have a body, which is the main node of the document.   
-
-Note: The document node body only accepts `<div>`, `<list>`, or `<scroller>` three types of element nodes.   
-
-### Constructor
-`new Document(id: string, url: string?)`
-
-### Member method 
-`createElement(tagName: string, props: Object?): Element`   
-
-+ Creates an `Element` instance of a specific type `tagName`, which is an element node. Props can contain attr objects and style objects. Such as `createBody ('div', {style: {backgroundColor: '#ffffff'}})`.     
-
-`createComment(text: string): Comment`  
- 
-+ Create an instance of ·`Comment`, which is a comment node and set a text description.
-
-`createBody(tagName: string, props: Object?): Element`
-
-+ Create a document body node and automatically mount it under `documentElement`.   
-
-`fireEvent(el: Element, type: string, e: Object?, domChanges: Object?)`
-Triggers a particular type of event. When the event modifies the DOM's properties or styles during the generation process, the fourth argument is used to describe the changes, and the parameter format is the same as the format of the `createElement` method above.
-
-`destroy()`   
-
-+ Destroy the current document. Once the document is destroyed, it will no longer work.   
-
-### Read-only member variables
-`id: string`
-
-+ Each `Document` instance has a unique id. This is also the only id that each Weex page has.
-
-`URL: string?`
-
-+ If the current Weex page has a JS bundle URL, the URL will be returned here.  
-
-`body: Element`  
-
-+ The main body of the document, the concept similar to the HTML DOM document.body.  
-
-`documentElement: Element` 
- 
-+ Document node, the concept similar to the HTML DOM document.documentElement.
-+ The relationship between body and documentElement is: documentElement is the parent of the body.   
-
-`getRef(id): Node`
-
-+ Get the node based on the node id.
-
-## `Node` Class  
-### Constructor  
-`new Node()`
-
-### Member method 
-`destroy()`
-
-### Read-only member variables or methods  
-`ref: string`  
-
-+ Each `Node` instance has its own unique ref value in the entire `Document instance.
-
-`nextSibling: Node?`
-
-`previousSibling: Node?`
-
-`parentNode: Node?`
-
-+ The three interfaces are consistent with the definition of HTML DOM.  
-
-`children: Node[]`
-
-+ The node has an array of all child nodes.
-
-`pureChildren: Node[]`    
-
-The node has an array of all the child elements. The difference between it and `children` is that `pureChildren` contains only the `Element` instance and not the `Comment` instance.   
-
-
-## `Element` class, inherited from `Node`   
-### Constructor 
-`new Element(type: string, props: Object?)`
-
-+ Creates an element node of a particular type `type`, and the `props` parameter can contain an `attr` object or a `style` object.   
-
-### DOM tree operation
-`appendChild(node: Node)`
-`insertBefore(node: Node, before: Node?)`
-
-+ The two interfaces are similar to HTML DOM.  
-
-`insertAfter(node: Node, after: Node?)`  
-
-+ Insert a new node before a child node.
-
-`removeChild(node: Node, preserved: boolean?)`
-
-+ Delete the child node node. Parameters `preserved` whether it is immediately removed from memory or temporarily retained.   
-
-`clear()`
-
-+ Clear all child nodes.  
-
-### The DOM property itself operates  
-
-`setAttr(key: string, value: string, silent: boolean?)`
-
-`setStyle(key: string, value: string, silent: boolean?)`
-
-+ In the above two interfaces, when `silent` is true, the node only updates itself, does not pass the command to the client render layer. This parameter is used to handle user events that have changed the node-related properties at the time of occurrence, and will not send commands repeatedly to the client after the Native DOM has changed.     
-
-`addEvent(type: string, handler: Function)`
-
-`removeEvent(type: string)`
-
-`fireEvent(type: string, e: any)`
-
-+ Bind events, unbind events, trigger events.   
-
-#### Component method for a specific component type  
-
-Special: Different component types can have their own unique methods, such as `<web>` components support `refresh` method. You can see the description of each component. In this case, we will generate a specific component type of class, such as `WebElement`, which inherited from `Element`.      
-
-Such as:     
-
->`WebElement` inherited from `Element`           
->Indicates that a webview is embedded in the Wex page
-
->`Refresh ()`: Refreshes the current webview    
-
-
-### Read-only member variables or methods  
-
-`ref`, `nextSibling`, `previousSibling`, `parentNode`  
-
-+ Inherited from `Node`.   
-
-`nodeType: number`
-
-+ The number is always  1.
-
-
-`type: string`
-
-+ Consistent with the `type` in the constructor.  
-
-`attr: Object`
-
-+ The key pair of all the characteristics of the current node. It is recommended to use the `setAttr ()` method to modify, rather than directly modify the object here.   
-
-`style: Object`
-
-+ The value of all the keys of the current node. It is recommended to modify the `setStyle ()` method, rather than directly modify the object here.   
-
-`event: Object`
-
-+ All events of the current node are bound. Each event type corresponds to an event handler method. It is recommended to use the `addEvent () / removeEvent ()` method to modify, rather than directly modify the object here.   
-
-`toJSON(): Object`
-
-+ Returns a JSON object that describes the element's node, such as: `{ref: string, type: string, attr: Object, style: Object, event: Array (string), children: Array}`.
-
-
-## `Comment` class, inherited from `Node`
-
-### Constructor 
-`new Comment(value: string)`  
-
-### Read-only member variables or methods  
-
-`ref`, `nextSibling`, `previousSibling`, `parentNode`
-
-+ Inherited from `Node`.
-
-`nodeType: number`
-
-+ The number is always 8.  
-
-`type: string`  
-
-+ The type  is always `'comment'` 
-
-`value: string`
-
-+ Consistent with the value in the constructor.
-
-`toJSON(): Object` 
-
-+ Returns a JSON object describing the annotation node. For example: `<! - value ->`.

http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/32a097bf/source/references/path.md
----------------------------------------------------------------------
diff --git a/source/references/path.md b/source/references/path.md
deleted file mode 100644
index 20f7322..0000000
--- a/source/references/path.md
+++ /dev/null
@@ -1,37 +0,0 @@
----
-title: Path
-type: references
-order: 1.9
-version: 2.1
-has_chapter_content: true
----
-
-# Path
-
-<span class="weex-version">0.9</span>
-
-This article will cover uri (url) usage in Weex. Including using image/typeface resources, deal with relative uri and how to access local and packaged asset files. 
-
-## Schemes
-
-* Local   
-Weex SDK provide `local` scheme to access resources packaged with application, and of cource, it's not working in the HTML5 runtime.   
-Currently, developers can use this scheme with `image` and text's font file location.    
-  * In iOS, it's always locate file in 'bundle resources'. For example, a `image` component with `local:///app_icon` will load image file named 'app_icon' in bundle resouce, and font file work in the same way.    
-  * In Android, image component will load from 'drawable' resource folder like 'res/drawable-xxx'. But load font file is different, android framework can not load font file from 'res', so SDK will load it from `asserts` folder.
-
-* HTTP/HTTPS   
-It's working in the same way as in web, Weex support these at very beginning.   
-
-* File    
-Use `file` scheme to access local disk file. This scheme has its limitations: You would not hard coded a file url in source page. Because not matter it's running in different platform(iOS, Android) or not, the content will be totally different in another device, which is depend to the specific device.
-So one possible case is getting the file url in runtime dynamically, which you can use it to diaplay a local disk image, or maybe upload it later.
-
-## Relative URI
-
-[Like we do in HTML](https://www.w3.org/TR/html4/types.html#type-uri), weex process 'relative URI' in the same way. The relative URI, which start with `/`,`.`,`..`,`//`, will resolve by the bunle url.
-Means URL start with `/` will resolve to the root folder as bundle js file, `.` and `..` will resolve to current and parent folder, and `//` will resolve to same scheme bundle js have.
-
-## URI Adapter
-
-All the above is the default implementation, developers can extend or override these their own by providing a 'URI Adapter'. Same as the other adapters, Custom adapter should be set before Weex SDK is initializing.
\ No newline at end of file

http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/32a097bf/source/references/platfrom-difference.md
----------------------------------------------------------------------
diff --git a/source/references/platfrom-difference.md b/source/references/platfrom-difference.md
deleted file mode 100644
index 0aadfae..0000000
--- a/source/references/platfrom-difference.md
+++ /dev/null
@@ -1,11 +0,0 @@
----
-title: Platform Differences Between Weex and Web
-type: references
-order: 12
-version: 2.1
-has_chapter_content: true
----
-
-# Platform Differences Between Weex and Web
-
-Work in progresss.

http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/32a097bf/source/references/text-style.md
----------------------------------------------------------------------
diff --git a/source/references/text-style.md b/source/references/text-style.md
deleted file mode 100644
index c8e140f..0000000
--- a/source/references/text-style.md
+++ /dev/null
@@ -1,50 +0,0 @@
----
-title: Text Style
-type: references
-order: 1.6
-version: 2.1
----
-
-# Text Style
-
-Text alike components share some common style rules. The text alike components currently includes [`text`](./components/text.html) and [`input`](./components/input.html).
-
-## Properties
-
-- `color`: &lt;colors&gt; this property set the foreground color of an component's text content.
-- `font-size`: &lt;length&gt; this property specifies the size of the font.
-- `font-style`: &lt;enum&gt; `normal` | `italic`. This property lets you select italic or normal faces within a font-family. Default value is `normal`.
-- `font-weight`<span class="api-version">v0.9+</span>: 
-  * values: `normal`, `bold`, `100`, `200`, `300`, `400`, `500`, `600`, `700`, `800`, `900`
-  * normal is equal to 400, bold equel to 700
-  * default value: `normal`
-  * apply to: `<text>`, `<input>`
-  * ios support showing 9 kind of font-weight. 
-  * android support showing 2 kind of font-weight:400,700, other value will map to 400 or 700
-  * Some standard values like `lighter`, `bolder`, number unit are not supported.
-  * The effect not apply to all elements, just `<text>` and `<input>`. In another way, it's not inherited.
-- `text-decoration`: &lt;enum&gt; `none` | `underline` | `line-through`. This property is used to set the text formatting to underline or line-through. The default value is `none`.
-- `text-align`: &lt;enum&gt; `left` | `center` | `right`. This property describes how inline content like text is aligned in its parent component. The default value is `left`.
-- `font-family`:&lt;string&gt; this property set the font-family of the text. This property **doesn't guarantee** the given font will always be set to the text. If the specified font cannot be found at the device, a typeface fallback will occur and the default typeface will be load. The fallback mechanism may vary in different devices.
-- `text-overflow`:&lt;string&gt; `clip` | `ellipsis`. This property determines how overflowed content that is not displayed is signaled to users. It can be clipped, display an ellipsis.  
-
-The property `color` support multiple fomats of values, contains rgb, rgba, #fff, #ffffff, named-color.
-
-Example:
-
-```css
-.my-class { color: red; }
-.my-class { color: #f00; }
-.my-class { color: #ff0000; }
-.my-class { color: rgb(255, 0, 0); }
-.my-class { color: rgba(255, 0, 0, 0.5); }
-```
-
-## Type of Style Value
-
-- length: number followed by length unit `px`, `px` can be omitted.
-- colors: support multiple formats of values, including rgb (`rgb(255, 0, 0)`), rgba (`rgba(255, 0, 0, 0.5)`), hexadecimal (`#ff0000`), short hexadecimal (`#f00`), named color (`red`).
-- enumerated values: a limited number of string values.
-
-**Note:** [The list of color keywords.](./color-names.html)
-

http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/32a097bf/source/references/unit.md
----------------------------------------------------------------------
diff --git a/source/references/unit.md b/source/references/unit.md
deleted file mode 100644
index 6140557..0000000
--- a/source/references/unit.md
+++ /dev/null
@@ -1,11 +0,0 @@
----
-title: CSS unit   
-type: references
-order: 4
-version: 2.1
-has_chapter_content: true
----
-
-# CSS unit
-
-Work in progresss.
\ No newline at end of file

http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/32a097bf/source/references/vue/difference-of-vuex.md
----------------------------------------------------------------------
diff --git a/source/references/vue/difference-of-vuex.md b/source/references/vue/difference-of-vuex.md
deleted file mode 100644
index 5929769..0000000
--- a/source/references/vue/difference-of-vuex.md
+++ /dev/null
@@ -1,89 +0,0 @@
----
-title: Using Vuex and vue-router   
-type: references
-order: 10.2
-version: 2.1
----
-
-# Using Vuex and vue-router
-
-Vue.js also has many peripheral technology products such as [Vuex](https://github.com/vuejs/vuex) and [vue-router](https://github.com/vuejs/vue-router), etc. Those libraries can also works well in Weex.
-
-> We developed a complete project based on Weex and Vue.js which named [weex-hackernews](https://github.com/weepteam/web-ehackernews). We used Vuex and vue-loader in it, and it works well on both iOS, Android and web.
-
-## Using Vuex
-
-> [Official Vuex documents](https://vuex.vuejs.org/en/)
-
-![Vuex](//vuex.vuejs.org/en/images/vuex.png)
-
-Vuex is a state management pattern + library for Vue.js applications. it's also a library implementation tailored specifically for Vue.js to take advantage of its granular reactivity system for efficient updates. It serves as a centralized store for all the components in an application, with rules ensuring that the state can only be mutated in a predictable fashion.
-
-As a kind of state management library, Vuex is platform-independent, It also can be used in Weex. Read its [official documents](https://vuex.vuejs.org/en/) for more details.
-
-It also integrates with Vue's official [devtools extension](https://github.com/vuejs/vue-devtools) to provide advanced features on web platform, such as zero-config time-travel debugging and state snapshot export / import. (web platform only)
-
-## Using vue-router
-
-> [Official vue-router documents](https://router.vuejs.org/en/)
-
-Creating a Single-page Application with Vue.js + vue-router is dead simple. With Vue.js, you are already composing our application with components. When adding vue-router to the mix, all you need to do is map your components to the routes and let vue-router know where to render them.
-
-However, there are many difference between web and Android or iOS, some features of vue-router are limited in Weex.
-
-### Router mode
-
-vue-router provides three routing modes:
-
-+ `hash`: uses the URL hash for routing. Works in all Vue-supported browsers, including those that do not support HTML5 History API. (**default**)
-+ `history`: requires HTML5 History API and server config. See [HTML5 History Mode](https://router.vuejs.org/en/essentials/history-mode.html).
-+ `abstract`: works in all JavaScript environments, e.g. server-side with Node.js.
-
-You can pass the `mode` parameter when creating a router:
-
-```js
-new Router({
-  mode: 'abstract',
-  // ...
-})
-```
-
-Obviously "hash" mode and "history" mode are only available on the web, and have no effect in Weex. That is, you have to use "abstract" mode in Android and iOS. However, **vue-router will automatically be forced into "abstract" mode if no browser API is present.** so, just don't set the `mode` option, or set it to "abstract".
-
-### Programmatic navigation
-
-vue-router use `<router-link>` to create a navigation link, but in which some of the features based on the DOM events, it doesn't work well in the native environment. In Weex, you must use the [Programmatic Navigation](https://router.vuejs.org/en/essentials/navigation.html) to manage the router.
-
-Here is an basic example using `<router-link>`:
-
-```html
-<!-- Can only be used on the web, it takes no effects on Android or iOS! -->
-<template>
-  <div>
-    <router-link to="profile">
-      <text>Profile</text>
-    </router-link>
-  </div>
-</template>
-```
-
-For native platforms, you have to use the `router.push`:
-
-```html
-<template>
-  <div>
-    <text @click="jump">Profile</text>
-  </div>
-</template>
-
-<script>
-  import router from './path/to/router'
-  export default {
-    methods: {
-      jump () {
-        router.push('profile')
-      }
-    }
-  }
-</script>
-```

http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/32a097bf/source/references/vue/difference-with-web.md
----------------------------------------------------------------------
diff --git a/source/references/vue/difference-with-web.md b/source/references/vue/difference-with-web.md
deleted file mode 100644
index 2af11f9..0000000
--- a/source/references/vue/difference-with-web.md
+++ /dev/null
@@ -1,149 +0,0 @@
----
-title: Difference with Web   
-type: references
-order: 10.1
-version: 2.1
----
-
-# Differences between using Vue in Web and Weex
-
-## Platform Differences
-
-Vue.js was designed for the Web platform at the begining. Although it can be based on Weex to develop native applications, there are still many differences between web and native. See [Platform Differences Between Weex and Web](../ platform-difference.html) for more details.
-
-Due to those differences, Weex doesn't support those features in Vue.js (mostly are DOM-related):
-
-+ Event bubbling and capturing are not supported. Event modifiers, such as `.prevent`,` .capture`, `.stop`,` .self` are meaningless in the native environment.
-+ The keyboard event modifiers, like `.{KeyCode | keyAlias}` is also meaningless. (see [docs in Vue.js](https://vuejs.org/v2/guide/events.html#Key-Modifiers))
-+ No need to call `vm.$mount` manually, the entry component will mount to the root view of the native container by default.
-+ `v-html` and` v-text` directives are not supported.
-
-## Functional differences
-
-### Vue 2.0 Runtime-only build
-
-Vue 2.0 provides two available builds, the standalone build and the runtime-only build. see the [official document](https://vuejs.org/v2/guide/installation.html#Standalone-vs-Runtime-only-Build) for more information.
-
-Weex only required the runtime-only build of Vue 2.0 for better performance and less code size.
-
-The specific differences are:
-
-+ The `template` attribute is not supported when defining a component.
-+ Does not support using `x-templates`.
-+ Does not support using `Vue.compile`.
-
-### Isolate the context of multiple pages
-
-Weex use the "multiple-pages" concept in native, different js bundle will be run in different native views, there context is isolated. Even the `Vue` variable is not the same instance between js bundles. (However, all the js bundle will share the same Weex runtime.)
-
-Based on this feature, the global configurations in `Vue` will only take effect on the current page:
-
-+ `Vue.config`
-+ `Vue.component`
-+ `Vue.directive`
-+ `Vue.filter`
-+ `Vue.mixin`
-+ `Vue.use`
-
-> Note: Those methods are still work, but its effect will be limited to the current page.
-
-## Restrictions in style
-
-CSS is very flexible, has a lot of properties, support a variety of layout modes. This is the advantage of CSS, but also a bottleneck in browser performance optimization.
-
-The style in Weex is parsed by the native renderer, and for the sake of performance and complexity, Weex makes some trade-offs about CSS features to make it better suited to *"best practices"*.
-
-### Single class selector
-
-Weex only supports to use single class name in `<style>`, does not support *type selectors*, *ID selectors*, *attribute selectors*, *adjacent sibling selectors* and the *combinators*.
-
-```CSS
-/* Support single class name selector */
-.one-class {
-  font-size: 36px;
-}
-
-/* Does not support to use combinators between selector */
-.parent > .child {
-  padding-top: 10px;
-}
-.foo + .bar {
-  margin-left: 20px;
-}
-
-/* Does not support attribute selectors. The `v-cloak` directive is not supported */
-[V-cloak] {
-  color: #FF6600;
-}
-```
-
-The restriction is only for the style definition, does not affect the use of class names. You can still use multiple class names on a single tag, such as:
-
-```Html
-<template>
-  <div class="one two three"><div>
-</template>
-```
-
-### Scoped by default
-
-In Weex, For single file components, the styles written in the `<style>` can only be used in the current component.
-
-In order to maintain consistency with Native, it is recommended that you write the style in the `.vue` file with the` scoped` attribute, that is, `<style scoped>`.
-
-### Supported CSS attributes
-
-Weex supports a subset of CSS, and will continue to expand.
-
-Weex supports *box-model* and *flexbox*, as well as other common styles. See [Weex Common Style](../ common-style.html) and [Supported Web Standards](http://weex.apache.org/references/web-standards.html) for more information.
-
-In addition, you should also pay attention to the following points:
-
-+ No need to write style prefix.
-+ Weex doesn't support `display: none;` and therefore doesn't support the `v-show` directive.
-+ In order to optimize the efficiency of CSS parser, Weex doesn't support shorthand attributes, involving the following attributes:
-  + `flex`
-  + `border`, `border-(top|bottom|left|right)`
-  + `margin`
-  + `padding`
-  + `font`
-  + `background`
-
-## Differences in development
-
-Because of the platform difference, you have to compile your source file in two different ways:
-
-+ For the web, you can compile source files in any official way, such as Webpack + vue-loader or Browserify + vueify. and require the [weex-vue-render](https://www.npmjs.com/package/weex-vue-render), which is a group of Weex build-in components.
-+ For Android and iOS, we've provided [weex-loader](https://github.com/weexteam/weex-loader) to compile the `.vue` files. That is, use Webpack + weex-loader to generate the js bundle that is available for the native.
-
-### Use weex-loader
-
-[weex-loader](https://github.com/weexteam/weex-loader) is a loader for Webpack, see the [official document](http://webpack.github.io/docs/using-loaders.html) to learn how to use it.
-
-One more thing should be reminded is that if the *entry file* of your webpack config is a `.vue` file, you also need to pass an additional ` entry` parameter, usually set to `true`.
-
-```Js
-module.exports = {
-  // Add the entry parameter for the .vue file
-  entry: './path/to/App.vue?entry=true',
-
-  // other configurations ...
-
-  module: {
-    loaders: [{
-
-      // matches the .vue file path that contains the entry parameter
-      test: /\.vue(\?^^]+)?$/,
-      loaders: ['weex-loader']
-    }]
-  },
-}
-```
-
-**You don't need to write those additional parameters if you are using `.js` file as entry file.** We recommend using javascript files as the entry file of webpack config.
-
-### Setup native development environments
-
-Since your are using Weex to develop native apps, setup native development environments, both Android and iOS, would be very useful.
-
-See [Integrating Weex to the existing application](../../guide/integrate-to-your-app.html) for more information.

http://git-wip-us.apache.org/repos/asf/incubator-weex-site/blob/32a097bf/source/references/vue/index.md
----------------------------------------------------------------------
diff --git a/source/references/vue/index.md b/source/references/vue/index.md
deleted file mode 100644
index 9caf556..0000000
--- a/source/references/vue/index.md
+++ /dev/null
@@ -1,11 +0,0 @@
----
-title: Vue  
-type: references
-order: 10
-version: 2.1
----
-
-# Vue
-
-- [Difference with Web](./difference-with-web.html)
-- [Using Vuex & vue-router](./difference-of-vuex.html)
\ No newline at end of file