From bb0b629c311c2bff9fd1ae7ac9fe25f26714d813 Mon Sep 17 00:00:00 2001
From: tangjinzhou <415800467@qq.com>
Date: Thu, 25 Jan 2018 16:29:23 +0800
Subject: [PATCH] add theme

---
 components/_util/vnode.js                     |   7 +-
 components/button/demo/index.vue              |   6 +-
 components/icon/demo/index.vue                |  60 +++
 components/icon/icon.vue                      |   9 +-
 components/icon/index.en-US.md                |  13 +
 components/icon/index.zh-CN.md                |  14 +
 components/menu/src/MenuMixin.js              |   2 +-
 components/trigger/index.vue                  |   5 +-
 examples/components/IconSet/CopyableIcon.vue  |  37 ++
 examples/components/IconSet/index.vue         |  40 ++
 examples/components/api.vue                   |   6 +-
 examples/components/demo.vue                  |   2 +-
 examples/components/demoBox.vue               |  56 ++-
 examples/components/md.vue                    |   9 +-
 examples/demo.js                              |   1 +
 examples/index.js                             |   3 +
 examples/index.less                           | 150 ++-----
 examples/theme/static/colors.less             | 170 ++++++++
 examples/theme/static/common.less             | 132 +++++++
 examples/theme/static/demo.less               | 261 +++++++++++++
 examples/theme/static/docsearch.less          |  22 ++
 examples/theme/static/footer.less             |  71 ++++
 examples/theme/static/header.less             | 144 +++++++
 examples/theme/static/highlight.less          | 153 ++++++++
 examples/theme/static/home.less               | 366 +++++++++++++++++
 examples/theme/static/icons.less              |  66 ++++
 examples/theme/static/index.less              |  22 ++
 examples/theme/static/markdown.less           | 325 +++++++++++++++
 examples/theme/static/mock-browser.less       |  53 +++
 examples/theme/static/motion.less             |  39 ++
 .../theme/static/new-version-info-modal.less  |  23 ++
 examples/theme/static/not-found.less          |  35 ++
 examples/theme/static/nprogress.less          |  62 +++
 examples/theme/static/page-nav.less           |  61 +++
 examples/theme/static/preview-img.less        | 159 ++++++++
 examples/theme/static/resource.less           |  71 ++++
 examples/theme/static/responsive.less         | 369 ++++++++++++++++++
 examples/theme/static/theme.less              |   4 +
 examples/theme/static/toc.less                |  64 +++
 package.json                                  |   3 +-
 webpack.base.config.js                        |  18 +-
 41 files changed, 2958 insertions(+), 155 deletions(-)
 create mode 100644 components/icon/demo/index.vue
 create mode 100644 components/icon/index.en-US.md
 create mode 100644 components/icon/index.zh-CN.md
 create mode 100644 examples/components/IconSet/CopyableIcon.vue
 create mode 100644 examples/components/IconSet/index.vue
 create mode 100644 examples/theme/static/colors.less
 create mode 100644 examples/theme/static/common.less
 create mode 100644 examples/theme/static/demo.less
 create mode 100644 examples/theme/static/docsearch.less
 create mode 100644 examples/theme/static/footer.less
 create mode 100644 examples/theme/static/header.less
 create mode 100644 examples/theme/static/highlight.less
 create mode 100644 examples/theme/static/home.less
 create mode 100644 examples/theme/static/icons.less
 create mode 100644 examples/theme/static/index.less
 create mode 100644 examples/theme/static/markdown.less
 create mode 100644 examples/theme/static/mock-browser.less
 create mode 100644 examples/theme/static/motion.less
 create mode 100644 examples/theme/static/new-version-info-modal.less
 create mode 100644 examples/theme/static/not-found.less
 create mode 100644 examples/theme/static/nprogress.less
 create mode 100644 examples/theme/static/page-nav.less
 create mode 100644 examples/theme/static/preview-img.less
 create mode 100644 examples/theme/static/resource.less
 create mode 100644 examples/theme/static/responsive.less
 create mode 100644 examples/theme/static/theme.less
 create mode 100644 examples/theme/static/toc.less

diff --git a/components/_util/vnode.js b/components/_util/vnode.js
index 3919d75d4..2df7e56b8 100644
--- a/components/_util/vnode.js
+++ b/components/_util/vnode.js
@@ -46,7 +46,7 @@ export function cloneVNodes (vnodes, deep) {
 
 export function cloneElement (n, nodeProps, clone) {
   const node = clone ? cloneVNode(n, true) : n
-  const { props = {}, key, on = {}} = nodeProps
+  const { props = {}, key, on = {}, listeners = {}} = nodeProps
   const data = node.data || {}
   const { style = data.style,
     class: cls = data.class,
@@ -58,10 +58,9 @@ export function cloneElement (n, nodeProps, clone) {
     node.componentOptions.propsData = node.componentOptions.propsData || {}
     node.componentOptions.listeners = node.componentOptions.listeners || {}
     node.componentOptions.propsData = { ...node.componentOptions.propsData, ...props }
-    node.componentOptions.listeners = { ...node.componentOptions.listeners, ...on }
-  } else {
-    node.data.on = { ...(node.data.on || {}), ...on }
+    node.componentOptions.listeners = { ...node.componentOptions.listeners, ...listeners }
   }
+  node.data.on = { ...(node.data.on || {}), ...on }
 
   if (key !== undefined) {
     node.key = key
diff --git a/components/button/demo/index.vue b/components/button/demo/index.vue
index 4937897eb..ef9369aa6 100644
--- a/components/button/demo/index.vue
+++ b/components/button/demo/index.vue
@@ -25,7 +25,7 @@ export default {
     }
     return (
       <div>
-        <md md={md}/>
+        <md {...md}/>
         <Basic />
         <ButtonGroup />
         <Disabled />
@@ -39,9 +39,7 @@ export default {
           <template slot='cn'>
             <CN/>
           </template>
-          <template slot='us'>
-            <US/>
-          </template>
+          <US/>
         </api>
       </div>
     )
diff --git a/components/icon/demo/index.vue b/components/icon/demo/index.vue
new file mode 100644
index 000000000..4b80ef443
--- /dev/null
+++ b/components/icon/demo/index.vue
@@ -0,0 +1,60 @@
+<script>
+import IconSet from '@/examples/components/IconSet/index'
+const md = {
+  cn: `# 图标 Icon
+        语义化的矢量图形。
+        ## 图标的命名规范
+        我们为每个图标赋予了语义化的命名，命名规则如下:
+        - 实心和描线图标保持同名，用 \` - o\` 来区分，比如 \`question-circle\`（实心） 和 \`question-circle-o\`（描线）；
+        - 命名顺序：\`[图标名]-[形状?]-[描线?]-[方向?]\`。
+        > \`?\` 为可选。
+
+        完整的图标设计规范请访问 [图标规范](/docs/spec/icon)。
+        ## 如何使用
+        使用 \`<a-icon />\` 标签声明组件，指定图标对应的 type 属性，示例代码如下:
+        \`\`\`html
+        <a-icon type="link" />
+        \`\`\`
+        ## 本地部署
+        图标默认托管在 [iconfont.cn](http://iconfont.cn)，默认公网可访问。如需本地部署，可参考 [示例](https://github.com/ant-design/antd-init/tree/master/examples/local-iconfont)。
+        ## 图标列表
+        > 点击图标复制代码。
+      `,
+  us: `# Icon
+        Semantic vector graphics.
+        ## Icons naming convention
+        We provide semantic name for every icon, and naming rules are as follows:
+        - Scanning line icon has the similar name with its solid one，but it's distinguished by \`-o\`, for example, \`question-circle\` (a full circle) and \`question-circle-o\` (an empty circle);
+        - Naming sequence：\`[name]-[shape?]-[outline?]-[direction?]\`.
+        > \`?\` means is optional.
+        See more design detail at [here](/docs/spec/icon).
+        ## How To Use
+        Use tag <a-icon /> to create an icon and set its type in the type prop, for example:
+        \`\`\`html
+        <a-icon type="link" />
+        \`\`\`
+        ## Local deployment
+        By default, icons are deployed at [iconfont.cn](http://iconfont.cn), publicly available repository of a huge set of icons. In case you need to use a locally deployed version of the icon font, you can refer to [this example](https://github.com/ant-design/antd-init/tree/master/examples/local-iconfont)。
+        ## List of icons
+        > Click the icon and copy the code。
+      `,
+}
+export default {
+  render () {
+    return (
+      <div>
+        <md cn={md.cn} us={md.us}/>
+        <md cn='### 方向性图标' us='### Directional Icons'/>
+        <IconSet class='icons' catigory='direction' />
+        <md cn='### 提示建议性图标' us='### Suggested Icons'/>
+        <IconSet class='icons' catigory='suggestion' />
+        <md cn='### 网站通用图标' us='### Application Icons'/>
+        <IconSet class='icons' catigory='other' />
+        <md cn='### 品牌和标识' us='### Brand and Logos'/>
+        <IconSet class='icons' catigory='logo' />
+
+      </div>
+    )
+  },
+}
+</script>
diff --git a/components/icon/icon.vue b/components/icon/icon.vue
index 5526a4563..f3fedc8ec 100644
--- a/components/icon/icon.vue
+++ b/components/icon/icon.vue
@@ -1,6 +1,3 @@
-<template>
-  <i :title="title" :class="classes" @click="handleClick"></i>
-</template>
 <script>
 export default {
   name: 'Icon',
@@ -38,6 +35,12 @@ export default {
       this.$emit('click', event)
     },
   },
+  render () {
+    const { title, classes, handleClick } = this
+    return (
+      <i title={title} class={classes} onClick={handleClick} />
+    )
+  },
   beforeDestroy () {
     if (this.timeout) {
       clearTimeout(this.timeout)
diff --git a/components/icon/index.en-US.md b/components/icon/index.en-US.md
new file mode 100644
index 000000000..92f919185
--- /dev/null
+++ b/components/icon/index.en-US.md
@@ -0,0 +1,13 @@
+## API
+
+You can set `style` and `className` for size and color of icons because they are still fonts in essence.
+
+```jsx
+<a-icon type="question" style="font-size: 16px, color: #08c" />
+```
+
+| Property | Description | Type | Default |
+| -------- | ----------- | ---- | ------- |
+| spin | Rotate icon with animation | boolean | false |
+| style | style properties of icon, like fontSize and color | object | - |
+| type | Type of ant design icon | string | - |
diff --git a/components/icon/index.zh-CN.md b/components/icon/index.zh-CN.md
new file mode 100644
index 000000000..b4ba9dfc8
--- /dev/null
+++ b/components/icon/index.zh-CN.md
@@ -0,0 +1,14 @@
+
+## API
+
+由于图标字体本质上还是文字，可以使用 `style` 和 `class` 设置图标的大小和颜色。
+
+````html
+<a-icon type="question" style="font-size: 16px, color: #08c" />
+````
+
+| 参数 | 说明 | 类型 | 默认值 |
+| --- | --- | --- | --- |
+| spin | 是否有旋转动画 | boolean | false |
+| style | 设置图标的样式，例如 fontSize 和 color | object | - |
+| type | 图标类型 | string | - |
diff --git a/components/menu/src/MenuMixin.js b/components/menu/src/MenuMixin.js
index 09db93ae4..406bf6cf0 100644
--- a/components/menu/src/MenuMixin.js
+++ b/components/menu/src/MenuMixin.js
@@ -162,7 +162,7 @@ export default {
           ...extraProps,
           openChange: this.onOpenChange,
         },
-        on: {
+        listeners: {
           click: this.onClick,
           itemHover: this.onItemHover,
           openChange: this.onOpenChange,
diff --git a/components/trigger/index.vue b/components/trigger/index.vue
index 8c4fa9dc7..50ce72b46 100644
--- a/components/trigger/index.vue
+++ b/components/trigger/index.vue
@@ -493,12 +493,13 @@ export default {
       props: {},
       on: { _ANT_EVENT_HACK: () => {} },
       key: 'trigger',
+      listeners: {},
     }
 
     if (this.isContextMenuToShow()) {
-      newChildProps.on.contextMenu = this.onContextMenu
+      newChildProps.listeners.contextMenu = this.onContextMenu
     } else {
-      newChildProps.on.contextMenu = this.createTwoChains('contextMenu')
+      newChildProps.listeners.contextMenu = this.createTwoChains('contextMenu')
     }
 
     if (this.isClickToHide() || this.isClickToShow()) {
diff --git a/examples/components/IconSet/CopyableIcon.vue b/examples/components/IconSet/CopyableIcon.vue
new file mode 100644
index 000000000..855d21616
--- /dev/null
+++ b/examples/components/IconSet/CopyableIcon.vue
@@ -0,0 +1,37 @@
+<template>
+<li :class="justCopied ? 'copied' : ''" v-clipboard:copy="text"
+      v-clipboard:success="onCopied">
+  <a-icon :type="type" />
+  <span class='anticon-class'>
+    <a-badge :dot="isNew">
+      {{type}}
+    </a-badge>
+  </span>
+</li>
+</template>
+<script>
+import BaseMixin from 'antd/_util/BaseMixin'
+
+export default {
+  mixins: [BaseMixin],
+  props: {
+    type: String,
+    isNew: Boolean,
+  },
+  data () {
+    return {
+      justCopied: false,
+      text: `<a-icon type="${this.type}" />`,
+    }
+  },
+  methods: {
+    onCopied () {
+      this.setState({ justCopied: true }, () => {
+        setTimeout(() => {
+          this.setState({ justCopied: false })
+        }, 2000)
+      })
+    },
+  },
+}
+</script>
diff --git a/examples/components/IconSet/index.vue b/examples/components/IconSet/index.vue
new file mode 100644
index 000000000..61109f506
--- /dev/null
+++ b/examples/components/IconSet/index.vue
@@ -0,0 +1,40 @@
+<script>
+import CopyableIcon from './CopyableIcon'
+export default {
+  props: {
+    catigory: String,
+  },
+  data () {
+    return {
+      icons: {
+        direction: ['step-backward', 'step-forward', 'fast-backward', 'fast-forward', 'shrink', 'arrows-alt', 'down', 'up', 'left', 'right', 'caret-up', 'caret-down', 'caret-left', 'caret-right', 'up-circle', 'down-circle', 'left-circle', 'right-circle', 'up-circle-o', 'down-circle-o', 'right-circle-o', 'left-circle-o', 'double-right', 'double-left', 'verticle-left', 'verticle-right', 'forward', 'backward', 'rollback', 'enter', 'retweet', 'swap', 'swap-left', 'swap-right', 'arrow-up', 'arrow-down', 'arrow-left', 'arrow-right', 'play-circle', 'play-circle-o', 'up-square', 'down-square', 'left-square', 'right-square', 'up-square-o', 'down-square-o', 'left-square-o', 'right-square-o', 'login', 'logout', 'menu-fold', 'menu-unfold'],
+        suggestion: ['question', 'question-circle-o', 'question-circle', 'plus', 'plus-circle-o', 'plus-circle', 'pause', 'pause-circle-o', 'pause-circle', 'minus', 'minus-circle-o', 'minus-circle', 'plus-square', 'plus-square-o', 'minus-square', 'minus-square-o', 'info', 'info-circle-o', 'info-circle', 'exclamation', 'exclamation-circle-o', 'exclamation-circle', 'close', 'close-circle', 'close-circle-o', 'close-square', 'close-square-o', 'check', 'check-circle', 'check-circle-o', 'check-square', 'check-square-o', 'clock-circle-o', 'clock-circle', 'warning'],
+        logo: [
+          'android', 'android-o', 'apple', 'apple-o', 'windows', 'windows-o', 'ie', 'chrome', 'github', 'aliwangwang', 'aliwangwang-o', 'dingding', 'dingding-o',
+          'weibo-square', 'weibo-circle', 'taobao-circle', 'html5', 'weibo', 'twitter', 'wechat', 'youtube', 'alipay-circle', 'taobao', 'skype', 'qq', 'medium-workmark', 'gitlab', 'medium', 'linkedin', 'google-plus',
+          'dropbox', 'facebook', 'codepen', 'amazon', 'google', 'codepen-circle', 'alipay', 'ant-design', 'aliyun',
+        ],
+        other: ['lock', 'unlock', 'area-chart', 'pie-chart', 'bar-chart', 'dot-chart', 'bars', 'book', 'calendar', 'cloud', 'cloud-download', 'code', 'code-o', 'copy', 'credit-card', 'delete', 'desktop', 'download', 'edit', 'ellipsis', 'file', 'file-text', 'file-unknown', 'file-pdf', 'file-word', 'file-excel', 'file-jpg', 'file-ppt', 'file-add', 'folder', 'folder-open', 'folder-add', 'hdd', 'frown', 'frown-o', 'meh', 'meh-o', 'smile', 'smile-o', 'inbox', 'laptop', 'appstore-o', 'appstore', 'line-chart', 'link', 'mail', 'mobile', 'notification', 'paper-clip', 'picture', 'poweroff', 'reload', 'search', 'setting', 'share-alt', 'shopping-cart', 'tablet', 'tag', 'tag-o', 'tags', 'tags-o', 'to-top', 'upload', 'user', 'video-camera', 'home', 'loading', 'loading-3-quarters', 'cloud-upload-o', 'cloud-download-o', 'cloud-upload', 'cloud-o', 'star-o', 'star', 'heart-o', 'heart', 'environment', 'environment-o', 'eye', 'eye-o', 'camera', 'camera-o', 'save', 'team', 'solution', 'phone', 'filter', 'exception', 'export', 'customer-service', 'qrcode', 'scan', 'like', 'like-o', 'dislike', 'dislike-o', 'message', 'pay-circle', 'pay-circle-o', 'calculator', 'pushpin', 'pushpin-o', 'bulb', 'select', 'switcher', 'rocket', 'bell', 'disconnect', 'database', 'compass', 'barcode', 'hourglass', 'key', 'flag', 'layout', 'printer', 'sound', 'usb', 'skin', 'tool', 'sync', 'wifi', 'car', 'schedule', 'user-add', 'user-delete', 'usergroup-add', 'usergroup-delete', 'man', 'woman', 'shop', 'gift', 'idcard', 'medicine-box', 'red-envelope', 'coffee', 'copyright', 'trademark', 'safety', 'wallet', 'bank', 'trophy', 'contacts', 'global', 'shake', 'api', 'fork', 'dashboard', 'form', 'table', 'profile'],
+      },
+      newIcons: [
+        'aliyun',
+      ],
+    }
+  },
+
+  render () {
+    const { catigory } = this.$props
+    const listClassName = {
+      'anticons-list': true,
+      clearfix: true,
+    }
+    return (
+      <ul class={listClassName}>
+        {this.icons[catigory].map(type => (
+          <CopyableIcon key={type} type={type} isNew={this.newIcons.indexOf(type) >= 0} />
+        ))}
+      </ul>
+    )
+  },
+}
+</script>
diff --git a/examples/components/api.vue b/examples/components/api.vue
index a464abf9c..e9d1e3f98 100644
--- a/examples/components/api.vue
+++ b/examples/components/api.vue
@@ -1,7 +1,7 @@
 <template>
-  <div class='markdown'>
-    <slot v-if="lang === 'cn'" name="cn"></slot>
-    <slot v-else name="us"></slot>
+  <div class='markdown api-container'>
+    <slot v-if="lang === 'cn'" name="cn" class='markdown api-container'></slot>
+    <slot v-else></slot>
   </div>
 </template>
 <script>
diff --git a/examples/components/demo.vue b/examples/components/demo.vue
index 65faf9df4..fbfc48ed8 100644
--- a/examples/components/demo.vue
+++ b/examples/components/demo.vue
@@ -17,7 +17,7 @@ export default {
             <router-link to={{ path: `/components/${lang}/${d}` }}>{d}</router-link>
           </MenuItem>)}
         </Menu>
-        <div class='content'>
+        <div class='content main-container'>
           {Demo ? <Demo /> : '正在紧急开发中...'}
         </div>
 
diff --git a/examples/components/demoBox.vue b/examples/components/demoBox.vue
index b9a84c132..4ee9c36b7 100644
--- a/examples/components/demoBox.vue
+++ b/examples/components/demoBox.vue
@@ -1,38 +1,80 @@
 <template>
-  <div class="box box-demo">
-    <slot name="component"></slot>
-    <div class="box-demo-description">
+  <section :class="['code-box', isOpen ? 'expand': '']">
+    <section class="code-box-demo">
+      <slot name="component"></slot>
+    </section>
+    <section class="code-box-meta markdown">
       <slot v-if="lang === 'cn'" name="description"></slot>
       <slot v-else name="us-description"></slot>
       <span class="btn-toggle" :class="{open: isOpen}" @click="toggle"><i class="anticon anticon-down-circle-o"></i></span>
-    </div>
+    </section>
     <transition appear :css="false" @enter="enter" @leave="leave">
-      <div class="box-demo-code" v-show="isOpen">
+      <section class="highlight-wrapper" style="position: relative;" v-show="isOpen">
+        <a-tooltip
+          :title="copied ? '复制成功' : '复制代码'"
+          :visible="copyTooltipVisible"
+          @change="onCopyTooltipVisibleChange"
+        >
+          <a-icon
+            :type="copied && copyTooltipVisible ? 'check' : 'copy'"
+            class="code-box-code-copy"
+            v-clipboard:copy="sourceCode"
+            v-clipboard:success="handleCodeCopied"
+          />
+        </a-tooltip>
         <slot name="code"></slot>
-      </div>
+      </section>
     </transition>
-  </div>
+  </section>
 </template>
 <script>
 import animate from 'antd/_util/openAnimation'
+import BaseMixin from 'antd/_util/BaseMixin'
 export default {
+  mixins: [BaseMixin],
   name: 'demoBox',
   props: {
     jsfiddle: Object,
   },
   data () {
     const { lang } = this.$route.params
+    const { html, script, style } = this.jsfiddle
+    let sourceCode = `<template>${html}</template>\n`
+    sourceCode = script ? sourceCode + '\<script>' + script + '<\/script>' : sourceCode
+    sourceCode = style ? sourceCode + '\<style>' + style + '<\/style>' : sourceCode
     return {
       isOpen: false,
       lang,
+      copied: false,
+      copyTooltipVisible: false,
+      sourceCode,
     }
   },
   methods: {
+    test () {
+      console.log(122)
+    },
     toggle () {
       this.isOpen = !this.isOpen
     },
     enter: animate.enter,
     leave: animate.leave,
+    handleCodeCopied () {
+      this.setState({ copied: true })
+    },
+
+    onCopyTooltipVisibleChange (visible) {
+      if (visible) {
+        this.setState({
+          copyTooltipVisible: visible,
+          copied: false,
+        })
+        return
+      }
+      this.setState({
+        copyTooltipVisible: visible,
+      })
+    },
   },
 }
 </script>
diff --git a/examples/components/md.vue b/examples/components/md.vue
index 69f224258..daca17574 100644
--- a/examples/components/md.vue
+++ b/examples/components/md.vue
@@ -1,5 +1,5 @@
 <template>
-  <div v-html="marked(text)" />
+  <div v-html="marked(text)" class="markdown" />
 </template>
 <script>
 import marked from 'marked'
@@ -16,16 +16,17 @@ marked.setOptions({
 export default {
   name: 'md',
   props: {
-    md: [Object, String],
+    cn: String,
+    us: String,
   },
   data () {
     const { lang } = this.$route.params
     let text = ''
-    const md = this.md
+    const { cn, us } = this
     if (this.$slots.default && this.$slots.default[0] && this.$slots.default[0].text) {
       text = this.$slots.default[0].text
     } else {
-      text = typeof md === 'string' ? md : (md[lang] || md.us)
+      text = lang === 'cn' ? cn : us
     }
     text = text || ''
     text = text.split('\n').map(t => t.trim()).join('\n')
diff --git a/examples/demo.js b/examples/demo.js
index 146be99d1..e988c0642 100644
--- a/examples/demo.js
+++ b/examples/demo.js
@@ -5,6 +5,7 @@ export { default as button } from 'antd/button/demo/index.vue'
 export { default as card } from 'antd/card/demo/index.vue'
 export { default as checkbox } from 'antd/checkbox/demo/index.vue'
 export { default as grid } from 'antd/grid/demo/index.vue'
+export { default as icon } from 'antd/icon/demo/index.vue'
 export { default as input } from 'antd/input/demo/index.vue'
 export { default as menu } from 'antd/menu/demo/index.vue'
 export { default as pagination } from 'antd/pagination/demo/index.vue'
diff --git a/examples/index.js b/examples/index.js
index eedb7bf31..905f09e51 100644
--- a/examples/index.js
+++ b/examples/index.js
@@ -3,11 +3,14 @@ import './index.less'
 import 'highlight.js/styles/solarized-light.css'
 import Vue from 'vue'
 import VueRouter from 'vue-router'
+import VueClipboard from 'vue-clipboard2'
 import routes from './routes'
 import Md from './components/md'
 import Api from './components/api'
 import * as Components from '../components/index'
 import demoBox from './components/demoBox'
+
+Vue.use(VueClipboard)
 Vue.use(VueRouter)
 Vue.component(Md.name, Md)
 Vue.component(Api.name, Api)
diff --git a/examples/index.less b/examples/index.less
index 5d0bfa082..a725b3921 100644
--- a/examples/index.less
+++ b/examples/index.less
@@ -1,3 +1,4 @@
+@import './theme/static/index.less';
 .site {
   display: flex;
   .nav {
@@ -5,123 +6,48 @@
   }
   .content {
     flex: 1;
-    padding: 20px;
   }
 }
-.highlight > .code-section {
+
+.api-container table {
+  border-collapse: collapse;
+  border-spacing: 0;
+  empty-cells: show;
+  border: 1px solid @site-border-color-split;
+  width: 100%;
+  margin: 8px 0 16px;
+}
+
+.api-container table th {
+  white-space: nowrap;
+  color: #5c6b77;
+  font-weight: 500;
+  background: rgba(0, 0, 0, 0.02);
+}
+
+.api-container table th,
+.api-container table td {
+  border: 1px solid @site-border-color-split;
+  padding: 16px 24px;
+  text-align: left;
+}
+.code-box .highlight-wrapper {
   display: block;
-  margin: 0;
 }
-
-.main-wrapper {
+.code-box-meta > h4 {
+  position: absolute;
+  top: -14px;
+  padding: 1px 8px;
+  margin-left: -8px;
+  color: #777;
+  border-radius: 2px 2px 0 0;
   background: #fff;
-  width: 92%;
-  margin: 0 auto;
-  border-radius: 4px;
-  overflow: hidden;
-  padding: 24px 0 0;
-  margin-bottom: 24px;
-  position: relative;
-}
-
-.main-container {
-  padding: 0 6% 120px 4% !important;
-  margin-left: -1px;
-  min-height: 500px;
-  border-left: 1px solid #e9e9e9;
-}
-
-.page-container {
   font-size: 14px;
-  line-height: 1.5;
-
-  .table {
-      font-size: 13px;
-      border-collapse: collapse;
-      border-spacing: 0;
-      empty-cells: show;
-      border: 1px solid #e9e9e9;
-      width: 100%;
-      margin: 16px 0;
-      th {
-          background: #f7f7f7;
-          white-space: nowrap;
-          color: #5c6b77;
-          font-weight: 600;
-      }
-      td:first-child {
-          background: #fcfcfc;
-          font-weight: 500;
-          width: 20%;
-          font-family: "Lucida Console", Consolas, Menlo, Courier, monospace;
-      }
-      th,td {
-          border: 1px solid #e9e9e9;
-          padding: 8px 16px;
-          text-align: left;
-      }
-  }
+  width: auto;
 }
-
-.code-boxes-col-2-1 {
-  display: inline-block;
-  vertical-align: top;
-  padding: 0 8px;
-}
-
-.aside-container {
-  padding-bottom: 50px;
-}
-
-.aside-container .ant-menu-item a, .aside-container .ant-menu-submenu-name span, .aside-container > .ant-menu-item {
-  font-size: 14px;
-  text-overflow: ellipsis;
-  overflow: hidden;
-}
-
-.header-anchor {
-  margin-left: -18px;
-}
-
-.markdown {
-  & > ul {
-      margin-top: 1rem;
-      margin-bottom: 1rem;
-      & > li {
-          list-style: circle;
-          margin-left: 1rem;
-      }
-  }
-  h1, h2, h3 {
-      a {
-          font-size: .8em;
-          opacity: 0;
-          font-weight: normal;
-          transition: opacity .2s ease-in-out;
-      }
-
-      &:hover a {
-          opacity: 1;
-      }
-  }
-  blockquote {
-      font-size: 90%;
-      color: #999;
-      border-left: 4px solid #e9e9e9;
-      padding-left: 0.8em;
-      margin: 1em 0;
-  }
-  code {
-      margin: 0;
-      background: #f7f7f7;
-      padding: .2em .4em;
-      border-radius: 3px;
-      font-size: .9em;
-      border: 1px solid #eee;
-  }
-
-  & > p, & > pre {
-      margin-top: 1rem;
-      margin-bottom: 1rem;
-  }
+.code-box-code-copy {
+  opacity: 1;
+  position: absolute;
+  right: 15px;
+  top: 10px;
 }
diff --git a/examples/theme/static/colors.less b/examples/theme/static/colors.less
new file mode 100644
index 000000000..271da99f4
--- /dev/null
+++ b/examples/theme/static/colors.less
@@ -0,0 +1,170 @@
+/* stylelint-disable no-duplicate-selectors */
+.color-palettes {
+  margin: 0 1%;
+}
+.color-palette {
+  margin: 45px 1%;
+  width: 31%;
+  display: inline-block;
+  &-pick {
+    text-align: center;
+    font-size: 20px;
+    margin-bottom: 8px;
+  }
+  &-picker {
+    margin: 12px 0 24px;
+    &-value {
+      font-size: 13px;
+      font-family: Consolas;
+    }
+  }
+}
+
+.main-color {
+  text-align: left;
+  &-item {
+    cursor: pointer;
+    height: 44px;
+    line-height: 44px;
+    padding: 0 12px;
+    margin-right: 4px;
+    transition: all .2s;
+    position: relative;
+    font-family: Consolas;
+    font-size: 14px;
+    &:first-child {
+      border-radius: 4px 4px 0 0;
+    }
+    &:last-child {
+      border-radius: 0 0 4px 4px;
+    }
+    &:hover {
+      margin-right: -8px;
+      border-radius: 0 4px 4px 0;
+    }
+  }
+  &-item &-text {
+    transition: all .3s;
+    float: left;
+  }
+  &-item &-value {
+    float: right;
+    transform: scale(0.85);
+    transform-origin: 100% 50%;
+    opacity: 0;
+    position: relative;
+    left: 3px;
+    transition: all .3s;
+  }
+}
+
+.color-title {
+  margin: 0 0 24px;
+  font-weight: 500;
+  color: #5c6b77;
+  font-size: 22px;
+  text-transform: capitalize;
+  text-align: center;
+}
+
+.color-description {
+  font-size: 14px;
+  font-weight: lighter;
+  color: #777;
+  display: block;
+}
+
+.main-color:hover {
+  .main-color-value {
+    opacity: 0.7;
+    left: 0;
+  }
+}
+
+.color-palette-horizontal {
+  width: 100%;
+
+  .main-color {
+    display: flex;
+
+    &-item {
+      flex: 1;
+      position: relative;
+      padding: 0;
+      margin-right: 0;
+      border-radius: 0;
+      height: 86px;
+      text-align: center;
+      padding-top: 37px;
+      line-height: normal;
+
+      .main-color-text {
+        float: none;
+      }
+
+      &:hover {
+        margin-top: -10px;
+        height: 96px;
+        border-radius: 4px 4px 0 0;
+      }
+    }
+
+    &-value {
+      position: absolute;
+      text-align: center;
+      width: 100%;
+      left: 0;
+      bottom: 0;
+      float: none;
+      transform-origin: unset;
+    }
+
+    &:hover {
+      .main-color-item {
+        padding-top: 8px;
+      }
+
+      .main-color-value {
+        opacity: 0.7;
+        bottom: 8px;
+      }
+    }
+  }
+}
+
+.make-palatte(@color, @index: 1) when (@index <= 10) {
+  .palatte-@{color}-@{index} {
+    @background: "@{color}-@{index}";
+    background: @@background;
+  }
+  .make-palatte(@color, (@index + 1));    // next iteration
+}
+
+@grey-1: #fff;
+@grey-2: #fafafa;
+@grey-3: #f5f5f5;
+@grey-4: #e8e8e8;
+@grey-5: #d9d9d9;
+@grey-6: #bfbfbf;
+@grey-7: #8c8c8c;
+@grey-8: #595959;
+@grey-9: #262626;
+@grey-10: #000;
+
+@border-color: rgba(229, 231, 235, 100);
+
+.main-color {
+  .make-palatte(blue);
+  .make-palatte(purple);
+  .make-palatte(cyan);
+  .make-palatte(green);
+  .make-palatte(magenta);
+  .make-palatte(red);
+  .make-palatte(volcano);
+  .make-palatte(orange);
+  .make-palatte(gold);
+  .make-palatte(yellow);
+  .make-palatte(lime);
+  .make-palatte(geekblue);
+  .make-palatte(grey);
+}
diff --git a/examples/theme/static/common.less b/examples/theme/static/common.less
new file mode 100644
index 000000000..0f63a7709
--- /dev/null
+++ b/examples/theme/static/common.less
@@ -0,0 +1,132 @@
+html,
+body {
+  height: 100%;
+}
+
+body {
+  font-family: @font-family;
+  line-height: 1.5;
+  color: @site-text-color;
+  font-size: 14px;
+  background: #fff;
+  transition: background 1s cubic-bezier(0.075, 0.82, 0.165, 1);
+  overflow-x: hidden;
+}
+
+a {
+  transition: color .3s ease;
+  &:focus {
+    text-decoration: underline;
+    text-decoration-skip: ink;
+  }
+}
+
+.main-wrapper {
+  background: #fff;
+  padding: 40px 0 0;
+  position: relative;
+}
+
+.main-container {
+  padding: 0 170px 144px 64px;
+  background: #fff;
+  min-height: 500px;
+  overflow: hidden;
+  border-left: 1px solid @site-border-color-split;
+  position: relative;
+  margin-left: -1px;
+}
+
+.main-menu {
+  z-index: 1;
+}
+
+.aside-container {
+  padding-bottom: 50px;
+  font-family: Lato, @font-family;
+
+  &.ant-menu-inline .ant-menu-submenu-title h4,
+  &.ant-menu-inline > .ant-menu-item,
+  &.ant-menu-inline .ant-menu-item a {
+    font-size: 14px;
+    text-overflow: ellipsis;
+    overflow: hidden;
+  }
+
+  &.ant-menu-inline .ant-menu-item-group-title {
+    padding-left: 56px;
+  }
+
+  a[disabled] {
+    color: #ccc;
+  }
+
+  .menu-item-link-outside {
+    position: relative;
+    .anticon {
+      font-size: 12px;
+      color: @primary-color;
+      opacity: 0;
+      position: absolute;
+      right: -10px;
+      top: 16px;
+      transition: all .3s;
+    }
+    &:hover .anticon {
+      opacity: 1;
+    }
+  }
+}
+
+.aside-container .chinese {
+  font-size: 12px;
+  margin-left: 6px;
+  font-weight: normal;
+  opacity: .67;
+}
+
+.outside-link {
+  display: inline-block;
+}
+
+.outside-link:after {
+  content: '\e691';
+  font-family: 'anticon';
+  margin-left: 5px;
+  font-size: 12px;
+  color: #aaa;
+}
+
+.outside-link.internal {
+  display: none;
+}
+
+// reset menu text color
+.menu-site .ant-menu-item > a {
+  color: @site-text-color;
+}
+
+.menu-site .ant-menu-item-selected > a,
+.menu-site .ant-menu-item > a:hover {
+  color: @primary-color;
+}
+
+#react-content {
+  transition: transform .3s @ease-in-out-circ;
+}
+.page-wrapper {
+  overflow: hidden;
+  padding: 0;
+  width: 100%;
+  a {
+    text-decoration: none;
+  }
+}
+
+.drawer-content {
+  padding: 40px 0;
+}
+
+.drawer {
+  z-index: 1029;
+}
diff --git a/examples/theme/static/demo.less b/examples/theme/static/demo.less
new file mode 100644
index 000000000..b9259641b
--- /dev/null
+++ b/examples/theme/static/demo.less
@@ -0,0 +1,261 @@
+.code-boxes-col-1-1 {
+  width: 100%;
+}
+
+.code-boxes-col-2-1 {
+  display: inline-block;
+  vertical-align: top;
+}
+
+.code-box {
+  border: 1px solid @site-border-color-split;
+  border-radius: @border-radius-sm;
+  display: inline-block;
+  width: 100%;
+  position: relative;
+  margin: 0 0 16px;
+  transition: all .2s;
+
+  &:target {
+    border: 1px solid @primary-color;
+  }
+
+  &-expand-trigger {
+    cursor: pointer;
+    font-size: 14px;
+    color: #9199ac;
+    margin-left: 5px;
+    opacity: .8;
+    transition: all .3s;
+    top: -2px;
+    position: relative;
+
+    &-active {
+      color: #3b4357;
+    }
+  }
+
+  &-title {
+    position: absolute;
+    top: -14px;
+    padding: 1px 8px;
+    margin-left: -8px;
+    color: #777;
+    border-radius: @border-radius-sm @border-radius-sm 0 0;
+    background: #fff;
+    transition: background-color .4s;
+
+    a,
+    a:hover {
+      color: @site-text-color;
+      font-size: @font-size-base;
+      font-weight: 500;
+    }
+  }
+
+  a.edit-button {
+    position: absolute;
+    right: -16px;
+    top: 7px;
+    font-size: 12px;
+    transform: scale(0.9);
+    background: #fff;
+    padding-right: 6px;
+    text-decoration: none;
+  }
+
+  &-demo {
+    border-bottom: 1px solid @site-border-color-split;
+    padding: 42px 24px 50px;
+    color: rgba(0, 0, 0, .65);
+  }
+
+  iframe {
+    width: 100%;
+    border: 0;
+  }
+
+  &-meta {
+    &.markdown {
+      position: relative;
+      padding: 18px 32px;
+      border-radius: 0 0 @border-radius-sm @border-radius-sm;
+      transition: background-color .4s;
+      width: 100%;
+      font-size: @font-size-base;
+    }
+
+    blockquote {
+      margin: 0;
+    }
+
+    h4,
+    section& p {
+      margin: 0;
+      width: 98%;
+    }
+
+    > p {
+      font-size: 12px;
+      margin: 0.5em 0;
+      padding-right: 25px;
+      width: 100%;
+      word-break: break-word;
+    }
+  }
+
+  &.expand &-meta {
+    border-radius: 0;
+    border-bottom: 1px dashed @site-border-color-split;
+  }
+
+  .code-expand-icon {
+    position: absolute;
+    right: 16px;
+    bottom: 23px;
+    cursor: pointer;
+    width: 16px;
+    height: 16px;
+    line-height: 16px;
+    text-align: center;
+  }
+
+  .code-expand-icon-show,
+  .code-expand-icon-hide {
+    transition: all 0.4s;
+    user-select: none;
+    position: absolute;
+    left: 0;
+    top: 0;
+    margin: 0;
+    max-width: 100%;
+    vertical-align: baseline;
+    box-shadow: none;
+  }
+
+  .code-expand-icon-show {
+    opacity: 0.55;
+    pointer-events: auto;
+    &:hover {
+      opacity: 1;
+    }
+  }
+
+  .code-expand-icon.ant-tooltip-open .code-expand-icon-show {
+    opacity: 1;
+  }
+
+  .code-expand-icon-hide {
+    opacity: 0;
+    pointer-events: none;
+  }
+
+  .highlight-wrapper {
+    display: none;
+    overflow: auto;
+    border-radius: 0 0 @border-radius-sm @border-radius-sm;
+
+    &-expand {
+      display: block;
+    }
+  }
+
+  .highlight {
+    position: relative;
+    pre {
+      margin: 0;
+      padding: 0;
+      background: #fff;
+    }
+    &:not(:first-child) {
+       border-top: 1px dashed @site-border-color-split;
+    }
+  }
+
+  &-actions {
+    position: absolute;
+    top: 10px;
+    right: 12px;
+    text-align: right;
+    > i,
+    > form {
+      display: inline-block;
+      margin-left: 8px;
+    }
+  }
+
+  &-code-copy {
+    font-size: 14px;
+    cursor: pointer;
+    color: @site-text-color-secondary;
+    transition: all .24s;
+    background: #fff;
+    width: 20px;
+    height: 20px;
+    line-height: 20px;
+    text-align: center;
+    border-radius: 20px;
+    opacity: 0;
+
+    &:hover {
+      color: @site-text-color-secondary;
+      transform: scale(1.2);
+    }
+    &.anticon-check {
+      color: @green-6 !important;
+      font-weight: bold;
+    }
+  }
+
+  &-codepen {
+    background: transparent url("https://gw.alipayobjects.com/zos/rmsportal/OtZslpOjYXijshDERXwc.svg") center / 14px no-repeat;
+    width: 20px;
+    height: 20px;
+    cursor: pointer;
+    opacity: 0;
+    transition: all .3s;
+    border: 0;
+    text-indent: -9999px;
+    overflow: hidden;
+  }
+
+  &-riddle {
+    background: transparent url("https://gw.alipayobjects.com/zos/rmsportal/DlHbxMCyeuyOrqOdbgik.svg") center / 14px no-repeat;
+    width: 20px;
+    height: 20px;
+    cursor: pointer;
+    opacity: 0;
+    transition: all .3s;
+    border: 0;
+    text-indent: -9999px;
+    overflow: hidden;
+  }
+
+  &-codesandbox {
+    background: transparent url("https://gw.alipayobjects.com/zos/rmsportal/aaYmtdDyHSCkXyLZVgGK.svg") center / 14px no-repeat;
+    width: 20px;
+    height: 20px;
+    cursor: pointer;
+    opacity: 0;
+    transition: all .3s;
+    border: 0;
+    text-indent: -9999px;
+    overflow: hidden;
+  }
+
+  .highlight-wrapper:hover &-code-copy,
+  .highlight-wrapper:hover &-codepen,
+  .highlight-wrapper:hover &-codesandbox,
+  .highlight-wrapper:hover &-riddle {
+    opacity: 1;
+  }
+
+  pre {
+    margin: 0;
+    width: auto;
+    code {
+      border: none;
+      background: #fff;
+    }
+  }
+}
diff --git a/examples/theme/static/docsearch.less b/examples/theme/static/docsearch.less
new file mode 100644
index 000000000..47b53d945
--- /dev/null
+++ b/examples/theme/static/docsearch.less
@@ -0,0 +1,22 @@
+.algolia-autocomplete {
+  .ds-dropdown-menu {
+    border: none;
+    box-shadow: @box-shadow-base;
+
+    [class^="ds-dataset-"] {
+      border: none;
+    }
+
+    &:before {
+      display: none;
+    }
+  }
+
+  .algolia-docsearch-suggestion--title {
+    color: @site-text-color;
+  }
+
+  .algolia-docsearch-suggestion--highlight {
+    color: @primary-color;
+  }
+}
diff --git a/examples/theme/static/footer.less b/examples/theme/static/footer.less
new file mode 100644
index 000000000..b8f16fbd8
--- /dev/null
+++ b/examples/theme/static/footer.less
@@ -0,0 +1,71 @@
+@import './colors';
+
+@padding-space: 144px;
+
+footer {
+  clear: both;
+  font-size: 14px;
+  background-color: #000;
+  position: relative;
+  z-index: 100;
+  color: rgba(255, 255, 255, 0.65);
+  box-shadow: 0 1000px 0 1000px #fff;
+  .ant-row {
+    text-align: center;
+    .footer-center {
+      display: inline-block;
+      text-align: left;
+      > h2 {
+        font-size: 16px;
+        margin: 0 auto 24px;
+        font-weight: 500;
+        position: relative;
+
+        > .title-icon {
+          width: 27px;
+          margin-right: 16px;
+        }
+        > .anticon {
+          font-size: 16px;
+          position: absolute;
+          left: -22px;
+          top: 3px;
+          color: #aaa;
+        }
+      }
+      > div {
+        margin: 12px 0;
+      }
+    }
+  }
+  .footer-wrap {
+    position: relative;
+    padding: 86px @padding-space 93px @padding-space;
+    border-bottom: 1px solid rgba(255, 255, 255, 0.25);
+  }
+  .bottom-bar {
+    text-align: right;
+    padding: 16px @padding-space;
+    margin: 0;
+    line-height: 32px;
+    overflow: hidden;
+    a {
+      color: rgba(255, 255, 255, 0.65);
+      &:hover {
+        color: #fff;
+      }
+    }
+    .translate-button {
+      text-align: left;
+    }
+  }
+  a {
+    color: rgba(255, 255, 255, 0.9);
+  }
+  h2 {
+    color: rgba(255, 255, 255, 1);
+    & > span {
+      color: rgba(255, 255, 255, 1);
+    }
+  }
+}
diff --git a/examples/theme/static/header.less b/examples/theme/static/header.less
new file mode 100644
index 000000000..174771cc9
--- /dev/null
+++ b/examples/theme/static/header.less
@@ -0,0 +1,144 @@
+@header-height: 64px;
+@menu-item-border: 2px;
+
+#header {
+  transition: all 0.3s;
+  background: #fff;
+  box-shadow: 0 2px 8px rgba(240, 241, 242, 65);
+  position: relative;
+  z-index: 10;
+  max-width: 100%;
+  &.home-nav-bottom {
+    background: rgba(255, 255, 255, 0.9);
+    border-bottom-color: #ebedee;
+    .search {
+      border-left-color: #ebedee;
+    }
+    a {
+      color: @site-text-color;
+    }
+  }
+
+  .header-link {
+    color: @site-text-color;
+  }
+
+  .ant-menu-item-active .header-link {
+    color: @primary-color;
+  }
+}
+
+#logo {
+  overflow: hidden;
+  padding-left: 40px;
+  float: left;
+  height: @header-height;
+  line-height: @header-height;
+  text-decoration: none;
+  white-space: nowrap;
+  img {
+    height: 32px;
+    margin-right: 16px;
+  }
+  img + img {
+    height: 16px;
+    position: relative;
+    top: 1px;
+  }
+}
+
+#search-box {
+  border-left: 1px solid @site-border-color-split;
+  float: left;
+  height: 22px;
+  line-height: 22px;
+  padding-left: 16px;
+  margin: 22px auto 0;
+}
+
+#search-box .anticon {
+  color: #ced4d9;
+  position: relative;
+  top: 0.5px;
+}
+
+#search-box input {
+  font-size: 14px;
+  margin-top: -5px;
+  width: 200px;
+  border: 0;
+  box-shadow: none;
+  background: transparent;
+
+  &::placeholder {
+    color: #a3b1bf;
+  }
+}
+
+.header-lang-button,
+.version {
+  float: right;
+  margin-top: 20px;
+  margin-left: 16px;
+}
+
+.header-lang-button {
+  color: @text-color;
+  border-color: @border-color-base;
+  margin-right: 40px;
+}
+
+#nav {
+  border: 0;
+  float: right;
+  font-size: 14px;
+  font-family: Lato, @font-family;
+  &.ant-menu-horizontal {
+    border-bottom: none;
+
+    & > .ant-menu-item {
+      height: @header-height;
+      line-height: @header-height - @menu-item-border - 2px;
+      min-width: 72px;
+      border-top: @menu-item-border solid transparent;
+
+      &:hover {
+        border-top: @menu-item-border solid @primary-color;
+        border-bottom: @menu-item-border solid transparent;
+      }
+    }
+
+    & > .ant-menu-item-selected {
+      border-top: @menu-item-border solid @primary-color;
+      border-bottom: @menu-item-border solid transparent;
+      a {
+        color: @primary-color;
+      }
+    }
+  }
+
+  & > .ant-menu-item {
+    text-align: center;
+  }
+}
+
+.component-select {
+  &.ant-select-dropdown {
+    border: 0;
+    border-radius: 0;
+    box-shadow: 0 0 8px rgba(0, 0, 0, 0.25);
+    font-size: 14px;
+  }
+  .ant-select-dropdown-menu {
+    max-height: 200px;
+  }
+  .ant-select-dropdown-menu-item {
+    border-radius: 0 !important;
+  }
+  .ant-component-decs {
+    font-size: 12px;
+    position: absolute;
+    color: #aaa;
+    right: 16px;
+  }
+}
diff --git a/examples/theme/static/highlight.less b/examples/theme/static/highlight.less
new file mode 100644
index 000000000..0866e387c
--- /dev/null
+++ b/examples/theme/static/highlight.less
@@ -0,0 +1,153 @@
+/**
+* prism.js default theme for JavaScript, CSS and HTML
+* Based on dabblet (http://dabblet.com)
+* @author Lea Verou
+*/
+
+pre code {
+ display: block;
+ background: white;
+ color: @site-text-color;
+ line-height: 2;
+ border: 1px solid #e9e9e9;
+ padding: 16px 32px;
+ border-radius: @border-radius-sm;
+ font-size: @font-size-base;
+ white-space: pre;
+ font-family: "Lucida Console", Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
+}
+
+code[class*="language-"],
+pre[class*="language-"] {
+  color: black;
+  background: none;
+  font-family: "Lucida Console", Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
+  direction: ltr;
+  text-align: left;
+  white-space: pre;
+  word-spacing: normal;
+  word-break: normal;
+  word-wrap: normal;
+  line-height: 1.5;
+
+  -moz-tab-size: 4;
+  -o-tab-size: 4;
+  tab-size: 4;
+
+  -webkit-hyphens: none;
+  -moz-hyphens: none;
+  -ms-hyphens: none;
+  hyphens: none;
+}
+
+pre[class*="language-"]::-moz-selection,
+pre[class*="language-"] ::-moz-selection,
+code[class*="language-"]::-moz-selection,
+code[class*="language-"] ::-moz-selection {
+  text-shadow: none;
+  background: #b3d4fc;
+}
+
+pre[class*="language-"]::selection,
+pre[class*="language-"] ::selection,
+code[class*="language-"]::selection,
+code[class*="language-"] ::selection {
+  text-shadow: none;
+  background: #b3d4fc;
+}
+
+@media print {
+  code[class*="language-"],
+  pre[class*="language-"] {
+      text-shadow: none;
+  }
+}
+
+/* Code blocks */
+pre[class*="language-"] {
+  padding: 12px 20px;
+  margin: 16px 0;
+  overflow: auto;
+}
+
+:not(pre) > code[class*="language-"],
+pre[class*="language-"] {
+  background: #f2f4f5;
+}
+
+/* Inline code */
+:not(pre) > code[class*="language-"] {
+  padding: .1em;
+  border-radius: .3em;
+  white-space: normal;
+}
+
+.token.comment,
+.token.prolog,
+.token.doctype,
+.token.cdata {
+  color: slategray;
+}
+
+.token.punctuation {
+  color: #999;
+}
+
+.namespace {
+  opacity: .7;
+}
+
+.token.property,
+.token.tag,
+.token.boolean,
+.token.number,
+.token.constant,
+.token.symbol,
+.token.deleted {
+  color: #f81d22;
+}
+
+.token.selector,
+.token.attr-name,
+.token.string,
+.token.char,
+.token.builtin,
+.token.inserted {
+  color: #0b8235;
+}
+
+.token.operator,
+.token.entity,
+.token.url,
+.language-css .token.string,
+.style .token.string {
+  color: #0b8235;
+}
+
+.token.atrule,
+.token.attr-value,
+.token.keyword {
+  color: #008dff;
+}
+
+.token.function {
+  color: #f81d22;
+}
+
+.token.regex,
+.token.important,
+.token.variable {
+  color: #e90;
+}
+
+.token.important,
+.token.bold {
+  font-weight: bold;
+}
+.token.italic {
+  font-style: italic;
+}
+
+.token.entity {
+  cursor: help;
+}
diff --git a/examples/theme/static/home.less b/examples/theme/static/home.less
new file mode 100644
index 000000000..239064832
--- /dev/null
+++ b/examples/theme/static/home.less
@@ -0,0 +1,366 @@
+@home-bg-color: #2f54eb;
+@home-text-color: #314659;
+
+.home-page-wrapper {
+  width: 100%;
+  padding: 0;
+  overflow: hidden;
+  position: relative; // will-change: transform;
+  color: @home-text-color;
+  font-family: Avenir, @font-family;
+  .page {
+    width: 100%;
+    max-width: 1200px;
+    margin: auto;
+    position: relative;
+    padding: 0 24px;
+    h2 {
+      font-size: 38px;
+      line-height: 46px;
+      color: @home-text-color;
+      text-align: center;
+      font-weight: 400;
+      margin: 140px auto 100px;
+    }
+    h1,
+    h2,
+    h3,
+    h4,
+    p {
+      will-change: transform;
+    }
+  }
+}
+
+.banner-bg {
+  &-wrapper {
+    width: 100%;
+    height: 100%;
+    position: absolute;
+    top: 0;
+    left: 0;
+    overflow: hidden;
+  }
+  width: 120%;
+  height: 200px;
+  background: @home-bg-color;
+  position: absolute;
+  bottom: -200px;
+  left: 0%;
+  transform-origin: 0;
+  transform: rotate(-4deg);
+}
+
+.banner {
+  display: flex;
+  align-items: center;
+  height: 576px;
+  &-wrapper {
+    overflow: initial;
+    position: relative;
+    z-index: 1;
+  }
+  .text-wrapper {
+    width: 54%;
+    max-width: 560px;
+    min-height: 336px;
+    color: #0d1a26;
+    > * {
+      will-change: transform;
+    }
+    h1 {
+      font-size: 68px;
+      font-weight: 600;
+      line-height: 76px;
+      margin: 8px 0 28px;
+      letter-spacing: 0;
+      font-family: Avenir, @font-family;
+    }
+    p {
+      font-size: 20px;
+      line-height: 40px;
+      color: @home-text-color;
+    }
+  }
+
+  .img-wrapper {
+    width: 46%;
+    max-width: 482px;
+    position: absolute;
+    right: 0;
+    bottom: 26px;
+  }
+
+  .banner-btns {
+    display: flex;
+    align-items: center;
+    margin-top: 24px;
+  }
+
+  .banner-btn {
+    padding: 0 24px;
+    border-radius: 100px;
+    font-size: 16px;
+    line-height: 38px;
+    display: inline-block;
+    height: 40px;
+    text-align: center;
+    margin-right: 16px;
+    text-decoration: none;
+    border: 1px solid #2f54eb;
+  }
+
+  .banner-btn.components {
+    background: #2f54eb;
+    color: #fff;
+  }
+
+  .banner-btn.language {
+    color: #2f54eb;
+  }
+}
+
+svg {
+  display: block;
+  g {
+    transform-origin: 50%;
+    transform-box: fill-box;
+  }
+}
+
+/** page1 **/
+
+.page1 {
+  min-height: 784px;
+  background: @home-bg-color;
+  background: linear-gradient(to bottom, rgba(47, 84, 235, 1) 0%, rgba(58, 64, 212, 1) 100%);
+  h2 {
+    color: #fff !important;
+  }
+  &-block {
+    max-width: 160px;
+    text-align: center;
+    margin: auto;
+    display: block;
+    position: relative;
+    z-index: 1;
+    h3 {
+      color: #fff;
+      font-size: 20px;
+      font-weight: 400;
+    }
+    p {
+      color: #fff;
+    }
+    &:hover .page1-image {
+      transform: translateY(-4px);
+      box-shadow: 0 6px 10px rgba(5, 26, 180, .35);
+    }
+  }
+  &-image {
+    width: 120px;
+    height: 120px;
+    background: #fff;
+    border-radius: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin: 46px auto 40px;
+    transition: transform .45s @ease-out, box-shadow .45s @ease-out;
+    img {
+      display: block;
+    }
+  }
+  &-point-wrapper {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    margin: auto;
+    overflow: inherit !important;
+  }
+}
+
+/** page2 **/
+
+.page2 {
+  background: #eff3f6;
+  min-height: 1110px;
+  overflow: initial;
+  padding-top: 1px;
+  .page {
+    position: relative;
+    z-index: 1;
+    h2 {
+      margin-bottom: 142px;
+    }
+  }
+  &-content {
+    box-shadow: 0 12px 20px #d8e0e6;
+    background: @home-bg-color;
+  }
+  &-components,
+  &-product {
+    min-height: 554px;
+  }
+  &-components {
+    position: initial;
+    background: @home-bg-color;
+    padding: 56px;
+    color: #fff;
+    line-height: 32px;
+    h3 {
+      font-size: 28px;
+      margin: 0 auto 32px;
+      color: #fff;
+    }
+    .components-button-wrapper {
+      position: absolute;
+      bottom: 48px;
+      left: 56px;
+      a {
+        display: block;
+        color: #fff;
+        line-height: 1.5em;
+        margin-top: 16px;
+      }
+    }
+  }
+  &-product {
+    background: #fff;
+    padding: 48px 56px;
+    .product-block {
+      margin-bottom: 34px;
+      cursor: pointer;
+      color: @home-text-color;
+      &:last-child {
+        margin-bottom: 0;
+        .block-text-wrapper {
+          padding-bottom: 0;
+          border-bottom: none;
+        }
+      }
+      .block-text-wrapper {
+        padding-bottom: 35px;
+        position: relative;
+        border-bottom: 1px solid #ebedf0;
+        h4 {
+          font-size: 20px;
+          line-height: 28px;
+          margin-bottom: 8px;
+        }
+        p {
+          line-height: 24px;
+          margin-bottom: 24px;
+        }
+        .more {
+          display: inline-block;
+          line-height: 22px;
+          color: @home-bg-color;
+          vertical-align: top;
+          i {
+            font-size: 12px;
+            vertical-align: middle;
+          }
+        }
+      }
+      .block-image-wrapper {
+        height: 104px;
+        display: flex;
+        align-items: center;
+        img {
+          display: block;
+          max-width: 80%;
+        }
+        &.right {
+          float: right;
+          justify-content: flex-end;
+        }
+      }
+      &:hover {
+        h4 {
+          color: @home-bg-color;
+        }
+      }
+    }
+  }
+}
+
+.parallax-bg {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 2;
+  pointer-events: none;
+  &.bottom {
+    z-index: 0;
+  }
+  &.top {
+    margin-top: 220px;
+    display: flex;
+    justify-content: center;
+    svg {
+      overflow: inherit;
+    }
+  }
+}
+
+/** page3 **/
+
+.page3 {
+  min-height: 556px;
+  &-block {
+    padding: 24px 12px;
+    a {
+      display: flex;
+      justify-content: center;
+      color: @home-text-color;
+      text-decoration: none;
+    }
+    &:hover {
+      h3 {
+        color: @home-bg-color;
+      }
+    }
+  }
+  &-img-wrapper,
+  &-text-wrapper {
+    display: inline-block;
+  }
+  &-text-wrapper {
+    // max-width: 182px;
+    margin-left: 32px;
+    line-height: 24px;
+    margin-top: 2px;
+    h3 {
+      font-size: 20px;
+      line-height: 28px;
+      margin-bottom: 4px;
+    }
+  }
+  .parallax-bg.top {
+    margin: 0;
+  }
+}
+
+/** video **/
+
+.new-version-video {
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: 9999;
+  width: 100vw;
+  height: 100vh;
+  background: #fbfbfb;
+  .vidoe-wrap {
+    background: url('https://gw.alipayobjects.com/zos/rmsportal/gEeRuETmbpAYRaeilexm.jpg') repeat-x;
+    background-size: cover;
+    width: 100%;
+    video {
+      display: block;
+    }
+  }
+}
diff --git a/examples/theme/static/icons.less b/examples/theme/static/icons.less
new file mode 100644
index 000000000..4297c7a35
--- /dev/null
+++ b/examples/theme/static/icons.less
@@ -0,0 +1,66 @@
+ul.anticons-list {
+  margin: 40px 0;
+  list-style: none;
+  overflow: hidden;
+  li {
+    float: left;
+    width: 16.66%;
+    text-align: center;
+    list-style: none;
+    cursor: pointer;
+    height: 100px;
+    color: #555;
+    transition: all .3s;
+    position: relative;
+    margin: 3px 0;
+    border-radius: 4px;
+    background-color: #fff;
+    overflow: hidden;
+    padding: 10px 0 0;
+
+    .anticon {
+      font-size: 24px;
+      margin: 12px 0 16px;
+      transition: all .3s;
+    }
+
+    .anticon-class {
+      display: block;
+      text-align: center;
+      transform: scale(0.83);
+      font-family: "Lucida Console", Consolas;
+      white-space: nowrap;
+    }
+
+    &:hover {
+      background-color: @primary-color;
+      color: #fff;
+      .anticon {
+        transform: scale(1.4);
+      }
+    }
+
+    &.copied:hover {
+      color: rgba(255, 255, 255, 0.2);
+    }
+
+    &:after {
+      position: absolute;
+      top: 0;
+      left: 0;
+      height: 100%;
+      width: 100%;
+      content: "Copied!";
+      text-align: center;
+      line-height: 110px;
+      color: #fff;
+      transition: all 0.3s cubic-bezier(0.18, 0.89, 0.32, 1.28);
+      opacity: 0;
+    }
+
+    &.copied:after {
+      opacity: 1;
+      top: -10px;
+    }
+  }
+}
diff --git a/examples/theme/static/index.less b/examples/theme/static/index.less
new file mode 100644
index 000000000..07b643d90
--- /dev/null
+++ b/examples/theme/static/index.less
@@ -0,0 +1,22 @@
+@import '../../../components/style/v2-compatible-reset.less';
+@import '../../../components/style/themes/default.less';
+@import './common';
+@import './header';
+@import './footer';
+@import './home';
+@import './page-nav';
+@import './markdown';
+@import './resource';
+@import './preview-img';
+@import './toc';
+@import './not-found';
+@import './highlight';
+@import './demo';
+@import './colors';
+@import './icons';
+@import './mock-browser';
+@import './new-version-info-modal';
+@import './motion';
+@import './responsive';
+@import './theme';
+@import './docsearch';
diff --git a/examples/theme/static/markdown.less b/examples/theme/static/markdown.less
new file mode 100644
index 000000000..76970bb45
--- /dev/null
+++ b/examples/theme/static/markdown.less
@@ -0,0 +1,325 @@
+.markdown {
+  color: @site-text-color;
+  font-size: 14px;
+  line-height: 2;
+}
+
+.highlight {
+  line-height: 1.5;
+}
+
+.markdown img {
+  max-width: ~"calc(100% - 32px)";
+}
+
+.markdown p > img {
+  margin: 34px 0;
+  box-shadow: 0 8px 20px rgba(143, 168, 191, 0.35);
+}
+
+.markdown h1 {
+  color: @site-heading-color;
+  font-weight: 500;
+  margin-bottom: 20px;
+  margin-top: 8px;
+  font-family: Lato, @font-family;
+  font-size: 30px;
+  line-height: 38px;
+
+  .subtitle {
+    margin-left: 12px;
+  }
+}
+
+.markdown h2 {
+  font-size: 24px;
+  line-height: 32px;
+}
+
+.markdown h2,
+.markdown h3,
+.markdown h4,
+.markdown h5,
+.markdown h6 {
+  color: @site-heading-color;
+  font-family: Lato, @font-family;
+  margin: 1.6em 0 0.6em;
+  font-weight: 500;
+  clear: both;
+}
+
+.markdown h3 { font-size: 18px; }
+.markdown h4 { font-size: 16px; }
+.markdown h5 { font-size: 14px; }
+.markdown h6 { font-size: 12px; }
+
+.markdown hr {
+  height: 1px;
+  border: 0;
+  background: @site-border-color-split;
+  margin: 72px 0;
+  clear: both;
+}
+
+.markdown p,
+.markdown pre {
+  margin: 1em 0;
+}
+
+.markdown ul > li {
+  list-style-type: circle;
+  margin-left: 20px;
+  padding-left: 4px;
+  &:empty {
+    display: none;
+  }
+}
+
+.markdown ol > li {
+  list-style-type: decimal;
+  margin-left: 20px;
+  padding-left: 4px;
+}
+
+.markdown ul > li > p,
+.markdown ol > li > p {
+  margin: 0.2em 0;
+}
+
+.markdown code {
+  margin: 0 1px;
+  background: #f2f4f5;
+  padding: .2em .4em;
+  border-radius: 3px;
+  font-size: .9em;
+  border: 1px solid #eee;
+}
+
+.markdown pre {
+  border-radius: @border-radius-sm;
+  background: #f2f4f5;
+  font-family: "Lucida Console", Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
+}
+
+.markdown pre code {
+  border: none;
+  background: #f2f4f5;
+  margin: 0;
+  padding: 0;
+  font-size: @font-size-base - 1px;
+  color: @site-text-color;
+  overflow: auto;
+}
+
+.markdown strong,
+.markdown b {
+  font-weight: 500;
+}
+
+.markdown > table {
+  border-collapse: collapse;
+  border-spacing: 0;
+  empty-cells: show;
+  border: 1px solid @site-border-color-split;
+  width: 100%;
+  margin: 8px 0 16px;
+}
+
+.markdown > table th {
+  white-space: nowrap;
+  color: #5c6b77;
+  font-weight: 500;
+  background: rgba(0, 0, 0, 0.02);
+}
+
+.markdown > table th,
+.markdown > table td {
+  border: 1px solid @site-border-color-split;
+  padding: 16px 24px;
+  text-align: left;
+}
+
+.markdown blockquote {
+  font-size: 90%;
+  color: @site-text-color-secondary;
+  border-left: 4px solid @site-border-color-split;
+  padding-left: 0.8em;
+  margin: 1em 0;
+}
+
+.markdown blockquote p {
+  margin: 0;
+}
+
+.markdown .anchor {
+  opacity: 0;
+  transition: opacity 0.3s ease;
+  margin-left: 8px;
+}
+
+.markdown .waiting {
+  color: #ccc;
+  cursor: not-allowed;
+}
+
+.markdown a.edit-button {
+  line-height: 12px;
+  display: inline-block;
+  margin-left: 10px;
+  height: 12px;
+  text-decoration: none;
+  font-weight: 400;
+
+  i {
+    color: @site-text-color-secondary;
+
+    &:hover {
+      color: @primary-color;
+    }
+  }
+
+  .anticon {
+    display: block;
+    font-size: 16px;
+  }
+}
+
+.markdown h1:hover .anchor,
+.markdown h2:hover .anchor,
+.markdown h3:hover .anchor,
+.markdown h4:hover .anchor,
+.markdown h5:hover .anchor,
+.markdown h6:hover .anchor {
+  opacity: 1;
+  display: inline-block;
+}
+
+.markdown > br,
+.markdown > p > br {
+  clear: both;
+}
+
+.markdown.api-container table {
+  font-size: @font-size-base;
+  line-height: @line-height-base;
+  td:first-child {
+    font-weight: 500;
+    width: 20%;
+    font-family: "Lucida Console", Consolas, Menlo, Courier, monospace;
+  }
+  td:nth-child(3) {
+    width: 22%;
+    font-size: 12px;
+    font-family: "Lucida Console", Consolas, Menlo, Courier, monospace;
+  }
+  td:last-child {
+    width: 13%;
+    font-size: 12px;
+    font-family: "Lucida Console", Consolas, Menlo, Courier, monospace;
+  }
+}
+
+.grid-demo,
+[id^="components-grid-demo-"] {
+  .demo-row,
+  .code-box-demo .demo-row {
+    background-image: linear-gradient(90deg, #f5f5f5 4.16666667%, transparent 4.16666667%, transparent 8.33333333%, #f5f5f5 8.33333333%, #f5f5f5 12.5%, transparent 12.5%, transparent 16.66666667%, #f5f5f5 16.66666667%, #f5f5f5 20.83333333%, transparent 20.83333333%, transparent 25%, #f5f5f5 25%, #f5f5f5 29.16666667%, transparent 29.16666667%, transparent 33.33333333%, #f5f5f5 33.33333333%, #f5f5f5 37.5%, transparent 37.5%, transparent 41.66666667%, #f5f5f5 41.66666667%, #f5f5f5 45.83333333%, transparent 45.83333333%, transparent 50%, #f5f5f5 50%, #f5f5f5 54.16666667%, transparent 54.16666667%, transparent 58.33333333%, #f5f5f5 58.33333333%, #f5f5f5 62.5%, transparent 62.5%, transparent 66.66666667%, #f5f5f5 66.66666667%, #f5f5f5 70.83333333%, transparent 70.83333333%, transparent 75%, #f5f5f5 75%, #f5f5f5 79.16666667%, transparent 79.16666667%, transparent 83.33333333%, #f5f5f5 83.33333333%, #f5f5f5 87.5%, transparent 87.5%, transparent 91.66666667%, #f5f5f5 91.66666667%, #f5f5f5 95.83333333%, transparent 95.83333333%);
+    overflow: hidden;
+    margin-bottom: 8px;
+  }
+  .ant-row-flex,
+  .code-box-demo .ant-row-flex {
+    background: #f5f5f5;
+  }
+  .ant-row > div,
+  .code-box-demo .ant-row > div,
+  .ant-row-flex > div,
+  .code-box-demo .ant-row-flex > div {
+    padding: 5px 0;
+    text-align: center;
+    border-radius: 0;
+    min-height: 30px;
+    margin-top: 8px;
+    margin-bottom: 8px;
+    color: #fff;
+  }
+  .code-box-demo .ant-row > div:not(.gutter-row),
+  .code-box-demo .ant-row-flex > div:not(.gutter-row) {
+    background: #00a0e9;
+    padding: 16px 0;
+    &:nth-child(2n+1) {
+      background: fade(#00a0e9, 70%);
+    }
+  }
+  .ant-row .demo-col,
+  .code-box-demo .ant-row .demo-col {
+    text-align: center;
+    padding: 30px 0;
+    color: #fff;
+    font-size: 18px;
+    border: none;
+    margin-top: 0;
+    margin-bottom: 0;
+  }
+  .ant-row .demo-col-1,
+  .ant-row .demo-col-1 {
+    background: fade(#00a0e9, 70%);
+  }
+  .ant-row .demo-col-2,
+  .code-box-demo .ant-row .demo-col-2 {
+    background: fade(#00a0e9, 50%);
+  }
+  .ant-row .demo-col-3,
+  .code-box-demo .ant-row .demo-col-3 {
+    background: rgba(255, 255, 255, 0.2);
+    color: #999;
+  }
+  .ant-row .demo-col-4,
+  .code-box-demo .ant-row .demo-col-4 {
+    background: fade(#00a0e9, 60%);
+  }
+  .ant-row .demo-col-5,
+  .code-box-demo .ant-row .demo-col-5 {
+    background: rgba(255, 255, 255, 0.5);
+    color: #999;
+  }
+  .code-box-demo .height-100 {
+    height: 100px;
+    line-height: 100px;
+  }
+  .code-box-demo .height-50 {
+    height: 50px;
+    line-height: 50px;
+  }
+  .code-box-demo .height-120 {
+    height: 120px;
+    line-height: 120px;
+  }
+  .code-box-demo .height-80 {
+    height: 80px;
+    line-height: 80px;
+  }
+}
+
+// For Changelog
+.markdown ul.ant-timeline {
+  line-height: 2;
+  li.ant-timeline-item {
+    list-style: none;
+    margin: 0;
+    padding: 0 0 30px;
+    .ant-timeline-item-content {
+      font-size: 14px;
+      padding-left: 32px;
+      position: relative;
+      top: -14px;
+      > h2 {
+        margin-top: 0;
+        padding-top: 2px;
+      }
+    }
+  }
+  li.ant-timeline-item:first-child {
+    margin-top: 40px;
+  }
+}
diff --git a/examples/theme/static/mock-browser.less b/examples/theme/static/mock-browser.less
new file mode 100644
index 000000000..3350cca41
--- /dev/null
+++ b/examples/theme/static/mock-browser.less
@@ -0,0 +1,53 @@
+/* Browser mockup code
+ * Contribute: https://gist.github.com/jarthod/8719db9fef8deb937f4f
+ * Live example: https://updown.io
+ */
+
+.browser-mockup {
+  border-top: 2em solid rgba(230, 230, 230, 0.7);
+  box-shadow: 0 0.1em 0.5em 0 rgba(0, 0, 0, 0.28);
+  position: relative;
+  border-radius: 3px 3px 0 0;
+}
+
+.browser-mockup:before {
+  display: block;
+  position: absolute;
+  content: '';
+  top: -1.25em;
+  left: 1em;
+  width: 0.5em;
+  height: 0.5em;
+  border-radius: 50%;
+  background-color: #f44;
+  box-shadow: 0 0 0 2px #f44, 1.5em 0 0 2px #9b3, 3em 0 0 2px #fb5;
+}
+
+.browser-mockup.with-tab:after {
+  display: block;
+  position: absolute;
+  content: '';
+  top: -2em;
+  left: 5.5em;
+  width: 20%;
+  height: 0;
+  border-bottom: 2em solid white;
+  border-left: 0.8em solid transparent;
+  border-right: 0.8em solid transparent;
+}
+
+.browser-mockup.with-url:after {
+  display: block;
+  position: absolute;
+  content: '';
+  top: -1.6em;
+  left: 5.5em;
+  width: ~"calc(100% - 6em)";
+  height: 1.2em;
+  border-radius: 2px;
+  background-color: white;
+}
+
+.browser-mockup > * {
+  display: block;
+}
diff --git a/examples/theme/static/motion.less b/examples/theme/static/motion.less
new file mode 100644
index 000000000..7d3ac6884
--- /dev/null
+++ b/examples/theme/static/motion.less
@@ -0,0 +1,39 @@
+.motion-container {
+  height: 190px;
+  line-height: 190px;
+  text-align: center;
+  margin: 40px 0 20px;
+}
+
+.motion-example {
+  width: 180px;
+  height: 180px;
+  line-height: 180px;
+  font-size: 18px;
+  color: #fff;
+  text-align: center;
+  display: inline-block !important;
+  border-radius: 8px;
+  animation-duration: 0.5s !important;
+  font-weight: bold;
+  background: url(https://gw.alipayobjects.com/zos/rmsportal/KDpgvguMpGfqaHPjicRK.svg) center/180px;
+}
+
+.motion-select-wrapper {
+  text-align: center;
+  margin-bottom: 40px;
+}
+
+.motion-select {
+  text-align: left;
+  width: 180px;
+}
+
+.video-player {
+  position: relative;
+  max-width: 800px;
+  &-right {
+    width: 616px;
+    float: right;
+  }
+}
diff --git a/examples/theme/static/new-version-info-modal.less b/examples/theme/static/new-version-info-modal.less
new file mode 100644
index 000000000..e8b044df6
--- /dev/null
+++ b/examples/theme/static/new-version-info-modal.less
@@ -0,0 +1,23 @@
+.new-version-info-modal {
+  img {
+    width: 100px;
+    position: absolute;
+    left: 34px;
+    top: 36px;
+  }
+  p {
+    margin-top: 1em;
+  }
+  .anticon {
+    display: none;
+  }
+  .ant-confirm-body {
+    .ant-confirm-title {
+      font-size: 18px;
+    }
+    margin-left: 120px;
+    .ant-confirm-content {
+      margin-left: 0;
+    }
+  }
+}
diff --git a/examples/theme/static/not-found.less b/examples/theme/static/not-found.less
new file mode 100644
index 000000000..51235ca8f
--- /dev/null
+++ b/examples/theme/static/not-found.less
@@ -0,0 +1,35 @@
+#page-404 {
+  background-image: url('https://os.alipayobjects.com/rmsportal/NOAjOBbnYCrNzrW.jpg');
+  width: 100%;
+  height: 100%;
+  background-repeat: no-repeat;
+  background-attachment: fixed;
+  background-position: center;
+  background-size: 100%;
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  z-index: 100;
+
+  section {
+    position: absolute;
+    top: 48%;
+    left: 55%;
+    margin: -103px 0 0 -120px;
+
+    text-align: center;
+  }
+
+  h1 {
+    color: @primary-color;
+    font-size: 120px;
+    font-weight: 500;
+  }
+
+  p {
+    color: @site-text-color;
+    font-size: 18px;
+  }
+}
diff --git a/examples/theme/static/nprogress.less b/examples/theme/static/nprogress.less
new file mode 100644
index 000000000..2bde8229c
--- /dev/null
+++ b/examples/theme/static/nprogress.less
@@ -0,0 +1,62 @@
+/* Make clicks pass-through */
+#nprogress {
+  pointer-events: none;
+}
+
+#nprogress .bar {
+  background: @primary-color;
+  position: fixed;
+  z-index: 1031;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 2px;
+  border-radius: 10px;
+}
+
+/* Fancy blur effect */
+#nprogress .peg {
+  display: block;
+  position: absolute;
+  right: 0;
+  width: 100px;
+  height: 100%;
+  box-shadow: 0 0 10px @primary-color, 0 0 5px @primary-color;
+  opacity: 1;
+  transform: rotate(3deg) translate(0, -4px);
+}
+
+/* Remove these to get rid of the spinner */
+#nprogress .spinner {
+  display: block;
+  position: fixed;
+  z-index: 1031;
+  top: 15px;
+  right: 15px;
+}
+
+#nprogress .spinner-icon {
+  width: 18px;
+  height: 18px;
+  box-sizing: border-box;
+  border: solid 2px transparent;
+  border-top-color: @primary-color;
+  border-left-color: @primary-color;
+  border-radius: 50%;
+  animation: nprogress-spinner 400ms linear infinite;
+}
+
+.nprogress-custom-parent {
+  overflow: hidden;
+  position: relative;
+}
+
+.nprogress-custom-parent #nprogress .spinner,
+.nprogress-custom-parent #nprogress .bar {
+  position: absolute;
+}
+
+@keyframes nprogress-spinner {
+  0% { transform: rotate(0deg); }
+  100% { transform: rotate(360deg); }
+}
diff --git a/examples/theme/static/page-nav.less b/examples/theme/static/page-nav.less
new file mode 100644
index 000000000..234df6b08
--- /dev/null
+++ b/examples/theme/static/page-nav.less
@@ -0,0 +1,61 @@
+.prev-next-nav {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  width: ~"calc(100% - 194px - 64px)";
+  margin-left: 64px;
+  font-size: 14px;
+  border-top: 1px solid @site-border-color-split;
+
+  > .prev-page,
+  > .next-page {
+    width: 50%;
+    float: left;
+    line-height: 72px;
+    height: 72px;
+    text-decoration: none;
+  }
+
+  > a.prev-page {
+    &:before {
+      font-family: 'anticon';
+      content: '\e61c';
+      font-size: 12px;
+      margin-right: 1em;
+      color: @site-text-color-secondary;
+      transition: all .3s;
+      position: relative;
+      left: 0;
+    }
+
+    &:hover:before {
+      color: @primary-color;
+      left: -3px;
+    }
+  }
+
+  > .next-page {
+    text-align: right;
+    float: right;
+
+    &:after {
+      font-family: 'anticon';
+      content: '\e61b';
+      font-size: 12px;
+      margin-left: 1em;
+      color: @site-text-color-secondary;
+      transition: all .3s;
+      position: relative;
+      right: 0;
+    }
+
+    &:hover:after {
+      color: @primary-color;
+      right: -3px;
+    }
+  }
+
+  .chinese {
+    margin-left: 0.5em;
+  }
+}
diff --git a/examples/theme/static/preview-img.less b/examples/theme/static/preview-img.less
new file mode 100644
index 000000000..05410b0dd
--- /dev/null
+++ b/examples/theme/static/preview-img.less
@@ -0,0 +1,159 @@
+.preview-image-boxes {
+  display: flex;
+  float: right;
+  margin: 0 0 70px 64px;
+  width: 496px;
+  clear: both;
+
+  &-with-carousel {
+    width: 420px;
+
+    .preview-image-box img {
+      padding: 0;
+    }
+  }
+}
+
+.preview-image-boxes + .preview-image-boxes {
+  margin-top: -35px;
+}
+
+.preview-image-box {
+  width: 100%;
+  float: left;
+}
+
+.preview-image-box + .preview-image-box {
+  margin-left: 24px;
+}
+
+.preview-image-wrapper {
+  background: #f2f4f5;
+  padding: 16px;
+  display: inline-block;
+  text-align: center;
+  width: 100%;
+  position: relative;
+}
+
+.preview-image-wrapper.video {
+  padding: 0;
+  background: 0;
+  display: block;
+}
+
+.preview-image-wrapper video {
+  width: 100%;
+  display: block;
+  + svg {
+    position: absolute;
+    top: 0;
+    left: 0;
+  }
+}
+
+.preview-image-wrapper.good:after {
+  content: '';
+  width: 100%;
+  height: 3px;
+  background: @primary-color;
+  display: block;
+  position: absolute;
+  bottom: 0;
+  left: 0;
+}
+
+.preview-image-wrapper.bad:after {
+  content: '';
+  width: 100%;
+  height: 3px;
+  background: @error-color;
+  display: block;
+  position: absolute;
+  bottom: 0;
+  left: 0;
+}
+
+.preview-image-title {
+  font-size: 12px;
+  margin-top: 5px;
+  color: @site-text-color;
+}
+
+.preview-image-description {
+  font-size: 12px;
+  margin-top: 2px;
+  color: @site-text-color-secondary;
+  line-height: 1.5;
+}
+
+.preview-image-description hr {
+  margin: 2px 0;
+  border: 0;
+  background: none;
+}
+
+.preview-image-box img {
+  cursor: pointer;
+  max-width: 100%;
+  transition: all .3s;
+  background: #fff;
+  padding: 12px;
+  border-radius: @border-radius-base;
+  &.no-padding {
+    padding: 0;
+    background: none;
+  }
+}
+
+.preview-image-boxes.preview-image-boxes-with-carousel img {
+  padding: 0;
+  box-shadow: 0 1px 0 0 #ddd, 0 3px 0 0 #fff, 0 4px 0 0 #ddd, 0 6px 0 0 #fff, 0 7px 0 0 #ddd;
+}
+
+.preview-image-box img:hover {
+  box-shadow: 1px 1px 6px rgba(0, 0, 0, 0.3);
+}
+
+.image-modal {
+  text-align: center;
+
+  &-container {
+    position: relative;
+    text-align: center;
+  }
+
+  .ant-carousel {
+    .slick-slider {
+      padding-bottom: 24px;
+      img {
+        display: inline;
+        max-width: 100%;
+      }
+    }
+    .slick-dots {
+      bottom: 4px;
+      li button {
+        background: #888;
+      }
+    }
+  }
+
+  .image-modal-single.slick-slider {
+    padding-bottom: 0;
+  }
+
+  .image-modal-single .slick-dots {
+    display: none !important;
+  }
+}
+
+.transition-video-player {
+  float: right;
+  padding: 0 0 70px 20px;
+  width: 600px;
+
+  .preview-image-wrapper {
+    padding: 0;
+  }
+}
diff --git a/examples/theme/static/resource.less b/examples/theme/static/resource.less
new file mode 100644
index 000000000..b8ec2ec1c
--- /dev/null
+++ b/examples/theme/static/resource.less
@@ -0,0 +1,71 @@
+.resource-cards {
+  display: flex;
+  flex-flow: wrap;
+  width: 100%;
+}
+
+.resource-card {
+  display: flex;
+  max-width: 420px;
+  width: ~"calc(50% - 24px)";
+  min-width: 300px;
+  height: 130px;
+  border: 1px solid @border-color-base;
+  border-radius: @border-radius-base;
+  font-size: 12px;
+  color: #777;
+  margin: 24px 24px 0 0;
+  vertical-align: middle;
+  transition: all 0.3s ease;
+  position: relative;
+  overflow: hidden;
+}
+
+.resource-card:hover {
+  box-shadow: 0 3px 8px #d3ddeb;
+  border-color: transparent;
+}
+
+.resource-card:hover .resource-card-title {
+  color: @primary-color;
+}
+
+.resource-card.disabled {
+  opacity: 0.45;
+  pointer-events: none;
+}
+
+.resource-card-cover, .resource-card-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  width: 130px;
+}
+
+.resource-card-cover img {
+  width: 68px;
+}
+
+.resource-card-content {
+  display: flex;
+  flex-flow: column;
+  justify-content: center;
+}
+
+.resource-card-title {
+  display: block;
+  font-size: 16px;
+  color: @site-text-color;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  line-height: 1.2;
+  margin-bottom: 6px;
+}
+
+.resource-card-description {
+  display: block;
+  color: #697b8c;
+  padding-right: 16px;
+}
diff --git a/examples/theme/static/responsive.less b/examples/theme/static/responsive.less
new file mode 100644
index 000000000..2ab70df8c
--- /dev/null
+++ b/examples/theme/static/responsive.less
@@ -0,0 +1,369 @@
+@import "../../../components/style/themes/default.less";
+
+.nav-phone-icon {
+  display: none;
+  position: absolute;
+  right: 30px;
+  top: 25px;
+  z-index: 1;
+  width: 16px;
+  height: 22px;
+  cursor: pointer;
+}
+
+@media only screen and (min-width: 1440px) and (max-width: 1599px) {
+  .main-wrapper > .ant-row > .ant-col-xl-5 {
+    width: 274px;
+  }
+
+  #header .ant-row .ant-col-xl-5 {
+    width: 274px;
+  }
+}
+
+@media only screen and (max-width: 1280px) {
+  .en-us #search-box {
+    display: none;
+  }
+}
+
+@media only screen and (max-width: @screen-xl) {
+  #search-box {
+    display: none;
+  }
+  #logo {
+    padding: 0 40px;
+  }
+  .banner-wrapper .banner-title-wrapper {
+    h1 {
+      font-size: 36px;
+    }
+    p {
+      font-size: 16px;
+    }
+  }
+}
+
+@media only screen and (max-width: 767.99px) {
+  #header {
+    text-align: center;
+    #logo {
+      float: initial;
+    }
+  }
+  #search-box {
+    display: none;
+  }
+  .code-boxes-col-2-1, .code-boxes-col-1-1 {
+    float: none;
+    width: 100%;
+  }
+  .preview-image-boxes {
+    margin: 0 !important;
+    float: none;
+    width: 100%;
+  }
+  .preview-image-box {
+    padding-left: 0;
+    margin: 10px 0;
+  }
+
+  .image-wrapper {
+    display: none;
+  }
+
+  div.version {
+    display: block;
+    margin: 29px auto 16px;
+  }
+
+  .popover-menu {
+    width: 300px;
+    div.version {
+      margin: 16px auto;
+    }
+    .ant-popover-inner {
+      overflow: hidden;
+      &-content {
+        padding: 0;
+        .ant-select {
+          width: 60%;
+          display: block;
+        }
+        .ant-btn {
+          margin: 16px 8% 0 8px;
+        }
+      }
+    }
+    #nav a.header-link {
+      color: #333;
+    }
+  }
+
+  ul#nav,
+  ul#nav li {
+    width: 100%;
+    font-size: 14px;
+  }
+
+  ul#nav li {
+    line-height: 40px;
+    height: 40px;
+    padding: 0 !important;
+    border: 0;
+    a {
+      color: #333;
+    }
+  }
+
+  .toc {
+    display: none;
+  }
+
+  .nav-phone-icon {
+    display: block;
+  }
+
+  .nav-phone-icon:before {
+    content: "";
+    display: block;
+    border-radius: 2px;
+    width: 16px;
+    height: 2px;
+    background: #777;
+    box-shadow: 0 6px 0 0 #777, 0 12px 0 0 #777;
+    position: absolute;
+  }
+
+  .main {
+    height: calc(100% - 86px);
+  }
+
+  .aside-container {
+    float: none;
+    width: auto;
+    padding-bottom: 30px;
+    border-right: 0;
+  }
+
+  .main-container {
+    padding-left: 16px;
+    padding-right: 16px;
+    margin-right: 0;
+    > .markdown > * {
+      width: 100% !important;
+    }
+  }
+
+  .main-wrapper {
+    width: 100%;
+    border-radius: 0;
+    margin: 0;
+  }
+
+  #footer {
+    text-align: center;
+    .footer-wrap {
+      padding: 40px;
+      .ant-row {
+        padding: 0;
+        > div {
+          &:nth-child(2),
+          &:nth-child(4) {
+            display: none;
+          }
+          a {
+            font-weight: 300;
+          }
+        }
+      }
+    }
+    .footer-center {
+      text-align: center;
+    }
+    h2 {
+      margin-top: 16px;
+    }
+    .bottom-bar {
+      padding: 16px;
+
+      text-align: center;
+      .translate-button {
+        width: auto;
+        text-align: center;
+        margin-bottom: 16px;
+      }
+      > div > span {
+        display: block;
+        &:nth-child(1), &:nth-child(2) {
+          display: none;
+        }
+      }
+    }
+  }
+
+  .prev-next-nav {
+    margin-left: 16px;
+    width: ~"calc(100% - 32px)";
+  }
+
+  .drawer {
+    .ant-menu-inline .ant-menu-item:after,
+    .ant-menu-vertical .ant-menu-item:after {
+      left: 0;
+      right: auto;
+    }
+  }
+
+  #_hj_feedback_container {
+    display: none;
+  }
+  /** home 区块 **/
+  .home-page-wrapper {
+    .page {
+      h2 {
+        margin: 80px auto 64px;
+      }
+    }
+    .parallax-bg {
+      display: none;
+    }
+  }
+  .banner {
+    display: block;
+    height: 632px;
+    &-bg-wrapper {
+      display: none;
+    }
+    .img-wrapper,
+    .text-wrapper {
+      width: 100%;
+      display: inline-block;
+      text-align: center;
+      margin: auto;
+    }
+    .img-wrapper {
+      position: initial;
+      margin-top: 48px;
+      svg {
+        width: 100%;
+        height: auto;
+      }
+    }
+    .text-wrapper {
+      margin-top: 48px;
+      min-height: 200px;
+      padding: 0 16px;
+      h1 {
+        display: none;
+      }
+      p {
+        font-size: 14px;
+        line-height: 28px;
+        color: @home-text-color;
+      }
+    }
+  }
+  .page1 {
+    min-height: 1538px;
+    .ant-row {
+      margin: 24px auto 64px;
+      >div {
+        margin-bottom: 48px;
+      }
+    }
+  }
+  .page2 {
+    min-height: 840px;
+    background: #fff;
+    &-content {
+      box-shadow: none;
+    }
+    &-components {
+      display: none;
+    }
+    &-product {
+      min-height: auto;
+      padding: 0 16px;
+      .product-block {
+        padding-bottom: 35px;
+        margin-bottom: 34px;
+        border-bottom: 1px solid #ebedf0;
+        &:last-child {
+          margin-bottom: 32px;
+          border-bottom: none;
+          .block-text-wrapper {
+            height: auto;
+          }
+        }
+        .block-image-wrapper {
+          height: 88px;
+          img {
+            height: 100%;
+          }
+        }
+        .block-text-wrapper {
+          border-bottom: none;
+          padding-bottom: 0;
+          h4 {
+            font-size: 18px;
+            line-height: 24px;
+            margin-bottom: 4px;
+          }
+          p {
+            font-size: 12px;
+            margin-bottom: 8px;
+            line-height: 20px;
+          }
+          a {
+            line-height: 20px;
+          }
+          .components-button-wrapper {
+            font-size: 12px;
+            margin-top: 16px;
+            a {
+              display: block;
+            }
+          }
+        }
+      }
+    }
+  }
+  .page3 {
+    min-height: 688px;
+    background: url('https://gw.alipayobjects.com/zos/rmsportal/qICoJIqqQRMeRGhPHBBS.svg') no-repeat;
+    background-size: cover;
+    .ant-row {
+      margin: 0 8px;
+    }
+    .page3-block {
+      padding: 24px;
+      background: #fff;
+      border-radius: 4px;
+      box-shadow: 0 8px 16px rgba(174, 185, 193, 0.3);
+      margin-bottom: 32px;
+      &:nth-child(2) {
+        .page3-img-wrapper img {
+          width: 70%;
+          margin: auto;
+          display: block;
+        }
+      }
+      p {
+        font-size: 12px;
+      }
+      .page3-img-wrapper {
+        width: 20%;
+        img {
+          width: 100%;
+        }
+      }
+      .page3-text-wrapper {
+        width: 80%;
+        margin: 0;
+        max-width: initial;
+        padding-left: 16px;
+      }
+    }
+  }
+}
diff --git a/examples/theme/static/theme.less b/examples/theme/static/theme.less
new file mode 100644
index 000000000..82dae63ad
--- /dev/null
+++ b/examples/theme/static/theme.less
@@ -0,0 +1,4 @@
+@site-heading-color: #0d1a26;
+@site-text-color: #314659;
+@site-text-color-secondary: #697b8c;
+@site-border-color-split: #ebedf0;
diff --git a/examples/theme/static/toc.less b/examples/theme/static/toc.less
new file mode 100644
index 000000000..f9ccc96be
--- /dev/null
+++ b/examples/theme/static/toc.less
@@ -0,0 +1,64 @@
+.toc {
+  font-size: 12px;
+  margin: 16px 0;
+  padding-left: 0;
+  border-left: 1px solid #ebedf0;
+  list-style: none;
+}
+
+ul.toc > li {
+  list-style: none;
+  margin-left: 0;
+  padding-left: 0;
+  line-height: 1.5;
+  &:not(:last-child) {
+    margin-bottom: 4px;
+  }
+}
+
+.toc li > ul {
+  text-indent: 8px;
+  font-size: 12px;
+  display: none;
+}
+
+.toc a {
+  padding-left: 16px;
+  display: block;
+  transition: all 0.3s ease;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  color: @site-text-color;
+  width: 110px;
+  border-left: 1px solid transparent;
+  margin-left: -1px;
+}
+
+.toc a:hover {
+  color: @primary-color;
+}
+
+.toc a.current {
+  border-color: @primary-color;
+  color: @primary-color;
+}
+
+.toc-affix {
+  position: absolute;
+  top: 8px;
+  right: 20px;
+  .ant-affix {
+    background: #fff;
+    overflow: auto;
+    max-height: ~"calc(100vh - 16px)";
+  }
+}
+.toc-affix-bottom {
+  position: absolute;
+  bottom: 88px;
+  right: 20px;
+  .ant-affix {
+    background: #fff;
+  }
+}
diff --git a/package.json b/package.json
index 1fd4246e0..67577705e 100644
--- a/package.json
+++ b/package.json
@@ -76,7 +76,7 @@
     "stylelint": "^8.1.1",
     "stylelint-config-standard": "^17.0.0",
     "transliteration": "^1.6.2",
-    "vue-antd-md-loader": "^1.0.1",
+    "vue-antd-md-loader": "^1.0.2",
     "vue-loader": "^13.0.5",
     "vue-router": "^3.0.1",
     "vue-template-compiler": "^2.5.13",
@@ -97,6 +97,7 @@
     "lodash.isplainobject": "^4.0.6",
     "omit.js": "^1.0.0",
     "vue": "^2.5.13",
+    "vue-clipboard2": "0.0.8",
     "vue-types": "^1.0.2",
     "warning": "^3.0.0"
   }
diff --git a/webpack.base.config.js b/webpack.base.config.js
index 7218a322c..a6170d7e3 100644
--- a/webpack.base.config.js
+++ b/webpack.base.config.js
@@ -50,16 +50,7 @@ const md = require('markdown-it')('default', {
   breaks: true,
   highlight: renderHighlight,
 })
-md.use(require('markdown-it-anchor'), {
-  level: 2,
-  slugify: slugify,
-  permalink: true,
-  permalinkBefore: true,
-})
-md.renderer.rules.table_open = function () {
-  return '<table class="table">'
-}
-md.renderer.rules.fence = wrap(md.renderer.rules.fence)
+// md.renderer.rules.fence = wrap(md.renderer.rules.fence)
 const cnReg = new RegExp('<(cn)(?:[^<]|<)+</\\1>', 'g')
 const usReg = new RegExp('<(us)(?:[^<]|<)+</\\1>', 'g')
 md.core.ruler.push('update_template', function replace ({ tokens }) {
@@ -101,10 +92,10 @@ md.core.ruler.push('update_template', function replace ({ tokens }) {
     const newContent = `
       <template>
         <demo-box :jsfiddle="${jsfiddle}">
-          <div class="box-demo-show" slot="component">${template}</div>
+          <template slot="component">${template}</template>
           <template slot="description">${cnHtml}</template>
           <template slot="us-description">${us ? md.render(us) : ''}</template>
-          <div class="highlight" slot="code">${codeHtml}</div>
+          <template slot="code">${codeHtml}</template>
         </demo-box>
       </template>
       <script>
@@ -132,7 +123,7 @@ module.exports = {
         use: [
           {
             loader: 'vue-antd-md-loader',
-            options: md,
+            options: Object.assign(md, { wrapper: 'div' }),
           },
         ],
       },
@@ -158,6 +149,7 @@ module.exports = {
     alias: {
       'vue$': 'vue/dist/vue.esm.js',
       'antd': path.join(__dirname, 'components'),
+      '@': path.join(__dirname, ''),
     },
   },
 }