Add weex-thanks and other static resource. (#484)
diff --git a/docs/.vuepress/components/IPhoneImg.vue b/docs/.vuepress/components/IPhoneImg.vue
new file mode 100644
index 0000000..88fff91
--- /dev/null
+++ b/docs/.vuepress/components/IPhoneImg.vue
@@ -0,0 +1,32 @@
+<template>
+ <div class="wrapper">
+ <div class="iPhone-img">
+ <img src="/iPhone.svg" width="323">
+ <img class="img" :src="$withBase(imgSrc)" width="284" height="505">
+ </div>
+ </div>
+</template>
+
+<script>
+export default {
+ props: ['imgSrc']
+}
+</script>
+
+<style>
+.wrapper {
+ position: relative;
+ height: 644px;
+}
+.iPhone-img {
+ position: absolute;
+ left: 50%;
+ top: 0;
+ transform: translateX(-50%);
+}
+.img {
+ position: absolute;
+ left: 17px;
+ top: 81px;
+}
+</style>
diff --git a/docs/.vuepress/components/IndexEn.vue b/docs/.vuepress/components/IndexEn.vue
new file mode 100644
index 0000000..30a74e9
--- /dev/null
+++ b/docs/.vuepress/components/IndexEn.vue
@@ -0,0 +1,13 @@
+<template>
+ <IndexPage lang="en-US" />
+</template>
+
+<script>
+import IndexPage from './IndexPage'
+
+export default {
+ components: {
+ IndexPage
+ }
+}
+</script>
diff --git a/docs/.vuepress/components/IndexPage.vue b/docs/.vuepress/components/IndexPage.vue
new file mode 100644
index 0000000..08b4428
--- /dev/null
+++ b/docs/.vuepress/components/IndexPage.vue
@@ -0,0 +1,223 @@
+<template>
+ <div>
+ <div class="wrap">
+ <div class="banner">
+ <img class="weex-img" src="https://img.alicdn.com/tfs/TB1C_xcqMHqK1RjSZJnXXbNLpXa-974-980.png" width="35%" height="100%" />
+ <div class="weex-desc">
+ <h1>{{weex.desc}}</h1>
+ <a class="quick-start" :href="lang == 'en-US' ? '/guide/introduction.html' : '/zh/guide/introduction.html'">{{weex.getStartedBtn}} <img src="https://img.alicdn.com/tfs/TB1_hg2qCzqK1RjSZFpXXakSXXa-15-12.svg" /></a>
+ </div>
+ </div>
+ <div class="character">
+ <div class="c-desc">
+ <h3>{{weex.charc1Title}}</h3>
+ <div>{{weex.charc1Content}}</div>
+ </div>
+ <img src="https://img.alicdn.com/tfs/TB1M2MYqzTpK1RjSZKPXXa3UpXa-1152-912.png" width="50%" height="100%" />
+ </div>
+
+ <div class="character-o">
+ <img class="pc" src="https://img.alicdn.com/tfs/TB17PA7qAzoK1RjSZFlXXai4VXa-2000-1216.png" width="100%"/>
+ <div class="c-desc pr">
+ <h3>{{weex.charc2Title}}</h3>
+ <div>{{weex.charc2Content}}</div>
+ </div>
+ <img class="mobile" src="https://img.alicdn.com/tfs/TB17PA7qAzoK1RjSZFlXXai4VXa-2000-1216.png" width="100%"/>
+ </div>
+
+ <div class="character">
+ <div class="c-desc">
+ <h3>{{weex.charc3Title}}</h3>
+ <div>{{weex.charc3Content}}</div>
+ </div>
+ <img src="https://img.alicdn.com/tfs/TB1UrQ4qAvoK1RjSZFNXXcxMVXa-808-1180.png" width="50%" height="100%" />
+ </div>
+
+ <div class="character-o">
+ <img class="pc" src="https://img.alicdn.com/tfs/TB1H7I2qxTpK1RjSZFKXXa2wXXa-2000-1216.png" width="100%"/>
+ <div class="c-desc pr">
+ <h3>{{weex.charc4Title}}</h3>
+ <div>{{weex.charc4Content}}</div>
+ </div>
+ <img class="mobile" src="https://img.alicdn.com/tfs/TB1H7I2qxTpK1RjSZFKXXa2wXXa-2000-1216.png" width="100%"/>
+ </div>
+
+ <div class="eagle">
+ <div>{{weex.startText}}</div>
+ <a class="start-btn" :href="lang == 'en-US' ? '/guide/introduction.html' : '/zh/guide/introduction.html'">{{weex.getStartedBtn}}</a>
+ </div>
+ </div>
+ <License v-show="isApache" />
+ </div>
+</template>
+
+<script>
+
+import langZH from '../data/lang-zh';
+import langEN from '../data/lang-en';
+import License from '../sub-components/License.vue';
+
+export default {
+ data() {
+ if (this.lang == 'en-US') {
+ return {
+ weex: langEN.weex,
+ isApache: window.location.href.indexOf('weex.apache.org') !== -1
+ }
+ }
+ return {
+ weex: langZH.weex,
+ isApache: window.location.href.indexOf('weex.apache.org') !== -1
+ }
+ },
+ props: ['lang'],
+
+ components: {
+ License
+ }
+}
+</script>
+
+
+<style scoped>
+.wrap {
+ padding-left: 10%;
+ padding-right: 10%;
+ background: url(https://img.alicdn.com/tfs/TB1hqc7qrvpK1RjSZFqXXcXUVXa-2880-1792.png) 0 0 / 100% no-repeat;
+}
+.banner {
+ display: flex;
+}
+.weex-img {
+ margin-top: 8%;
+}
+.weex-desc {
+ padding-top: 5%;
+ padding-left: 5%;
+}
+.weex-desc > h1 {
+ line-height: 56px;
+ font-size: 40px;
+ color: #FFFFFF;
+}
+.quick-start {
+ display: inline-block;
+ width: 176px;
+ height: 48px;
+ line-height: 46px;
+ box-sizing: border-box;
+ text-align: center;
+ border: 1px solid #fff;
+ border-radius: 2px;
+ color: #fff;
+ font-size: 18px;
+}
+.c-desc {
+ width: 30%;
+}
+.c-desc > h3 {
+ line-height: 40px;
+ font-size: 28px;
+ color: #373D41;
+}
+.c-desc > div {
+ line-height: 24px;
+ font-size: 14px;
+ color: #373D41;
+ line-height: 24px;
+}
+.eagle {
+ height: 500px;
+ background: url(https://img.alicdn.com/tfs/TB1tQQ7qxTpK1RjSZFMXXbG_VXa-604-498.svg) center no-repeat;
+ text-align: center;
+ overflow: hidden;
+}
+.eagle > div {
+ margin-top: 223px;
+ margin-bottom: 28px;
+ line-height: 40px;
+ font-size: 32px;
+ color: #373D41;
+}
+.eagle > .start-btn {
+ display: inline-block;
+ width: 240px;
+ height: 48px;
+ line-height: 48px;
+ background: #00B4FF;
+ border-radius: 2px;
+ color: #fff;
+ font-size: 16px;
+}
+@media screen and (max-width: 1200px) {
+ .weex-desc > h1 {
+ font-size: 24px;
+ line-height: 36px;
+ }
+ .quick-start {
+ width: 146px;
+ height: 38px;
+ line-height: 36px;
+ font-size: 14px;
+ }
+ .c-desc > h3 {
+ font-size: 24px;
+ }
+}
+@media screen and (max-width: 720px) {
+ .weex-desc > h1 {
+ font-size: 14px;
+ line-height: 20px;
+ }
+ .quick-start {
+ width: 80px;
+ height: 26px;
+ line-height: 24px;
+ font-size: 12px;
+ }
+ .quick-start > img {
+ display: none;
+ }
+
+}
+@media screen and (max-width: 820px) {
+ .pc {
+ display: none;
+ }
+ .character, .character-o {
+ text-align: center;
+ }
+ .c-desc {
+ width: 100%;
+ }
+ .c-desc > h3 {
+ margin-top: 30px;
+ font-size: 16px;
+ line-height: 24px;
+ }
+ .c-desc > div {
+ text-align: left;
+ }
+}
+@media screen and (min-width: 820px) {
+ .mobile {
+ display: none;
+ }
+ .character {
+ display: flex;
+ align-items: center;
+ justify-content: space-around;
+ }
+ .character-o {
+ position: relative;
+ }
+ .c-desc.pr {
+ position: absolute;
+ top: 50%;
+ transform: translateY(-50%);
+ right: 50px;
+ }
+}
+
+</style>
+
diff --git a/docs/.vuepress/components/IndexZh.vue b/docs/.vuepress/components/IndexZh.vue
new file mode 100644
index 0000000..3e7fd76
--- /dev/null
+++ b/docs/.vuepress/components/IndexZh.vue
@@ -0,0 +1,13 @@
+<template>
+ <IndexPage lang="zh-CN" />
+</template>
+
+<script>
+import IndexPage from './IndexPage'
+
+export default {
+ components: {
+ IndexPage
+ }
+}
+</script>
diff --git a/docs/.vuepress/components/SourceCode.vue b/docs/.vuepress/components/SourceCode.vue
deleted file mode 100644
index 8063d1c..0000000
--- a/docs/.vuepress/components/SourceCode.vue
+++ /dev/null
@@ -1,114 +0,0 @@
-<template>
- <div class="wrapper">
- <iframe class="iframe"
- ref="iframe"
- :src="url"
- :style="{ height }"
- @load="onLoad"
- frameborder="0"></iframe>
- <div class="controls" v-if="showControls">
- <div class="btn" @click="openURL">
- <span class="btn-text">Open</span>
- </div>
- </div>
- </div>
-</template>
-
-<script>
- const baseURL = 'https://editor.weex.alibaba-inc.com'
- function setParams (url, params) {
- const querys = []
- for (const key in params) {
- if (Object.prototype.hasOwnProperty.call(params, key) && params[key]) {
- querys.push({ name: key, value: params[key] })
- }
- }
- if (url && querys.length) {
- url += ('?' + querys.map(x => `${x.name}=${x.value}`).join('&'))
- }
- return url
- }
- export default {
- props: ['hash', 'file', 'line', 'mode', 'buttons'],
- data () {
- return {
- url: this.createURL(),
- showControls: false,
- height: 'auto'
- }
- },
- created () {
- if (this.line) {
- this.height = this.calculateHeight() + 'px'
- }
- },
- methods: {
- createURL () {
- let url = this.src ? this.src : `${baseURL}/source/${this.hash}`
- const params = []
- if (this.file) {
- url += `/${this.file}`
- }
- return setParams(url, { line: this.line })
- },
- onLoad () {
- // const $iframe = this.$refs.iframe
- if (this.buttons !== 'none') {
- this.showControls = true
- }
- },
- calculateHeight () {
- const lineHeight = 19
- if (this.line) {
- var pair = this.line.split(/\-|\~/i)
- var begin = parseInt(pair[0], 10)
- var end = parseInt(pair[1], 10) || begin
- return (end - begin + 1) * lineHeight + 20
- }
- },
- openURL () {
- try {
- const url = setParams(`${baseURL}/vue/${this.hash}`, {
- file: this.file,
- line: this.line
- })
- window.open(url)
- } catch (e) {}
- }
- }
- }
-</script>
-
-<style scoped>
- .wrapper {
- position: relative;
- width: 100%;
- height: 100%;
- padding: 10px 2%;
- box-sizing: border-box;
- }
- .iframe {
- width: 100%;
- height: auto;
- }
- .controls {
- position: absolute;
- top: 18px;
- right: 3%;
- }
- .controls .btn {
- display: flex;
- justify-content: center;
- align-items: center;
- border: 1px solid #5f5f5f;
- border-radius: 5px;
- background-color: rgba(255,255,255,.1);
- color: #969696;
- cursor: pointer;
- padding: 3px 8px;
- font-size: 13px;
- }
- .controls .btn:hover {
- box-shadow: 0 2px 8px rgba(255, 255, 255, 0.1);
- }
-</style>
diff --git a/docs/.vuepress/data/lang-en.js b/docs/.vuepress/data/lang-en.js
deleted file mode 100644
index 2ad9290..0000000
--- a/docs/.vuepress/data/lang-en.js
+++ /dev/null
@@ -1,36 +0,0 @@
-export default {
- weex: {
- desc: 'Weex is a framework for building performant mobile apps with modern web technology.',
- getStartedBtn: 'Get Started',
- startText: 'Start building your weex app',
- charc1Title: 'High Performance',
- charc1Content:
- 'Weex is using native components and native modules to take advantage of native rendering performance and platform capabilities. Both components and modules are pluggable and extendable.',
- charc2Title: 'Cross Platforms',
- charc2Content:
- 'You can use a single codebase to generate different bundle files to running on both Webs, Android and iOS platforms. Native components and modules have a different implementation on each platform, but they all exposed the same API.',
- charc3Title: 'Front-end Friendly',
- charc3Content:
- 'Weex embraces the existing Web ecosystem, you can use modern front-end technology to develop your mobile apps. Weex supports most commonly used CSS properties and most popular front-end frameworks, such as Vue and Rax, maybe more in the future.',
- charc4Title: 'Large-scale Used in Production',
- charc4Content:
- 'Weex has been large-scale used in many super apps for a long time, served almost billions of people in total. Weex also derived many engineering products and platforms for industry development.'
- },
- info: {
- solutionTitle: 'Solutions',
- demoTitle: 'Demos',
- searchTag: 'Search Tags',
- hotTags: 'Hot Tags',
- searchBtn: 'Search',
- placeholder: 'Select tags or input tags then press the Enter key',
- solutionFavoriteNone:
- "You don't have any favorite solution. Start collecting the first one now!",
- solutionWorksNone: "You don't write any solution. Start writing one now!",
- demoFavoriteNone: "You don't have any favorite demo. Start collecting the first one now!",
- demoWorksNone: "You don't write any demo. Start writing one now!",
- startWriting: 'startWriting',
- noData: 'No Data',
- pv: 'pv',
- favor: 'favor'
- }
-};
diff --git a/docs/.vuepress/data/lang-zh.js b/docs/.vuepress/data/lang-zh.js
deleted file mode 100644
index 49211c6..0000000
--- a/docs/.vuepress/data/lang-zh.js
+++ /dev/null
@@ -1,35 +0,0 @@
-export default {
- weex: {
- desc: 'Weex 是一个可以使用现代化的 Web 技术开发高性能原生应用的框架。',
- getStartedBtn: '快速开始',
- startText: '开始构建你的 weex 应用',
- charc1Title: '高性能',
- charc1Content:
- 'Weex 使用原生组件和原生模块，来最大化利用原生渲染的性能优势以及平台能力，所有的组件和模块都是可插拔、可扩展的。',
- charc2Title: '跨平台',
- charc2Content:
- '你可以使用同一份代码编译成不同目标文件分别在 Web、Android 和 iOS 平台上运行。原生的组件和模块在不同平台中有不同的实现，但是它们都提供了相同的接口。',
- charc3Title: '贴近前端生态',
- charc3Content:
- 'Weex 拥抱已有的 Web 生态，你可以使用现代化的前端技术开发移动应用。 Weex 支持了最常用 CSS 样式以及最流行的前端框架，如 Vue 和 Rax，在未来或许还可以支持更多。',
- charc4Title: '被大规模的使用',
- charc4Content:
- 'Weex 已经在许多超级 App 中大规模使用，一共服务了数亿用户。Weex 还衍生出了各种工程化的产品和平台，以供 工业生产使用。'
- },
- info: {
- solutionTitle: '干货集中营-解决方案',
- demoTitle: '干货集中营-代码案例',
- searchTag: '标签筛选',
- hotTags: '热门标签',
- searchBtn: '筛选',
- palceholder: '请选择标签或者输入关键词后回车',
- solutionFavoriteNone: '你还没有收藏解决方案，赶快点击按钮开始收藏你的第一个解决方案吧~',
- solutionWorksNone: '你还没有编写解决方案，赶快去编写你的第一个解决方案吧~',
- demoFavoriteNone: '你还没有收藏代码案例，赶快点击按钮开始收藏你的第一个代码案例吧~',
- demoWorksNone: '你还没有编写代码案例，赶快去编写你的第一个代码案例吧~',
- startWriting: 'GO-编写去',
- noData: '暂无数据~',
- pv: '浏览',
- favor: '收藏'
- }
-};
diff --git a/docs/.vuepress/public/Android@2x.png b/docs/.vuepress/public/Android@2x.png
new file mode 100644
index 0000000..ceb2a45
--- /dev/null
+++ b/docs/.vuepress/public/Android@2x.png
Binary files differ
diff --git a/docs/.vuepress/public/BroadcastChannel.png b/docs/.vuepress/public/BroadcastChannel.png
new file mode 100644
index 0000000..050e043
--- /dev/null
+++ b/docs/.vuepress/public/BroadcastChannel.png
Binary files differ
diff --git a/docs/.vuepress/public/bubbling-capturing.png b/docs/.vuepress/public/bubbling-capturing.png
new file mode 100644
index 0000000..1a92811
--- /dev/null
+++ b/docs/.vuepress/public/bubbling-capturing.png
Binary files differ
diff --git a/docs/.vuepress/public/css-boxmodel.png b/docs/.vuepress/public/css-boxmodel.png
new file mode 100644
index 0000000..a2063e2
--- /dev/null
+++ b/docs/.vuepress/public/css-boxmodel.png
Binary files differ
diff --git a/docs/.vuepress/public/css-flexbox-align.jpg b/docs/.vuepress/public/css-flexbox-align.jpg
new file mode 100644
index 0000000..8a7f731
--- /dev/null
+++ b/docs/.vuepress/public/css-flexbox-align.jpg
Binary files differ
diff --git a/docs/.vuepress/public/css-flexbox-justify.svg b/docs/.vuepress/public/css-flexbox-justify.svg
new file mode 100644
index 0000000..33e742b
--- /dev/null
+++ b/docs/.vuepress/public/css-flexbox-justify.svg
@@ -0,0 +1,59 @@
+<svg xmlns="http://www.w3.org/2000/svg" width='504' height='270' viewBox="0 0 504 270">
+ <defs>
+ <pattern id='checker' width='20' height='20' patternUnits='userSpaceOnUse'>
+ <rect x='0' y='0' width='10' height='10' fill='#eee' />
+ <rect x='10' y='10' width='10' height='10' fill='#eee' />
+ <rect x='0' y='10' width='10' height='10' fill='#ccc' />
+ <rect x='10' y='0' width='10' height='10' fill='#ccc' />
+ </pattern>
+ </defs>
+ <style>
+ text { font-family: sans-serif; font-weight: bold; font-size: 30px; text-anchor: middle; }
+ rect { stroke-width: 2px; stroke: #888; }
+ g > rect:nth-child(1) { fill: #888 }
+ g > rect:nth-child(2) { fill: #fcc; }
+ g > rect:nth-child(3) { fill: #cfc; }
+ g > rect:nth-child(4) { fill: #ccf; }
+ g > rect:nth-child(5) { fill: transparent; }
+ </style>
+ <g transform="translate(2,2)">
+ <rect x='0' y='0' width='500' height='50' />
+ <rect x='0' y='0' width='100' height='50' />
+ <rect x='100' y='0' width='80' height='50' />
+ <rect x='180' y='0' width='200' height='50' />
+ <rect x='0' y='0' width='500' height='50' />
+ <text x='250' y='38'>flex-start</text>
+ </g>
+ <g transform="translate(2,56)">
+ <rect x='0' y='0' width='500' height='50' />
+ <rect x='120' y='0' width='100' height='50' />
+ <rect x='220' y='0' width='80' height='50' />
+ <rect x='300' y='0' width='200' height='50' />
+ <rect x='0' y='0' width='500' height='50' />
+ <text x='250' y='38'>flex-end</text>
+ </g>
+ <g transform="translate(2,110)">
+ <rect x='0' y='0' width='500' height='50' />
+ <rect x='60' y='0' width='100' height='50' />
+ <rect x='160' y='0' width='80' height='50' />
+ <rect x='240' y='0' width='200' height='50' />
+ <rect x='0' y='0' width='500' height='50' />
+ <text x='250' y='38'>center</text>
+ </g>
+ <g transform="translate(2,164)">
+ <rect x='0' y='0' width='500' height='50' />
+ <rect x='0' y='0' width='100' height='50' />
+ <rect x='160' y='0' width='80' height='50' />
+ <rect x='300' y='0' width='200' height='50' />
+ <rect x='0' y='0' width='500' height='50' />
+ <text x='250' y='38'>space-between</text>
+ </g>
+ <g transform="translate(2,218)">
+ <rect x='0' y='0' width='500' height='50' />
+ <rect x='20' y='0' width='100' height='50' />
+ <rect x='160' y='0' width='80' height='50' />
+ <rect x='280' y='0' width='200' height='50' />
+ <rect x='0' y='0' width='500' height='50' />
+ <text x='250' y='38'>space-around</text>
+ </g>
+</svg>
\ No newline at end of file
diff --git a/docs/.vuepress/public/iOS@2x.png b/docs/.vuepress/public/iOS@2x.png
new file mode 100644
index 0000000..6ef2f96
--- /dev/null
+++ b/docs/.vuepress/public/iOS@2x.png
Binary files differ
diff --git a/docs/.vuepress/public/iPhone.svg b/docs/.vuepress/public/iPhone.svg
new file mode 100644
index 0000000..43d1f16
--- /dev/null
+++ b/docs/.vuepress/public/iPhone.svg
@@ -0,0 +1,30 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 22.0.1, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
+<svg version="1.1" id="图层_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+ viewBox="0 0 435.2 895.2" style="enable-background:new 0 0 435.2 895.2;" xml:space="preserve">
+<style type="text/css">
+ .st0{fill:#66B2FF;}
+ .st1{fill:none;}
+ .st2{fill:#BBDDFF;}
+</style>
+<path class="st0" d="M364.3,895.2H70.9C31.8,895.2,0,863.4,0,824.3V70.8C0,31.7,31.8-0.1,70.9-0.1h293.4c39.1,0,70.9,31.8,70.9,70.9
+ v753.4C435.2,863.3,403.4,895.2,364.3,895.2z M70.9,0.7C32.2,0.7,0.8,32.2,0.8,70.8v753.4c0,38.7,31.5,70.1,70.1,70.1h293.4
+ c38.7,0,70.1-31.5,70.1-70.1V70.8c0-38.7-31.5-70.1-70.1-70.1C364.3,0.7,70.9,0.7,70.9,0.7z"/>
+<path class="st0" d="M406.6,790.9H22.5V108.3h384.1V790.9z M23.2,790.1h382.6V109H23.2V790.1z"/>
+<path class="st1" d="M187.4,55c-2.5,0-4.6,2.1-4.6,4.6s2.1,4.6,4.6,4.6h60.3c2.5,0,4.6-2.1,4.6-4.6s-2.1-4.6-4.6-4.6H187.4z"/>
+<rect x="162.4" y="34.5" class="st1" width="110.4" height="50.1"/>
+<g>
+ <path class="st2" d="M247.6,64.1h-59.9c-2.2,0-4-1.8-4-4v-0.2c0-2.2,1.8-4,4-4h59.9c2.2,0,4,1.8,4,4v0.2
+ C251.6,62.3,249.8,64.1,247.6,64.1z"/>
+ <path class="st0" d="M247.5,64.5h-59.8c-2.5,0-4.5-2-4.5-4.5s2-4.5,4.5-4.5h59.7c2.5,0,4.5,2,4.5,4.5S249.9,64.5,247.5,64.5z
+ M187.7,56.3c-2.1,0-3.7,1.7-3.7,3.7s1.7,3.7,3.7,3.7h59.7c2.1,0,3.7-1.7,3.7-3.7s-1.7-3.7-3.7-3.7H187.7z"/>
+</g>
+<g>
+ <circle class="st2" cx="167.8" cy="60" r="5.5"/>
+ <path class="st0" d="M167.8,65.8c-3.2,0-5.8-2.6-5.8-5.8s2.6-5.8,5.8-5.8s5.8,2.6,5.8,5.8C173.6,63.2,171.1,65.8,167.8,65.8z
+ M167.8,54.9c-2.8,0-5.1,2.3-5.1,5.1s2.3,5.1,5.1,5.1s5.1-2.3,5.1-5.1S170.6,54.9,167.8,54.9z"/>
+</g>
+<ellipse transform="matrix(0.4641 -0.8858 0.8858 0.4641 -623.9302 640.7924)" class="st2" cx="217.6" cy="836" rx="34.2" ry="34.2"/>
+<path class="st0" d="M217.6,870.6c-19.1,0-34.6-15.5-34.6-34.6s15.5-34.6,34.6-34.6s34.6,15.5,34.6,34.6S236.7,870.6,217.6,870.6z
+ M217.6,802.1c-18.7,0-33.9,15.2-33.9,33.9s15.2,33.9,33.9,33.9s33.9-15.2,33.9-33.9S236.3,802.1,217.6,802.1z"/>
+</svg>
diff --git a/docs/.vuepress/public/image-resize-property.png b/docs/.vuepress/public/image-resize-property.png
new file mode 100644
index 0000000..c3b17a2
--- /dev/null
+++ b/docs/.vuepress/public/image-resize-property.png
Binary files differ
diff --git a/docs/.vuepress/public/logo@2x.svg b/docs/.vuepress/public/logo@2x.svg
new file mode 100644
index 0000000..0001e0a
--- /dev/null
+++ b/docs/.vuepress/public/logo@2x.svg
@@ -0,0 +1,35 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="78px" height="39px" viewBox="0 0 78 39" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+ <!-- Generator: Sketch 52.3 (67297) - http://www.bohemiancoding.com/sketch -->
+ <title>TB1zBLaPXXXXXXeXXXXXXXXXXXX-121-59</title>
+ <desc>Created with Sketch.</desc>
+ <defs>
+ <polygon id="path-1" points="38.5024785 38.2713752 38.5024785 0.156635915 0 0.156635915 0 38.2713752"></polygon>
+ <polygon id="path-3" points="38.5024785 38.2713752 38.5024785 0.156635915 0 0.156635915 0 38.2713752"></polygon>
+ </defs>
+ <g id="weex" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+ <g id="工具-1" transform="translate(-26.000000, -12.000000)">
+ <g id="Group-5">
+ <g id="TB1zBLaPXXXXXXeXXXXXXXXXXXX-121-59" transform="translate(26.000000, 12.000000)">
+ <path d="M40.0783352,21.721519 C40.2240214,21.721519 40.3703494,21.8143021 40.3908867,21.9613664 L40.8491245,26.3291139 C40.8696618,26.5310907 40.9325572,26.6787862 41.0159898,26.6787862 C41.0994225,26.6787862 41.1828551,26.5317219 41.2033924,26.3291139 L41.7039883,21.9613664 C41.7450628,21.8143021 41.8079582,21.721519 41.9542863,21.721519 L44.0786099,21.721519 C44.1832217,21.721519 44.3083706,21.8143021 44.3289079,21.9247581 L44.8705784,26.3291139 C44.8917574,26.5310907 44.954011,26.6787862 45.0374437,26.6787862 C45.1208763,26.6787862 45.204309,26.5317219 45.225488,26.3291139 L45.6426513,21.9424311 C45.661905,21.8143021 45.7466212,21.721519 45.8717702,21.721519 L49.2475837,21.721519 C49.4561653,21.721519 49.5184189,21.8326062 49.4978816,21.9803017 L47.5596769,35.2665857 C47.5384979,35.4508895 47.4133489,35.5430414 47.2888417,35.5430414 L44.2467588,35.5430414 C44.1252323,35.542468 44.0207651,35.4581686 43.9964609,35.3410647 L43.2038507,30.8805341 C43.1826716,30.716428 43.120418,30.5864054 43.0369854,30.5864054 C42.9535527,30.5864054 42.8912991,30.7341009 42.8701201,30.9001006 L42.1416888,35.3233917 C42.0999725,35.4521519 42.0370771,35.5443038 41.9125699,35.5443038 L38.8274872,35.5443038 C38.6846577,35.5428511 38.5627169,35.4424738 38.5361147,35.3044564 L36.5343728,21.9613664 C36.5131937,21.7953667 36.6178054,21.721519 36.7634917,21.721519 L40.0764098,21.721519 L40.0783352,21.721519 Z M50.4355363,21.9613664 C50.4355363,21.8509104 50.5606853,21.721519 50.7063715,21.721519 L58.1049224,21.721519 C58.2294296,21.721519 58.3128623,21.8136709 58.3128623,21.9247581 L58.3128623,25.2415953 C58.3128623,25.3520513 58.2088923,25.4258991 58.0837434,25.4258991 L54.6033182,25.4258991 C54.5198855,25.4258991 54.4576319,25.4808115 54.4576319,25.5540281 L54.4576319,26.5866343 C54.4576319,26.6592197 54.5410646,26.7147633 54.6033182,26.7147633 L58.1203254,26.7147633 C58.203758,26.7147633 58.2660116,26.7703069 58.2660116,26.8435235 L58.2660116,30.1976001 C58.2640343,30.2878375 58.19086,30.360909 58.0991463,30.364231 L54.5417064,30.364231 C54.4582737,30.364231 54.3953783,30.4197746 54.3953783,30.5119265 L54.3953783,31.5994451 C54.3953783,31.6732929 54.4576319,31.7288365 54.5198855,31.7288365 L58.1254597,31.7288365 C58.2711459,31.7288365 58.3552204,31.8209884 58.3552204,31.9131403 L58.3552204,35.3404335 C58.3552204,35.4515207 58.2506087,35.5424103 58.1254597,35.5424103 L50.6646552,35.5424103 C50.5395062,35.5424103 50.4355363,35.4325854 50.4355363,35.3038252 L50.4355363,21.9613664 Z M59.7093965,21.9613664 C59.7093965,21.8509104 59.8339037,21.721519 59.9802317,21.721519 L67.3781409,21.721519 C67.5026481,21.721519 67.5860807,21.8136709 67.5860807,21.9247581 L67.5860807,25.2415953 C67.5860807,25.3520513 67.481469,25.4258991 67.3569618,25.4258991 L63.8765366,25.4258991 C63.793104,25.4258991 63.7308504,25.4808115 63.7308504,25.5540281 L63.7308504,26.5866343 C63.7308504,26.6592197 63.814283,26.7147633 63.8765366,26.7147633 L67.3935438,26.7147633 C67.4769765,26.7147633 67.5392301,26.7703069 67.5392301,26.8435235 L67.5392301,30.1976001 C67.5372528,30.2878375 67.4640784,30.360909 67.3723648,30.364231 L63.814283,30.364231 C63.7308504,30.364231 63.6685968,30.4197746 63.6685968,30.5119265 L63.6685968,31.5994451 C63.6685968,31.6732929 63.7308504,31.7288365 63.793104,31.7288365 L67.3986781,31.7288365 C67.5443644,31.7288365 67.627797,31.8209884 67.627797,31.9131403 L67.627797,35.3404335 C67.627797,35.4515207 67.5225435,35.5424103 67.3980363,35.5424103 L59.9378736,35.5424103 C59.8133664,35.5424103 59.7087547,35.4325854 59.7087547,35.3038252 L59.7087547,21.9613664 L59.7093965,21.9613664 Z M70.962536,28.6139761 C70.9859702,28.5680649 71.0001367,28.5181231 71.0042523,28.4669117 C71.0042523,28.4290411 70.9830732,28.3375204 70.9618942,28.2826079 L68.585989,21.9247581 C68.5442726,21.8326062 68.585989,21.721519 68.7111379,21.721519 L72.524652,21.721519 C72.6080846,21.721519 72.6703382,21.7953667 72.6915173,21.8692145 L73.1702923,23.7861002 C73.1914714,23.859948 73.2325459,23.9154916 73.253725,23.9154916 C73.2954413,23.9154916 73.3371576,23.859948 73.3576949,23.7867314 L73.8371118,21.8704769 C73.8582908,21.778325 73.9205444,21.7227813 74.0039771,21.7227813 L77.8174911,21.7227813 C77.9009237,21.7227813 77.9843564,21.778325 77.9843564,21.8704769 C77.9843564,21.9070851 77.9843564,21.9443246 77.9638191,21.999237 L75.5879139,28.2100225 C75.5461976,28.2838703 75.5250185,28.4119993 75.5250185,28.4498699 C75.5250185,28.4864782 75.5461976,28.5969343 75.5667348,28.6518467 L77.9843564,35.36 C78.0260727,35.4893914 77.9843564,35.5443038 77.8592074,35.5443038 L73.982798,35.5443038 C73.9205444,35.5443038 73.8582908,35.4893914 73.8371118,35.4155436 L73.3576949,33.1496168 C73.3371576,33.0751379 73.2954413,33.0385296 73.2742622,33.0385296 C73.2325459,33.0385296 73.2120087,33.0751379 73.1908296,33.1489856 L72.7120545,35.4149124 C72.6908755,35.4893914 72.6074428,35.5443038 72.5240102,35.5443038 L68.6886753,35.5443038 C68.6052426,35.5443038 68.5641681,35.5076955 68.5641681,35.4521519 C68.5641681,35.4155436 68.5641681,35.3966083 68.5847054,35.36 L70.9606106,28.6152384 L70.962536,28.6139761 Z" id="Shape" fill="#515151" fill-rule="nonzero"></path>
+ <g id="Group">
+ <g id="Clipped">
+ <mask id="mask-2" fill="white">
+ <use xlink:href="#path-1"></use>
+ </mask>
+ <g id="a"></g>
+ <path d="M22.4171013,14.2682266 C21.4668893,14.2420836 20.7099483,13.4512059 20.7099483,12.4845351 C20.7099483,11.5178643 21.4668893,10.7269865 22.4171013,10.7008436 C23.3673132,10.7269865 24.1242542,11.5178643 24.1242542,12.4845351 C24.1242542,13.4512059 23.3673132,14.2420836 22.4171013,14.2682266 M35.6517266,7.53940871 C34.6207689,6.2594658 33.3662469,5.18414224 31.9512684,4.36753143 C22.4556076,-2.67847415 9.17092405,-0.676145033 2.08961013,8.81468612 C4.68686203,5.40393907 8.59332911,3.591531 12.559481,3.57129886 C5.15343038,6.98857241 0,14.5619189 0,23.3648573 C0,25.8253465 0.537163291,28.3426162 1.2790519,30.5472667 C2.34439367,29.563071 3.31539494,26.968136 4.45454051,26.0687848 C5.01288228,28.8555988 6.09362658,32.9457541 7.59023924,35.2339438 C8.98160127,32.3733804 10.1124038,30.3749672 12.1834025,28.018902 C12.748162,32.1305947 15.0745861,35.2319858 17.5730051,38.2720279 C17.423689,34.7675248 18.1148503,31.2786801 19.5868861,28.106357 C19.6870025,28.1559584 19.7877608,28.2042545 19.8898025,28.2525505 C21.5085494,31.3443113 23.8347007,33.9948417 26.6720506,35.980575 C25.7183772,33.9619296 25.1831392,31.7696795 24.8827899,29.4645209 C24.757654,28.5090842 24.6946235,27.5462942 24.6941089,26.5824201 C24.6941089,24.4789303 24.6299316,22.4459266 25.1780051,20.5219155 C25.4347139,19.6251749 25.5053089,18.7532349 25.8679101,17.907401 C26.0091,17.5791182 26.1567076,17.2547513 26.3139418,16.934953 C26.9903696,15.5513358 27.6918266,14.2284149 28.718662,12.9368213 C28.913119,12.691425 29.2333633,12.4505973 29.4374468,12.2136855 C30.3583899,11.2921442 32.1008013,10.722381 33.4960139,10.722381 C36.1420405,10.722381 38.2489785,12.6268127 38.5018367,15.2582961 C38.408138,12.1947586 37.4377785,9.75384896 35.6510848,7.53875606" id="Shape" fill="#00B4FF" fill-rule="nonzero" mask="url(#mask-2)"></path>
+ </g>
+ <g id="Clipped">
+ <mask id="mask-4" fill="white">
+ <use xlink:href="#path-3"></use>
+ </mask>
+ <g id="a"></g>
+ <path d="M23.0877532,11.3822098 C23.4752416,11.3819766 23.8334181,11.5919876 24.0273609,11.9331336 C24.2213037,12.2742795 24.2215483,12.6947323 24.0280026,13.0361115 C23.834457,13.3774906 23.4765252,13.5879325 23.0890367,13.5881656 C22.4900315,13.5885261 22.0041544,13.0949983 22.0038,12.4858404 C22.0034456,11.8766825 22.4887479,11.3825703 23.0877532,11.3822098" id="Shape" fill="#515151" fill-rule="nonzero" mask="url(#mask-4)"></path>
+ </g>
+ </g>
+ </g>
+ </g>
+ </g>
+ </g>
+</svg>
\ No newline at end of file
diff --git a/docs/.vuepress/public/native-component.png b/docs/.vuepress/public/native-component.png
new file mode 100644
index 0000000..9dd5550
--- /dev/null
+++ b/docs/.vuepress/public/native-component.png
Binary files differ
diff --git a/docs/.vuepress/public/sauce_labs_red.svg b/docs/.vuepress/public/sauce_labs_red.svg
new file mode 100644
index 0000000..98e31a9
--- /dev/null
+++ b/docs/.vuepress/public/sauce_labs_red.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 166 54"><defs><style>.cls-1{isolation:isolate;}.cls-2{opacity:0.15;mix-blend-mode:multiply;}.cls-3{fill:#e1251b;}.cls-4,.cls-5{fill:#fff;}.cls-5{font-size:6.14px;font-family:MuseoSans-500, Museo Sans;letter-spacing:0.18em;}.cls-6{letter-spacing:0.18em;}.cls-7{letter-spacing:0.17em;}.cls-8{letter-spacing:0.18em;}</style></defs><title>Powered by Sauce Labs badges red</title><g class="cls-1"><g id="red"><image class="cls-2" width="172" height="60" transform="translate(-3 -3)" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAKwAAAA8CAYAAAD7V1GbAAAACXBIWXMAAAsSAAALEgHS3X78AAADB0lEQVR4Xu3dTU/bQBCH8WcDAURBVV8OiPbS7/+9qh4KKm9RISHTw+w4G9tBreSkGun/k1aAndweLWtfppgZY0opZfSGyAHYjjBL/3oNNWJtfxc5BKsLvNutQLtgmx11NrJA4cp+RZjrkdXtuMe9L83qtXmzjlG0sl9trCtg2axVvQ7UYOvuGrGeAufAu7pO2USrYGUfjE2sz8BTXYt6f1VKWZuZxQ4bwc7xWD8Cn+rPSzzaI3SmlenFmfUVj/UBuAVu6v04Fhhgx72z6xy4AD4DX4FrPNrzei+OBiJTWuP//hd4rN/xjfEFj3gJvJZSyls77DXwDbjCd9kTdCyQ6cVx4AXfXX/U6wvgF3DPprvBkSDOsBd4tFfAF+A9cIaClelFsL+Bu3rtDm9w8Py06y1BPHhd4rF+YPscKzKV9vwKvqOesx1rpw02HqhmeJhz/BhwWtcZClamF8GCd3aCt3fEZmftmuvvsLCJto23XQpWphTvYKOvtr1Ba2PBhvLGEpnSXzem11SSioKVVBSspKJgJRUFK6koWElFwUoqClZSUbCSioKVVBSspKJgJRUFK6koWElFwUoqClZSUbCSioKVVBSspKJgJRUFK6koWElFwUoqClZSUbCSioKVVBSspKJgJRUFK6koWElFwUoqClZSUbCSioKVVBSspPLWjAPbsUSm9E+djQUbg77i52uzQEM5ZFox9ihW294g3DbYKDsiXbKZ9RlDvzT2SKbWDpZ7xptbsh1vF25/h21HgC/w2Z8xTlGjO2Uf+qM7H/D2nvEW1+2HI9j+vPpHfKpyDKq9R8ORZT/GhiPf4g220RoMg+2PAAevXuPnZZ/G2rutfy9pgzUzK6WU5kuPwM/6gSd8QHI7GFk7rEwpzqhxjn3AY73BW4xgMTPbtcNSv3zHyAhwkYn1j6RPdQ122GLmD2B1l53hcc6b1Y4AV7CyD/EWIKJdNmsFrK2GuustQey2MxSrHEYbbX91uh22u+A7bcSpM6scWvve1awX6CDY7oaHK/Jf9EMNfwC26Q1uGODl8wAAAABJRU5ErkJggg=="/><rect class="cls-3" x="3" y="3" width="160" height="48" rx="3" ry="3"/><path class="cls-4" d="M13.33,36.05a8,8,0,0,1-.54-2.92A8.17,8.17,0,0,1,21,25a8.77,8.77,0,0,1,1.15.08l-.92.93h-.25a7.15,7.15,0,0,0-6.88,9.1h6.26L17.7,40,24,33.62h-8.6L25.09,24a9.94,9.94,0,0,0-4.15-.9,10.07,10.07,0,0,0-5.25,18.66l3-5.67Z"/><path class="cls-4" d="M26.19,24.54l-3,5.67h5.37a8.15,8.15,0,0,1-7.61,11.07,9.39,9.39,0,0,1-1.19-.08l.91-.92h.28a7.15,7.15,0,0,0,7.15-7.15,7.83,7.83,0,0,0-.27-1.94H21.57l2.61-4.93-6.42,6.39h8.62L16.8,42.31a10.07,10.07,0,0,0,9.39-17.77Z"/><path class="cls-4" d="M36,39.35l.86-1.27a.44.44,0,0,1,.69-.09,4.09,4.09,0,0,0,2.76,1.16,1.94,1.94,0,0,0,2-1.89c0-1-.66-1.62-1.91-2.44-1.46-1-3.2-2.22-3.2-4.44s1.54-4.62,5-4.62a6.11,6.11,0,0,1,4,1.44.63.63,0,0,1,.06.89l-.86,1.22c-.18.27-.47.29-.78.05a3.67,3.67,0,0,0-2.51-1,1.82,1.82,0,0,0-1.89,1.73c0,.89.6,1.33,1.93,2.22s3.42,2.2,3.42,4.64c0,2.6-2,4.78-5.3,4.78A6.21,6.21,0,0,1,36,40C35.86,39.88,35.75,39.68,36,39.35Z"/><path class="cls-4" d="M46.92,41l8.35-15a.42.42,0,0,1,.38-.24h.2a.32.32,0,0,1,.31.24l4.09,15a.44.44,0,0,1-.42.58H57.9c-.34,0-.52-.12-.58-.45l-.56-2.46H51.23l-1.29,2.46a.79.79,0,0,1-.71.45h-2C46.88,41.53,46.77,41.24,46.92,41Zm9.13-4.73-1-4.84h0l-2.42,4.84Z"/><path class="cls-4" d="M64.51,26.4A.51.51,0,0,1,65,26h2.2a.35.35,0,0,1,.33.42l-1.33,9.35a3.54,3.54,0,0,0,0,.71,2.09,2.09,0,0,0,2.27,2.36c1.82,0,2.84-1.18,3.11-3l1.33-9.37a.47.47,0,0,1,.44-.42h2.2a.37.37,0,0,1,.34.42l-1.36,9.51c-.47,3.37-2.82,5.84-6.28,5.84a4.81,4.81,0,0,1-5.07-5,6.94,6.94,0,0,1,.07-.89Z"/><path class="cls-4" d="M86.5,25.76a6,6,0,0,1,4.62,2.11.46.46,0,0,1-.09.62l-1.2,1.15a.49.49,0,0,1-.73,0,4,4,0,0,0-2.75-1.11c-2.67,0-5,2.76-5,5.93,0,2.36,1.27,4.38,3.4,4.38a4.6,4.6,0,0,0,3-1.31c.29-.25.53-.2.71,0L89.68,39a.53.53,0,0,1-.11.6,7.11,7.11,0,0,1-5,2.16c-3.84,0-6.33-3.09-6.33-6.91C78.22,29.62,81.9,25.76,86.5,25.76Z"/><path class="cls-4" d="M95.3,26.4a.47.47,0,0,1,.42-.42h8.22a.35.35,0,0,1,.33.42L104,28.22a.47.47,0,0,1-.44.43H97.87l-.51,3.64h4.71a.36.36,0,0,1,.33.42l-.26,1.84a.49.49,0,0,1-.45.42H97l-.55,3.89h5.71c.22,0,.33.2.31.42l-.25,1.82a.47.47,0,0,1-.44.43H93.54a.34.34,0,0,1-.31-.43Z"/><path class="cls-4" d="M109.56,26.4A.49.49,0,0,1,110,26h1a.37.37,0,0,1,.34.42L109.36,40H115a.35.35,0,0,1,.31.42l-.09.64a.49.49,0,0,1-.44.43h-7a.36.36,0,0,1-.33-.43Z"/><path class="cls-4" d="M117.15,41l8.2-15a.42.42,0,0,1,.37-.24h.2a.32.32,0,0,1,.31.24l4,15a.47.47,0,0,1-.42.58h-.94a.32.32,0,0,1-.33-.25l-.89-3.66h-6.93l-1.89,3.66a.47.47,0,0,1-.42.25h-1C117.11,41.53,117,41.24,117.15,41Zm10-4.71L125.44,29h-.14l-3.8,7.28Z"/><path class="cls-4" d="M140.94,33.71a3.37,3.37,0,0,1,1.88,3,4.67,4.67,0,0,1-5,4.8h-4.6a.36.36,0,0,1-.33-.43L135,26.4a.51.51,0,0,1,.45-.42h4.42a3.42,3.42,0,0,1,3.57,3.53,4.44,4.44,0,0,1-2.46,4.13ZM138.14,40A3,3,0,0,0,141,36.88a2.33,2.33,0,0,0-2.38-2.39h-3.11L134.7,40Zm.67-7.09c1.64,0,2.7-1.31,2.7-3.26,0-1.29-.66-2.18-1.95-2.18H136.5L135.72,33Z"/><path class="cls-4" d="M145.56,39.19l.35-.37c.27-.27.45-.36.71-.11a4.32,4.32,0,0,0,3.29,1.55,2.65,2.65,0,0,0,2.8-2.69c0-1.4-1.05-2.22-2.89-3.28s-3-2-3-4.05c0-1.86,1.17-4.48,4.81-4.48a5.7,5.7,0,0,1,3.45,1.13c.11.09.31.33,0,.76l-.25.35c-.22.31-.44.4-.73.2a4.52,4.52,0,0,0-2.64-.95,2.88,2.88,0,0,0-3,2.79c0,1.25.85,2.07,2.25,2.82,2.13,1.16,3.75,2.25,3.75,4.54,0,2.46-1.78,4.35-4.86,4.35a5.69,5.69,0,0,1-4.16-1.91C145.36,39.68,145.27,39.48,145.56,39.19Z"/><text class="cls-5" transform="translate(70.41 17.62)">TESTING P<tspan class="cls-6" x="40.52" y="0">O</tspan><tspan x="46.65" y="0">WERED </tspan><tspan class="cls-7" x="76.21" y="0">B</tspan><tspan class="cls-8" x="81.16" y="0">Y</tspan></text></g></g></svg>
\ No newline at end of file
diff --git a/docs/.vuepress/public/tool-playground-android-icon.png b/docs/.vuepress/public/tool-playground-android-icon.png
new file mode 100644
index 0000000..2691e57
--- /dev/null
+++ b/docs/.vuepress/public/tool-playground-android-icon.png
Binary files differ
diff --git a/docs/.vuepress/public/tool-playground-apple-icon.png b/docs/.vuepress/public/tool-playground-apple-icon.png
new file mode 100644
index 0000000..70c1ea4
--- /dev/null
+++ b/docs/.vuepress/public/tool-playground-apple-icon.png
Binary files differ
diff --git a/docs/.vuepress/public/tool-playground-qrcode.png b/docs/.vuepress/public/tool-playground-qrcode.png
new file mode 100644
index 0000000..bdfd4b2
--- /dev/null
+++ b/docs/.vuepress/public/tool-playground-qrcode.png
Binary files differ
diff --git a/docs/.vuepress/public/toolkit-preview.png b/docs/.vuepress/public/toolkit-preview.png
new file mode 100644
index 0000000..5046052
--- /dev/null
+++ b/docs/.vuepress/public/toolkit-preview.png
Binary files differ
diff --git a/docs/.vuepress/public/vue-rax.png b/docs/.vuepress/public/vue-rax.png
new file mode 100644
index 0000000..1e6e57e
--- /dev/null
+++ b/docs/.vuepress/public/vue-rax.png
Binary files differ
diff --git a/docs/.vuepress/public/weex-example-yo.png b/docs/.vuepress/public/weex-example-yo.png
new file mode 100644
index 0000000..81e78c1
--- /dev/null
+++ b/docs/.vuepress/public/weex-example-yo.png
Binary files differ
diff --git a/docs/.vuepress/sub-components/License.vue b/docs/.vuepress/sub-components/License.vue
index ae0ab81..e229a5f 100644
--- a/docs/.vuepress/sub-components/License.vue
+++ b/docs/.vuepress/sub-components/License.vue
@@ -31,6 +31,7 @@
<dl><dt>Resources</dt>
<dd><a href="/blog/write-a-blog.html" target="_self">Blog</a></dd>
<dd><a href="/community/" target="_self">Community</a></dd>
+ <dd><a href="thanks" target="_self">Thanks (Weex)</a></dd>
<dd><a href="https://www.apache.org/security/" target="_self">Security</a></dd>
</dl>
</div>
diff --git a/docs/README.md b/docs/README.md
index 59f7ff8..78878ef 100644
--- a/docs/README.md
+++ b/docs/README.md
@@ -1,7 +1,3 @@
-<script>
-module.exports = {
- created(){
- this.$router.push('/guide/')
- }
-}
-</script>
\ No newline at end of file
+---
+layout: IndexEn
+---
\ No newline at end of file
diff --git a/docs/thanks.md b/docs/thanks.md
new file mode 100644
index 0000000..90ee2c8
--- /dev/null
+++ b/docs/thanks.md
@@ -0,0 +1,4 @@
+# Thanks
+Weex could not exist without the continued generous support from the community, We would like to take this opportunity to thank our sponsors.
+
+* [Sauce Labs](https://saucelabs.com): A Cross-browser Testing Platform.
\ No newline at end of file
diff --git a/docs/zh/README.md b/docs/zh/README.md
index 748fe9b..78a3c62 100644
--- a/docs/zh/README.md
+++ b/docs/zh/README.md
@@ -1,7 +1,3 @@
-<script>
-module.exports = {
- created(){
- this.$router.push('/zh/guide/')
- }
-}
-</script>
\ No newline at end of file
+---
+layout: IndexZh
+---
\ No newline at end of file
