diff --git a/scripts/devil.js b/scripts/devil.js
deleted file mode 100644
index 1d2e0bbd02..0000000000
--- a/scripts/devil.js
+++ /dev/null
@@ -1,31 +0,0 @@
-'use strict';
-
-const babel = require('babel-core');
-const recast = require('recast');
-const builders = recast.types.builders;
-
-const babelrc = {
-  presets: ['es2015', 'react']
-};
-
-// const demo = 'import { Button } from \'antd\';' +
-//         'ReactDOM.render(<div>' +
-//         '  <Button type="primary">主按钮</Button>' +
-//         '  <Button>次按钮</Button>' +
-//         '  <Button type="ghost">幽灵按钮</Button>' +
-//         '</div>,' +
-//         'document.getElementById(\'components-button-demo-basic\'));';
-// devil(demo);
-module.exports = function devil(demo, params) {
-  const compiled = babel.transform(demo, babelrc).code;
-
-  const ast = recast.parse(compiled);
-  const astProgramBody = ast.program.body;
-  const lastIndex = astProgramBody.length - 1;
-  astProgramBody[lastIndex] = builders.returnStatement(
-    astProgramBody[lastIndex].expression.arguments[0]
-  );
-
-  const code = recast.print(ast).code;
-  return new Function((params || []).join(', '), code);
-}
diff --git a/scripts/home.js b/scripts/home.js
deleted file mode 100644
index df469f094a..0000000000
--- a/scripts/home.js
+++ /dev/null
@@ -1,175 +0,0 @@
-const React = require('react');
-const ReactDOM = require('react-dom');
-import { QueueAnim, Icon, Button } from '../index';
-import ScrollOverPack from 'rc-scroll-anim/lib/ScrollOverPack';
-import ScrollLink from 'rc-scroll-anim/lib/ScrollLink';
-import ScrollElement from 'rc-scroll-anim/lib/ScrollElement';
-import scrollScreen from 'rc-scroll-anim/lib/ScrollScreen';
-import ScrollEvent from 'rc-scroll-anim/lib/EventDispatcher';
-import mapped from 'rc-scroll-anim/lib/Mapped';
-import TweenOne from 'rc-tween-one';
-
-module.exports = function() {
-  InstantClickChangeFns.push(function() {
-    if (!document.getElementById('banner')) {
-      // componentWillUnmount 不会触发, 手动删掉事件;
-      ScrollEvent._listeners = {};
-      mapped.unMount();
-      return;
-    }
-    // 导航处理
-    function scrollNavEvent() {
-      const scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
-      const clientHeight = document.documentElement.clientHeight;
-      if (scrollTop >= clientHeight) {
-        header.className = header.className.indexOf('home-nav-bottom') >= 0 ? header.className : header.className + ' home-nav-bottom';
-      } else {
-        header.className = header.className.replace(/home-nav-bottom/ig, '');
-      }
-    }
-
-    $(window).off('scroll.scrollNavEvent');
-    $(window).on('scroll.scrollNavEvent', scrollNavEvent);
-
-    // list point
-    class Link extends React.Component {
-      componentDidMount() {
-        // 整屏滚动;
-        scrollScreen.init({docHeight: 4746});
-      }
-
-      render() {
-        return (
-          <div>
-            <ScrollLink className="list-point" location="banner"/>
-            <ScrollLink className="list-point" location="page1"/>
-            <ScrollLink className="list-point" location="page2"/>
-            <ScrollLink className="list-point" location="page3"/>
-            <ScrollLink className="list-point" location="page4"/>
-          </div>
-        );
-      }
-    }
-    ReactDOM.render(<Link />, document.getElementById('list'));
-
-    // banner
-    class Banner extends React.Component {
-      constructor() {
-        super(...arguments);
-      }
-
-      typeFunc(a) {
-        if (a.key === 'line') {
-          return 'right';
-        } else if (a.key === 'button') {
-          return 'bottom';
-        }
-        return 'left';
-      }
-
-      render() {
-        return (
-          <ScrollElement scrollName="banner" style={{height: '100%'}}>
-            <QueueAnim className="banner-text-wrapper" type={this.typeFunc} delay={300}>
-              <h2 key="h2">ANT <p>DESIGN</p></h2>
-              <p key="content">一个 UI 设计语言</p>
-              <span className="line" key="line"/>
-              <div className="start-button" key="button">
-                <a href="/docs/spec/introduce"><Icon type="smile-circle"/>开始探索</a>
-              </div>
-              <iframe key="github-btn" src="https://ghbtns.com/github-btn.html?user=ant-design&repo=ant-design&type=star&count=true" frameBorder="0" scrolling="0" width="98px" height="20px" />
-            </QueueAnim>
-            <TweenOne className='down' vars={[{opacity: 1},{y: 10, duration: 800, yoyo: true, repeat: -1}]}>
-              <Icon type="down"/>
-            </TweenOne>
-          </ScrollElement>
-        )
-      }
-    }
-
-    ReactDOM.render(<Banner />, document.getElementById('banner'));
-
-    // page1
-    class Page1 extends React.Component {
-      render() {
-        return (
-          <ScrollOverPack scrollName="page1" className="content-wrapper" playScale={1} replay>
-            <TweenOne key="image" className="image1 image-wrapper" vars={{x: 0, opacity: 1, duration: 550}}
-                      style={{transform: 'translateX(-100px)', opacity: 0}} hideProps={{type: 'reverse'}}/>
-            <QueueAnim className="text-wrapper" delay={300} key="text" duration={550} leaveReverse
-                       hideProps={{child: null}}>
-              <h2 key="h2">最佳实践</h2>
-              <p key="p" style={{maxWidth: 310}}>近一年的中台设计实践，积累了大量的优秀案例。</p>
-              <div key="button"><Button type="primary" size="large"
-                                        onClick={()=>{window.location.href='/docs/practice/cases'}}>了解更多<Icon
-                type="right"/></Button></div>
-            </QueueAnim>
-          </ScrollOverPack>
-        );
-      }
-    }
-    ReactDOM.render(<Page1 />, document.getElementById('page1'));
-
-    //page2
-    class Page2 extends React.Component {
-      render() {
-        return (
-          <ScrollOverPack scrollName="page2" className="content-wrapper" playScale={1} replay>
-            <QueueAnim className="text-wrapper left-text" delay={300} key="text" duration={550} type='bottom'
-                       leaveReverse
-                       hideProps={{child: null}}>
-              <h2 key="h2">设计模式</h2>
-              <p key="p" style={{maxWidth: 260}}>总结中台设计中反复出现的问题，并提供相应的解决方案。</p>
-              <div key="button"><Button type="primary" size="large"
-                                        onClick={()=>{window.location.href='/docs/pattern/navigation'}}>了解更多<Icon
-                type="right"/></Button>
-              </div>
-            </QueueAnim>
-            <TweenOne key="image" className="image2 image-wrapper" vars={{x: 0, opacity: 1, delay: 300, duration: 550}}
-                      style={{transform: 'translateX(100px)', opacity: 0}} hideProps={{type: 'reverse'}}/>
-          </ScrollOverPack>
-        );
-      }
-    }
-    ReactDOM.render(<Page2 />, document.getElementById('page2'));
-
-    // page3
-    class Page3 extends React.Component {
-      render() {
-        return (
-          <ScrollOverPack scrollName="page3" className="content-wrapper" playScale={1} replay>
-            <TweenOne key="image" className="image3 image-wrapper" vars={{x: 0, opacity: 1, duration: 550}}
-                      style={{transform: 'translateX(-100px)', opacity: 0}} hideProps={{type: 'reverse'}}/>
-            <QueueAnim className="text-wrapper" delay={300} key="text" duration={550} leaveReverse style={{top: '40%'}}
-                       hideProps={{child: null}}>
-              <h2 key="h2">丰富的基础组件</h2>
-              <p key="p" style={{maxWidth: 280}}>丰富、灵活、实用的基础组件，为业务产品提供强有力的设计支持。</p>
-              <div key="button"><Button type="primary" size="large"
-                                        onClick={()=>{window.location.href='/docs/react/introduce'}}>了解更多<Icon
-                type="right"/></Button></div>
-            </QueueAnim>
-          </ScrollOverPack>
-        );
-      }
-    }
-    ReactDOM.render(<Page3/>, document.getElementById('page3'));
-
-    // page4
-    class Page4 extends React.Component {
-      render(){
-        return (
-          <ScrollOverPack scrollName="page4" className="content-wrapper" playScale={1}>
-            <QueueAnim className="text-wrapper-bottom" delay={300} key="text" duration={550} leaveReverse type="bottom"
-                       hideProps={{child: null}}>
-              <h2 key="h2">微小·确定·幸福</h2>
-              <p key="p">这是一个致力于提升『用户』和『设计者』使用体验的中台设计语言。</p>
-            </QueueAnim>
-            <TweenOne key="image" className="image4 bottom-wrapper" vars={{y: 0, opacity: 1, duration: 550, delay: 550}}
-                      style={{transform: 'translateY(50px)', opacity: 0}} hideProps={{type: 'reverse'}}/>
-          </ScrollOverPack>
-        );
-      }
-    }
-    ReactDOM.render(<Page4 />, document.getElementById('page4'));
-  });
-};
diff --git a/site/static/style.less b/site/static/style.less
deleted file mode 100644
index afab714618..0000000000
--- a/site/static/style.less
+++ /dev/null
@@ -1,1630 +0,0 @@
-html {
-  text-rendering: optimizeLegibility;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
-
-html,
-body {
-  height: 100%;
-}
-
-body {
-  font-family: "Helvetica Neue",Helvetica,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","微软雅黑",SimSun,sans-serif;
-  line-height: 1.5;
-  color: #666;
-  font-size: 14px;
-  background: #ECECEC;
-  transition: background 1s cubic-bezier(0.075, 0.82, 0.165, 1);
-  overflow-x: hidden;
-}
-
-*,
-*:after,
-*:before {
-  box-sizing: border-box;
-}
-
-html,
-body,
-ul,
-li,
-p {
-  margin: 0;
-  padding: 0;
-}
-
-ul,
-li {
-  list-style: none;
-}
-
-a {
-  color: #2db7f5;
-  text-decoration: none;
-  transition: color .3s ease;
-}
-
-a:hover {
-  color: #4DC4F0;
-}
-
-.clearfix:after {
-  clear: both;
-  display: table;
-  content: '';
-}
-
-::selection {
-  background: #2db7f5;
-  color: #fff;
-}
-
-::-moz-selection {
-  background: #2db7f5;
-  color: #fff;
-}
-
-header {
-  width: 100%;
-  background: #fff;
-  font-size: 16px;
-  margin-bottom: 24px;
-}
-
-.fn-hide {
-  display: none;
-}
-
-.fn-alpha-in {
-  opacity: 1 !important;
-}
-
-.fn-alpha-out {
-  opacity: 0 !important;
-}
-
-a.logo {
-  float: left;
-  height: 40px;
-  line-height: 40px;
-  margin: 20px 0 20px 4%;
-  text-transform: uppercase;
-  font-size: 14px;
-  font-family: "Hiragino Sans GB","Microsoft YaHei","微软雅黑",sans-serif;
-  color: #2db7f5;
-  width: 219px;
-}
-
-.logo img {
-  width: 40px;
-  float: left;
-  margin-right: 8px;
-}
-
-.search {
-  float: left;
-  height: 20px;
-  padding: 0px 0 0 30px;
-  margin: 30px auto 0;
-  border-left: 1px solid #e9e9e9;
-  position: relative;
-}
-
-#autoComplete {
-  margin-top: -3px;
-  width: 200px;
-}
-
-#autoComplete .ant-select {
-  font-size: 14px;
-}
-
-#autoComplete .ant-select-selection--single {
-  border: transparent;
-  outline: none;
-  width: 160px;
-  height: 28px;
-  line-height: 28px;
-  color: #999;
-  transition: padding .3s cubic-bezier(0.075, 0.82, 0.165, 1);
-  font-size: 14px;
-  box-shadow: none;
-}
-
-#autoComplete .ant-select-search__field:focus {
-  box-shadow: none;
-}
-
-#autoComplete input::-webkit-input-placeholder,
-#autoComplete input::-moz-placeholder,
-#autoComplete input:-ms-input-placeholder {
-  color: #CADCE3;
-}
-
-.autoComplete.ant-select-dropdown {
-  border: 0;
-  border-radius: 0;
-  box-shadow: 0 0 8px rgba(0,0,0,0.25);
-  font-size: 14px;
-}
-
-.autoComplete .ant-select-dropdown-menu {
-  max-height: 200px;
-}
-
-.autoComplete .ant-select-dropdown-menu-item {
-  border-radius: 0!important;
-}
-
-.autoComplete .ant-component-decs {
-  font-size: 12px;
-  position: absolute;
-  top: 9px;
-  color: #aaa;
-  right: 16px;
-}
-
-.global-hint {
-  color: #666;
-  font-size: 12px;
-  padding: 5px 14px 6px;
-  margin-top: 0;
-  border-radius: 0 0 6px 6px;
-  box-shadow: 0 1px 3px #ddd;
-  opacity: 0.8;
-  position: absolute;
-  left: 50%;
-  transform: translateX(-50%);
-  display: none;
-}
-
-.nav {
-  height: 80px;
-  line-height: 80px;
-  float: right;
-  font-size: 0.875em;
-  position: relative;
-  margin-right: 4%;
-  overflow: hidden;
-}
-
-.nav ul li {
-  float: left;
-  text-align: center;
-}
-
-.nav ul li a {
-  color: #666;
-  width: 100%;
-  height: 100%;
-  display: inline-block;
-  padding: 0 22px;
-}
-
-a.nav-link-disabled {
-  cursor: not-allowed;
-  color: #ccc !important;
-  pointer-events: none;
-}
-
-.nav ul li.current a {
-  color: #2db7f5;
-  font-weight: 600;
-}
-
-.nav ul li a:hover,
-.nav ul li .hover {
-  color: #2db7f5;
-}
-
-.nav .bar {
-  height: 3px;
-  position: absolute;
-  bottom: 0;
-  left: 0;
-  background: #2db7f5;
-  display: none;
-  transition: left .3s cubic-bezier(0.075, 0.82, 0.165, 1), width 1.5s cubic-bezier(0.075, 0.82, 0.165, 1);
-}
-
-.main-box {
-  display: block;
-  position: absolute;
-  top: 0;
-  width: 100%;
-  height: 100%;
-  overflow: hidden;
-}
-
-.perspective {
-  vertical-align: top;
-  position: relative;
-  perspective: 4000px;
-  -webkit-perspective: 4000px;
-}
-
-.main {
-  overflow: hidden;
-  position: relative;
-  height: calc(100% - 190px);
-  min-height: 500px;
-  transform-style: preserve-3d;
-  transition: transform .6s cubic-bezier(0.785, 0.135, 0.15, 0.86), height .5s ease-out;
-}
-
-.banner-box {
-  width: 100%;
-  height: 100%;
-  position: relative;
-  overflow: inherit;
-  -webkit-animation: alphaTo .3s ease-out;
-  animation: alphaTo .3s ease-out;
-}
-
-.banner-box .banner-img {
-  background: url("https://t.alipayobjects.com/images/T1CFtgXb0jXXXXXXXX.jpg") center no-repeat;
-  height: 1300px;
-  width: 2400px;
-  transform-origin: center center;
-  transition: opacity 0.5s ease-out;
-}
-
-.banner-box #bannerAnim,
-.load-main-box {
-  position: absolute;
-  width: 100%;
-  height: 100%;
-  transform-origin: 0 0;
-  -webkit-transform-origin: 0 0;
-  z-index: 2;
-    top:0;
-    left:0;
-}
-
-.load-box {
-  -webkit-perspective: 300px;
-  -moz-perspective: 300px;
-  width: 140px;
-  height: 80px;
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  margin-left: -70px;
-  margin-top: -40px;
-  z-index: 99;
-  animation: alphaTo .3s ease-out;
-  -webkit-animation: alphaTo .3s ease-out;
-  font-size: 22px;
-  text-align: center;
-  font-family: "Raleway","Helvetica Neue",Helvetica,"Lantinghei SC","Microsoft YaHei","微软雅黑","Hiragino Sans GB",SimSun,sans-serif;
-}
-
-.load-box em {
-  -webkit-transform-style: preserve-3d;
-  -moz-transform-style: preserve-3d;
-  -ms-transform-style: preserve-3d;
-  transform-style: preserve-3d;
-  display: block;
-  width: 50px;
-  height: 50px;
-  margin: auto;
-  animation: loadTween 2S cubic-bezier(0.785, 0.135, 0.15, 0.86) infinite;
-  -webkit-animation: loadTween 2S cubic-bezier(0.785, 0.135, 0.15, 0.86) infinite;;
-}
-.load-box span {
-  display: inline-block;
-}
-.load-box span > p {
-  float: left;
-}
-.load-main-box .load-bar {
-  width: 0%;
-  height: 2px;
-  background: #2db7f5;
-  transition: width .3s cubic-bezier(0.785, 0.135, 0.15, 0.86);
-  -webkit-transition: width .3s cubic-bezier(0.785, 0.135, 0.15, 0.86);;
-}
-.load-out {
-  -webkit-animation: alphaOut .5s cubic-bezier(0.6, -0.28, 0.735, 0.045);
-  animation: alphaOut .5s cubic-bezier(0.6, -0.28, 0.735, 0.045);
-}
-
-.banner-box #bannerAnim .banner-line-absolute {
-  position: absolute;
-}
-
-footer {
-  clear: both;
-  border-top: 1px solid #eee;
-  font-size: 12px;
-  background: #fff;
-  position: relative;
-  z-index: 1;
-  color: #666;
-  box-shadow: 0 1000px 0 1000px #fff;
-}
-
-footer ul {
-  overflow: hidden;
-  margin: 0 2%;
-}
-
-footer ul li {
-  float: left;
-  width: 25%;
-  padding: 5px 2% 15px;
-}
-
-footer ul li > h2 {
-  font-size: 16px;
-  margin: 10px auto 5px;
-  font-weight: normal;
-}
-
-footer ul li > div {
-  margin: auto;
-  margin: 10px 0;
-}
-
-footer ul li > a {
-  margin: 5px 2px 0 0;
-}
-
-.aside-container {
-  width: 220px;
-  padding-bottom: 50px;
-  float: left;
-  border-right: 1px solid #e9e9e9;
-  margin-right: -1px;
-}
-
-.aside-container > ul > li {
-  overflow: hidden;
-  position: relative;
-  right: -1px;
-  z-index: 1;
-}
-
-.aside-container > ul > li > ul {
-  margin-left: 16px;
-}
-
-.aside-container li h4 {
-  font-size: 14px;
-  font-weight: 600;
-  padding: 0 0 0 24px;
-  line-height: 40px;
-  height: 40px;
-  margin: 0;
-  cursor: pointer;
-  position: relative;
-  z-index: 1;
-  position: relative;
-  background: #fff;
-  border-right: 1px solid #e9e9e9;
-}
-
-.aside-container li h4:after {
-  position: absolute;
-  top: 0;
-  right: 20px;
-  content: "\e602";
-  font-family: "anticon";
-  transform: scale(0.6);
-  font-size: 12px;
-  opacity: 0;
-  transition: all 0.3s ease;
-}
-
-.aside-container li[open=open] h4:after {
-  -webkit-transform: scale(0.6) rotate(180deg);
-  transform: scale(0.6) rotate(180deg);
-}
-
-.aside-container li:hover h4:after {
-  opacity: 0.8;
-}
-
-.aside-container li > ul.aside-list-show {
-  display: block;
-}
-
-.aside-container li a {
-  line-height: 40px;
-  height: 40px;
-  display: block;
-  padding-left: 24px;
-  font-size: 14px;
-  color: #666;
-}
-
-.aside-container li.type-divider {
-  font-size: 12px;
-  -webkit-transform:  scale(0.9);
-  transform: scale(0.9);
-  transform-origin: 0 50%;
-  color: #aaa;
-  margin: 6px 0 6px 24px;
-}
-
-.aside-container .chinese {
-  font-size: 12px;
-  margin-left: 6px;
-  font-weight: normal;
-  opacity: 0.67;
-}
-
-.aside-container li a:hover {
-  color: #2db7f5;
-}
-
-.aside-container .current {
-  border-right: 2px solid #2db7f5;
-  color: #2db7f5;
-}
-
-.aside-container .current a {
-  color: #2db7f5;
-}
-
-.main-wrapper {
-  background: #fff;
-  width: 92%;
-  margin: 0 auto;
-  border-radius: 6px;
-  overflow: hidden;
-  padding: 24px 0 0;
-  margin-bottom: 24px;
-  min-height: 400px;
-  position: relative;
-}
-
-.main-container {
-  border-left: 1px solid #e9e9e9;
-  margin-left: 219px;
-  padding: 0 40px 120px;
-  background: #fff;
-  min-height: 400px;
-  min-height: 80vh;
-  overflow: hidden;
-}
-
-.markdown {
-  color: #666;
-  font-size: 14px;
-  line-height: 1.8;
-}
-
-.highlight {
-  line-height: 1.5;
-}
-
-.markdown img {
-  vertical-align: middle;
-  max-width: 100%;
-}
-
-.markdown h1 {
-  color: #404040;
-  font-weight: 500;
-  line-height: 40px;
-  margin-bottom: 24px;
-}
-
-.markdown h2,
-.markdown h3,
-.markdown h4,
-.markdown h5,
-.markdown h6 {
-  color: #404040;
-  margin: 1.6em 0 0.6em 0;
-  font-weight: 500;
-  clear: both;
-}
-
-.markdown h1 { font-size: 28px; }
-.markdown h2 { font-size: 22px; }
-.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: #e9e9e9;
-  margin: 16px 0;
-  clear: both;
-}
-
-.markdown p,
-.markdown pre {
-  margin: 1em 0;
-}
-
-.markdown > p,
-.markdown > blockquote,
-.markdown > .highlight,
-.markdown > ol,
-.markdown > ul {
-  width: 80%;
-}
-
-.markdown ul > li {
-  list-style: circle;
-}
-
-.markdown > ul li,
-.markdown blockquote ul > li {
-  margin-left: 20px;
-  padding-left: 4px;
-}
-
-.markdown > ul li p,
-.markdown > ol li p {
-  margin: 0.6em 0;
-}
-
-.markdown ol > li {
-  list-style: decimal;
-}
-
-.markdown > ol li,
-.markdown blockquote ol > li {
-  margin-left: 20px;
-  padding-left: 4px;
-}
-
-.markdown code {
-  margin: 0 3px;
-}
-
-.markdown pre {
-  border-radius: 6px;
-  background: #f7f7f7;
-}
-
-.markdown pre code {
-  border: none;
-  padding: 1em 2em;
-  background: #f7f7f7;
-  margin: 0;
-}
-
-.markdown strong,
-.markdown b {
-  font-weight: 600;
-}
-
-.markdown > table {
-  border-collapse: collapse;
-  border-spacing: 0px;
-  empty-cells: show;
-  border: 1px solid #e9e9e9;
-  width: 80%;
-  margin-bottom: 24px;
-}
-
-.markdown > table th {
-  white-space: nowrap;
-  color: #5C6B77;
-  font-weight: 600;
-}
-
-.markdown > table th,
-.markdown > table td {
-  border: 1px solid #e9e9e9;
-  padding: 8px 16px;
-  text-align: left;
-}
-
-.markdown > table th {
-  background: #F7F7F7;
-}
-
-.markdown blockquote {
-  font-size: 90%;
-  color: #999;
-  border-left: 4px solid #e9e9e9;
-  padding-left: 0.8em;
-  margin: 1em 0;
-  font-style: italic;
-}
-
-.markdown blockquote p {
-  margin: 0;
-}
-
-.markdown .anchor {
-  opacity: 0;
-  transition: opacity 0.3s ease;
-  margin-left: 8px;
-}
-
-.markdown .waiting {
-  color: #ccc;
-}
-
-.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;
-}
-
-#api ~ ul > li > p > strong ~ code {
-  background: #fff;
-  color: #CC7300;
-  border: none;
-  margin-left: 0.5em;
-}
-
-.api-container table {
-  font-family: consolas;
-  font-size: 13px;
-}
-
-.prev-next-nav {
-  position: absolute;
-  bottom: 0;
-  left: 0;
-  width: 100%;
-  overflow: hidden;
-  font-size: 16px;
-  padding-left: 220px;
-}
-
-.prev-next-nav > .prev-page,
-.prev-next-nav > .next-page {
-  padding: 0 24px;
-  width: 50%;
-  float: left;
-  line-height: 72px;
-  height: 72px;
-  border-top: 1px solid #e9e9e9;
-}
-
-.prev-next-nav > a.prev-page:before {
-  font-family: 'anticon';
-  content: '\e601';
-  font-size: 12px;
-  margin-right: 1em;
-}
-
-.prev-next-nav > .next-page {
-  text-align: right;
-  float: right;
-}
-
-.prev-next-nav > a.next-page:after {
-  font-family: 'anticon';
-  content: '\e600';
-  font-size: 12px;
-  margin-left: 1em;
-}
-
-.subtitle {
-  font-size: 80%;
-  font-weight: normal;
-  font-family: "Helvetica Neue", Helvetica;
-}
-
-.toc {
-  font-size: 14px;
-  margin: 36px 0 24px;
-  background: #fbfbfb;
-  border-left: 2px solid #eee;
-}
-
-.toc > ul {
-  padding: 8px 0;
-}
-
-.toc > ul li {
-  list-style: none;
-}
-
-.toc li > ul {
-  text-indent: 8px;
-  font-size: 12px;
-  display: none;
-}
-
-.toc a {
-  padding-left: 16px;
-  border-left: 2px solid #eee;
-  margin-left: -2px;
-  display: block;
-  transition: all 0.3s ease;
-  white-space: nowrap;
-  overflow: hidden;
-  color: #666;
-}
-
-.toc a:hover {
-  color: #2db7f5;
-}
-
-.toc a.current {
-  border-color: #2db7f5;
-  color: #2db7f5;
-}
-
-/* autocomplete */
-.ui-select ul {
-  outline: none;
-  position: relative;
-  list-style-type: none;
-  padding: 0;
-  margin: 0;
-  text-align: left;
-  background-color: #fff;
-  border-radius: 3px;
-  box-shadow: 0 1px 5px #ccc;
-  background-clip: padding-box;
-  border: 1px solid #ccc;
-}
-
-.ui-select-item {
-  width: 156px;
-  padding: 10px 12px;
-  clear: both;
-  font-size: 14px;
-  font-weight: normal;
-  color: #666;
-  white-space: nowrap;
-  text-overflow: ellipsis;
-  overflow: hidden;
-}
-
-.ui-select-item-hover {
-  cursor: pointer;
-  background-color: #eaf8fe;
-}
-/* autocomplete end */
-
-/***************************************************************************/
-.api-link {
-  font-size: 16px;
-  vertical-align: middle;
-  margin-left: 15px;
-  font-weight: normal;
-}
-
-.sketch-link {
-  font-size: 14px;
-  vertical-align: middle;
-  font-weight: normal;
-  float: right;
-  margin-right: 15px;
-  border: 1px solid #ddd;
-  padding: 2px 15px;
-  border-radius: 100px;
-  color: #777;
-}
-
-.sketch-link i {
-  margin-right: 5px;
-}
-
-.component-demos {
-  margin: 2em 0 1em;
-  color: #404040;
-  font-weight: 500;
-  font-size: 24px;
-}
-
-.component-demos .anticon-appstore {
-  cursor: pointer;
-  font-size: 14px;
-  color: #9199AC;
-  margin-left: 5px;
-  opacity: 0.8;
-  transition: all 0.3s ease;
-  top: -2px;
-  position: relative;
-}
-
-.component-demos .anticon-appstore:hover {
-  opacity: 1;
-}
-
-.component-demos .anticon-appstore.expand {
-  color: #3B4357;
-}
-
-.code-boxes-col-1-1 {
-  width: 80%;
-}
-
-.code-boxes-col-2-1 {
-  width: 48%;
-  display: inline-block;
-  vertical-align: top;
-  padding-right: 8px;
-}
-
-.code-boxes-col-2-1:last-child {
-  padding-right: 0;
-  padding-left: 8px;
-}
-
-.code-box {
-  border: 1px solid #E9E9E9;
-  border-radius: 6px;
-  display: inline-block;
-  width: 100%;
-  position: relative;
-  margin: 0px 0 16px 0px;
-  transition: all 0.5s ease;
-}
-
-.code-box:hover {
-  border-color: #ccc;
-}
-
-.code-box:target {
-  border: 1px solid rgba(45, 183, 245, 0.7);
-  box-shadow: 0 0 4px rgba(45, 183, 245, 0.5);
-}
-
-.code-box:hover .code-box-meta,
-.code-box:target .code-box-meta {
-  background: #fbfbfb;
-}
-
-.code-box:hover .code-box-title,
-.code-box:target .code-box-title {
-  background: #fbfbfb;
-  box-shadow: 0 -1.2px 0 #e9e9e9;
-}
-
-.code-box .code-box-title a,
-.code-box .code-box-title a:hover {
-  color: #666;
-}
-
-.code-box .code-box-demo {
-  border-bottom: 1px solid #E9E9E9;
-  padding: 42px 20px 50px;
-}
-
-.code-box-meta {
-  position: relative;
-  padding: 10px 15px;
-  border-radius: 0 0 6px 6px;
-  transition: background-color 0.4s ease;
-  width: 100%;
-}
-
-.code-box-meta h4,
-.code-box-meta p {
-  margin: 0;
-}
-
-.code-box-title {
-  position: absolute;
-  top: -14px;
-  padding: 1px 1.1em;
-  color: #777;
-  border-radius: 6px;
-  background: #fff;
-  transition: all 0.4s ease;
-}
-
-.code-box-title:before {
-  font-family: anticon;
-  content: "\e658";
-  font-size: 16px;
-  vertical-align: middle;
-  line-height: 22px;
-  position: relative;
-  margin-right: 8px;
-  top: -2px;
-  color: #ccc;
-  -webkit-transform: rotate(-45deg);
-  transform: rotate(-45deg);
-  display: inline-block;
-}
-
-.code-box-meta > p {
-  font-size: 12px;
-  margin: 0.5em 0;
-  padding-right: 25px;
-  width: 100%;
-  word-break: break-word;
-}
-
-.code-box .collapse {
-  position: absolute;
-  right: 16px;
-  bottom: 18px;
-  cursor: pointer;
-  width: 18px;
-  height: 18px;
-  font-size: 18px;
-  line-height: 18px;
-  opacity: 0.5;
-  text-align: center;
-  -webkit-transform: rotate(90deg);
-  transform: rotate(90deg);
-  transition: all 0.3s ease;
-  color: #999;
-  background: #fff;
-  user-select: none;
-}
-
-.code-box.expand .collapse {
-  -webkit-transform: rotate(-90deg);
-  transform: rotate(-90deg);
-}
-
-.code-box .collapse:hover {
-  opacity: 1;
-}
-
-.code-box .highlight {
-  overflow: hidden;
-  display: none;
-  padding: 5px;
-  border-top: 1px dashed #e9e9e9;
-}
-
-.code-box pre {
-  margin: 0;
-  width: auto;
-}
-
-.code-box pre code {
-  border: none;
-  background: #fff;
-}
-
-.banner-entry {
-  position: absolute;
-  top: 19%;
-  left: 10%;
-  z-index: 100;
-  color: #707d8d;
-  font-family: "Raleway","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","微软雅黑",SimSun,sans-serif;
-  font-weight: 300;
-}
-
-.entry-title {
-  font-size: 50px;
-  text-transform: uppercase;
-  line-height: 1;
-  margin-bottom: 12px;
-}
-
-.entry-slogan {
-  padding-left: 4px;
-  font-size: 14px;
-  color: #9ea9b4;
-}
-
-a.entry-link {
-  margin-top: 30px;
-  border: 1px solid rgba(95, 108, 119, 0.3);
-  border-radius: 50px;
-  color: #5F6C77;
-  display: inline-block;
-  text-align: center;
-  padding: 8px 20px;
-  transition: border 0.3s ease;
-}
-
-a.entry-link:hover {
-  border-color: #5F6C77;
-}
-
-a.entry-link .anticon-smile {
-  margin-right: 2px;
-  display: inline-block;
-  -webkit-animation: rotateCircleBack 0.6s 1 ease-in-out;
-  animation: rotateCircleBack 0.6s 1 ease-in-out;
-  line-height: 1;
-  width: 16px;
-}
-
-a.entry-link:hover .anticon-smile {
-  -webkit-animation: rotateCircle 0.6s 1 ease-in-out;
-  animation: rotateCircle 0.6s 1 ease-in-out;
-}
-
-.entry-version {
-  font-size: 12px;
-  margin-top: 15px;
-  position: absolute;
-  top: 36px;
-  right: -32px;
-}
-
-#instantclick {
-  top: 80px!important;
-  position: absolute!important;
-}
-
-#instantclick-bar {
-  background: #2db7f5;
-}
-
-#versions-select {
-  position: relative;
-  top: -2px;
-}
-
-.window-frame {
-  position: relative;
-  margin: 0;
-  padding: 0;
-  border-radius: 5px;
-  border: 1px solid #ccc;
-  background-color: #fff;
-  line-height: 1;
-}
-
-.window-frame .top-bar {
-  background: #DCD9DC;
-  background-image: -webkit-linear-gradient(#F6F6F6, #dadada);
-  background-image: linear-gradient(#F6F6F6, #dadada);
-  min-height: 2rem;
-  border-radius: 0.35rem 0.35rem 0 0;
-  padding: 0.41528rem 0.83056rem;
-  border-bottom: 1px solid transparent;
-  border-bottom-color: #ccc;
-  color: rgba(0, 0, 0, 0.5);
-}
-
-.window-frame .top-bar .address-bar {
-  border-radius: 0.245rem;
-  border: 1px solid rgba(0, 0, 0, 0.3);
-  color: black;
-  box-shadow: 0 0.5px 0 0 rgba(255, 255, 255, 0.75), inset 0 1px 1px rgba(0, 0, 0, 0.15);
-  display: inline-block;
-  padding: 0 0.5em 0 1em;
-  font-size: 0.75rem;
-  line-height: 2;
-  background: white;
-  width: 60%;
-  margin-left: 15%;
-}
-
-.window-frame .top-bar .controls {
-  display: inline-block;
-  vertical-align: top;
-  position: relative;
-  padding-top: 0.2em;
-}
-.window-frame .top-bar .controls > * {
-  position: relative;
-  vertical-align: middle;
-  line-height: 1;
-  display: inline-block;
-  margin-right: 0.41528rem;
-  -webkit-transition: 0.1s linear;
-          transition: 0.1s linear;
-}
-.window-frame .top-bar .control {
-  width: 0.83056rem;
-  height: 0.83056rem;
-  background: #DCD9DC;
-  border-radius: 0.83056rem;
-  border: 1px solid rgba(0, 0, 0, 0.08);
-  cursor: pointer;
-}
-.window-frame .top-bar .control:hover {
-  background: #b0adb0;
-}
-.window-frame .top-bar .control:before,
-.window-frame .top-bar .control:after {
-  line-height: 0.5;
-  color: black;
-  text-align: center;
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  vertical-align: middle;
-  line-height: 0.5;
-}
-.window-frame .top-bar .control.close {
-  background: #FC625C;
-}
-.window-frame .top-bar .control.minify {
-  background: #FDC041;
-}
-.window-frame .top-bar .control.expand {
-  background: #35CD4B;
-}
-.window-frame .window-content {
-  padding: 0;
-  line-height: 1.5;
-  overflow: auto;
-  height: 440px;
-  position: relative;
-  border-radius: 0 0 5px 5px;
-  background: #ececec;
-}
-
-.window-frame .status-bar {
-  height: 2rem;
-  border-radius: 0 0 0.35rem 0.35rem;
-  display: none;
-}
-
-.demos-anchor {
-  color: #aaa;
-  position: absolute;
-  margin-right: 24px;
-  top: 24px;
-  right: 0;
-  z-index: 100;
-  background: #fff;
-  font-size: 12px;
-}
-
-.demos-anchor a {
-  padding-left: 8px;
-  display: block;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  max-width: 90px;
-}
-
-.demos-anchor.toc.sticky {
-  position: fixed;
-  top: 0;
-  right: 4%;
-  margin-right: 24px;
-  z-index: 100;
-}
-
-.preview-image-boxes {
-  float: right;
-  margin: 0 0 70px 28px;
-  width: 616px;
-  clear: both;
-}
-
-.preview-image-boxes + .preview-image-boxes {
-  margin-top: -35px;
-}
-
-.preview-image-box {
-  width: 100%;
-  float: left;
-  padding: 0 8px;
-}
-
-.preview-image-wrapper {
-  background: #f4f4f4;
-  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: #2db7f5;
-  display: block;
-  position: absolute;
-  bottom: 0;
-  left: 0;
-}
-
-.preview-image-wrapper.bad:after {
-  content: '';
-  width: 100%;
-  height: 3px;
-  background: #f50;
-  display: block;
-  position: absolute;
-  bottom: 0;
-  left: 0;
-}
-
-.preview-image-title {
-  font-size: 12px;
-  margin-top: 5px;
-  color: #666;
-}
-
-.preview-image-description {
-  font-size: 12px;
-  margin-top: 2px;
-  color: #999;
-  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 0.3s ease;
-  background: #fff;
-  padding: 12px;
-  border-radius: 6px;
-}
-
-.preview-image-boxes.pack 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);
-}
-
-.outside-link:after {
-  content: '\e669';
-  font-family: 'anticon';
-  margin-left: 5px;
-  font-size: 12px;
-}
-
-.image-modal {
-  text-align: center;
-}
-
-.image-modal-container {
-  position: relative;
-  text-align: center;
-}
-
-.image-modal .ant-modal-header {
-  display: none;
-}
-
-.image-modal .ant-carousel .slick-slider {
-  padding-bottom: 24px;
-}
-
-.image-modal .ant-carousel .slick-dots {
-  text-align: left;
-  bottom: -6px;
-}
-
-.image-modal .ant-carousel .slick-dots li {
-  margin: 0;
-}
-
-.image-modal .preview-image-title {
-  position: absolute;
-  bottom: 12px;
-  left: 50%;
-  display: inline-block;
-  transform: translateX(-50%);;
-}
-
-.image-modal .slick-prev {
-  left: 0;
-  height: 100%;
-  top: 0;
-  margin-top: 0;
-  width: 50%;
-  text-align: left;
-}
-
-.image-modal .slick-prev:after {
-  content: "\e601";
-  font-size: 28px;
-  font-family: "anticon";
-  color: #000;
-  opacity: 0;
-  transition: all 0.3s ease;
-  position: absolute;
-  top: 220px;
-  right: 24px;
-}
-
-.image-modal .slick-prev:hover:after {
-  opacity: 0.38;
-}
-
-.image-modal .slick-next {
-  right: 0;
-  height: 100%;
-  top: 0;
-  margin-top: 0;
-  width: 50%;
-  text-align: right;
-}
-
-.image-modal .slick-next:after {
-  content: "\e600";
-  font-size: 28px;
-  font-family: "anticon";
-  color: #000;
-  opacity: 0;
-  transition: all 0.3s ease;
-  position: absolute;
-  top: 220px;
-  right: 24px;
-}
-
-.image-modal .slick-next:hover:after {
-  opacity: 0.38;
-}
-
-.image-modal .outside-link {
-  position: absolute;
-  right: 16px;
-  bottom: 12px;
-}
-
-.image-modal .ant-carousel .slick-slide img {
-  max-width: 100%;
-  display: inline-block;
-}
-
-.resource-cards {
-  width: 100%;
-}
-
-.resource-card {
-  max-width: 350px;
-  width: 40%;
-  min-width: 300px;;
-  height: 130px;
-  border: 1px solid #e9e9e9;
-  border-radius: 6px;
-  font-size: 12px;
-  color: #777;
-  display: inline-block;
-  margin: 20px 40px 10px 0;
-  vertical-align: middle;
-  transition: all 0.3s ease;
-  position: relative;
-  overflow: hidden;
-}
-
-.resource-card:hover {
-  box-shadow: 0 1px 4px rgba(64,64,64,.2);
-}
-
-.resource-card:hover .resource-card-title {
-  color: #2db7f5;
-}
-
-.resource-card.disabled {
-  opacity: 0.45;
-  pointer-events: none;
-}
-
-.resource-card img {
-  display: inline-block;
-  vertical-align: middle;
-  width: 50px;
-  margin: 0 20px 0 24px;
-  position: absolute;
-  top: 50%;
-  transform: translateY(-50%);
-}
-
-.resource-card-content {
-  display: inline-block;
-  vertical-align: middle;
-  position: absolute;
-  top: 50%;
-  transform: translateY(-50%);
-  margin-left: 92px;
-}
-
-.resource-card-title {
-  display: block;
-  font-size: 16px;
-  color: #666;
-  overflow: hidden;
-  white-space: nowrap;
-  text-overflow: ellipsis;
-  line-height: 1;
-  margin-bottom: 8px;
-}
-
-.resource-card-description {
-  display: block;
-  color: #999;
-  padding-right: 8px;
-}
-
-
-/* responsive style */
-@media only screen and (min-width: 320px) and (max-width: 1024px) {
-  .code-boxes-col-2-1 {
-    float: none;
-    width: 100%;
-  }
-  .search {
-    display: none;
-  }
-  .preview-image-boxes {
-    margin: 0!important;
-    float: none;
-    width: 100%;
-  }
-  .preview-image-box {
-    padding-left: 0;
-    margin: 10px 0;
-  }
-}
-
-@media only screen and (min-width: 320px) and (max-width: 767px) {
-  #list,
-  .search {
-    display: none;
-  }
-
-  a.logo {
-    width: 144px;
-    margin-left: auto;
-    margin-right: auto;
-    float: none;
-    display: block;
-  }
-
-  .banner-entry {
-    position: relative;
-    top: 30px;
-    left: 0;
-    text-align: center;
-  }
-
-  .nav {
-    position: fixed;
-    z-index: 1000;
-    top: 0;
-    left: 0;
-    background: #fff;
-    line-height: 60px;
-    margin-right: 0;
-    width: 50%;
-    height: 100%;
-    box-shadow: 10px 0 12px rgba(0,0,0,0.1);
-    opacity: 0;
-    transform: translateX(-100%);
-    overflow-x: hidden;
-    overflow-y: auto;
-  }
-
-  .nav.nav-show {
-    animation: moveLeft .2s ease-in forwards;
-  }
-
-  .nav.nav-hide {
-    animation: moveLeftOut .2s ease-in forwards;
-  }
-
-  .nav .bar {
-    display: none!important;
-  }
-
-  .nav ul li {
-    width: 100%;
-  }
-
-  .toc {
-    display: none;
-  }
-
-  .nav-phone-icon {
-    display: block;
-    width: 16px;
-    height: 50px;
-    position: absolute;
-    left: 30px;
-    top: 32px;
-    cursor: pointer;
-  }
-
-  .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-bottom: 1px solid #e9e9e9;
-    margin-bottom: 30px;
-  }
-
-  .main-container {
-    margin-left: 0;
-    > .markdown > * {
-      width: 100%!important;
-    }
-  }
-
-  .main-wrapper {
-    width: 100%;
-    border-radius: 0;
-  }
-
-  .main-container {
-    padding-left: 30px;
-    padding-right: 30px;
-  }
-
-  .prev-next-nav {
-    padding-left: 0;
-  }
-
-  footer {
-    text-align: center;
-  }
-
-  footer ul li {
-    float: none;
-    width: auto;
-  }
-}
-
-@keyframes moveLeft {
-  0% {
-    transform: translateX(-100%);
-    opacity: 0;
-  }
-  100% {
-    transform: translateX(0px);
-    opacity: 1;
-  }
-}
-
-@keyframes moveLeftOut {
-  0% {
-    transform: translateX(0px);
-    opacity: 1;
-  }
-  100% {
-    transform: translateX(-100%);
-    opacity: 0;
-  }
-}
diff --git a/site/templates/code.html b/site/templates/code.html
deleted file mode 100644
index f5203fd254..0000000000
--- a/site/templates/code.html
+++ /dev/null
@@ -1,14 +0,0 @@
-<div class="code-box" id="{{post.meta.id|removeCodeBoxIdPrefix}}">
-  <div class="code-box-demo">
-    <div id="{{post.meta.id}}"></div>
-    <script>mountNode = document.getElementById('{{post.meta.id}}');</script>
-    {{ post.html }}
-  </div>
-  <div class="code-box-meta markdown">
-    <div class="code-box-title">
-      <a href="#{{post.meta.id|removeCodeBoxIdPrefix}}">{{ post.title }}</a>
-    </div>
-    {{ post.meta.description }}
-    <span class="collapse anticon anticon-circle-o-right" unselectable="none"></span>
-  </div>
-</div>
diff --git a/site/templates/component.html b/site/templates/component.html
deleted file mode 100644
index edb39fca5d..0000000000
--- a/site/templates/component.html
+++ /dev/null
@@ -1,20 +0,0 @@
-{% extends "page.html" %}
-
-{% block content %}
-<section class="main-container">
-  <article class="markdown">
-    <h1>
-      {{ post.title }} {{ post.meta.chinese }}{{ post.meta.subtitle }}
-      {%- if post.meta.API %}
-      <a class="api-link" href="http://{{ post.meta.API }}" target="_blank">
-        <i class="anticon anticon-link"></i>
-        API 使用说明
-      </a>
-      {%- endif %}
-    </h1>
-    {{ post.html|add_anchor }}
-  </article>
-  {%- include "demos.html" %}
-  <div class="api-container markdown"></div>
-</section>
-{% endblock %}
diff --git a/site/templates/demos.html b/site/templates/demos.html
deleted file mode 100644
index b1b359da6b..0000000000
--- a/site/templates/demos.html
+++ /dev/null
@@ -1,40 +0,0 @@
-{%- set items = resource.pages|find_demo_in_component(post.meta.directory) %}
-{%- if items.length > 0 %}
-<h2 class="component-demos">
-  代码演示
-  <i class="anticon anticon-appstore icon-all" title="展开全部代码"></i>
-</h2>
-<div class="code-boxes">
-  {%- if post.meta.cols == 1 %}
-    <div class="code-boxes-col-1-1">
-      {%- for item in items %}
-      {%- set post = item.meta.filepath|parsePost %}
-      {%- include "code.html" %}
-      {%- endfor %}
-    </div>
-  {%- else %}
-  <div class="code-boxes-col-2-1">
-    {%- for item in items|odd %}
-    {%- set post = item.meta.filepath|parsePost %}
-    {%- include "code.html" %}
-    {%- endfor %}
-  </div>
-  <div class="code-boxes-col-2-1">
-    {%- for item in items|even %}
-    {%- set post = item.meta.filepath|parsePost %}
-    {%- include "code.html" %}
-    {%- endfor %}
-  </div>
-  {%- endif %}
-</div>
-<ul class="toc demos-anchor">
-  {%- for item in items %}
-  {%- set post = item.meta.filepath|parsePost %}
-  <li>
-    <a title="{{ post.title }}" href="#{{post.meta.id|removeCodeBoxIdPrefix}}">
-      <span>{{ post.title }}</span>
-    </a>
-  </li>
-  {%- endfor %}
-</ul>
-{%- endif %}
diff --git a/site/templates/home.html b/site/templates/home.html
deleted file mode 100644
index 59a7cd9a13..0000000000
--- a/site/templates/home.html
+++ /dev/null
@@ -1,301 +0,0 @@
-{% extends "layout.html" %}
-
-{% block bodyAttribute %}class="index-page"{% endblock %}
-
-{% block content %}
-<link href="http://fonts.useso.com/css?family=Raleway:600,500,400,300" rel="stylesheet" type="text/css">
-<div id="list"></div>
-<section id="banner"></section>
-<section id="page1" class="page"></section>
-<section id="page2" class="page"></section>
-<section id="page3" class="page"></section>
-<section id="page4" class="page"></section>
-<style>
-  .main-wrapper {
-    background: transparent;
-    width: auto;
-    margin: 0;
-    border-radius: 0;
-    padding: 0;
-    overflow: unset;
-    display: inline;
-    min-height: 600px;
-  }
-
-  #home-page,
-  #home-page > div {
-    height: 100%;
-  }
-
-  header {
-    position: fixed;
-    z-index: 999;
-    background: rgba(0, 0, 0, 0.25);
-    border-bottom: 1px solid transparent;
-    transition: border .5s cubic-bezier(0.455, 0.03, 0.515, 0.955), background .5s cubic-bezier(0.455, 0.03, 0.515, 0.955);
-  }
-
-  header .nav ul li a {
-    color: #eee;
-  }
-
-  @media only screen and (min-width: 320px) and (max-width: 767px) {
-    header .nav ul li a {
-      color: #666;
-    }
-  }
-
-  .nav-phone-icon:before {
-    background: #eee;
-    box-shadow: 0 7px 0 0 #eee, 0 14px 0 0 #eee;
-  }
-
-  .nav ul li a {
-    transition: color 0.5s cubic-bezier(0.455, 0.03, 0.515, 0.955);
-  }
-
-  .search {
-    border-left-color: rgba(235, 237, 238, .5);
-    transition: border 0.5s cubic-bezier(0.455, 0.03, 0.515, 0.955);
-  }
-
-  .search #autoComplete .ant-select-selection {
-    background: transparent;
-  }
-
-  #banner {
-    position: relative;
-    height: 100%;
-    width: 100%;
-    background: url("https://os.alipayobjects.com/rmsportal/GhjqstwSgxBXrZS.png") no-repeat center / cover;
-  }
-
-  .banner-text-wrapper {
-    position: absolute;
-    left: 10%;
-    top: 55%;
-    color: #fff;
-    text-align: right;
-  }
-
-  header.home-nav-bottom {
-    background: rgba(255, 255, 255, 0.9);
-    border-bottom-color: #EBEDEE;
-  }
-
-  .home-nav-bottom .search {
-    border-left-color: #EBEDEE;
-  }
-
-  .home-nav-bottom .nav a {
-    color: #666;
-  }
-
-  .banner-text-wrapper h2 {
-    font-size: 40px;
-    font-weight: normal;
-    font-family: 'Raleway';
-  }
-
-  .banner-text-wrapper h2 p {
-    color: #FF3171;
-    display: inline-block;
-  }
-
-  .banner-text-wrapper .line {
-    width: 0.8px;
-    height: 76px;
-    position: absolute;
-    background: rgba(255, 255, 255, .44);
-    background-image: -webkit-linear-gradient(top, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0.03));
-    background-image: -moz-linear-gradient(top, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0.03));
-    background-image: -ms-linear-gradient(top, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0.03));
-    background-image: -o-linear-gradient(top, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0.03));
-    top: 16px;
-    right: -25px;
-  }
-
-  .banner-text-wrapper > p {
-    margin: 10px auto 24px;
-    font-size: 16px;
-  }
-
-  .banner-text-wrapper .start-button {
-    margin-bottom: 24px;
-  }
-
-  .banner-text-wrapper .start-button a {
-    width: 155px;
-    height: 45px;
-    border-radius: 6px;
-    border: 1px solid #2db7f5;
-    color: #2db7f5;
-    font-size: 18px;
-    background: transparent;
-    transition: box-shadow .45s ease-out;
-    text-align: center;
-    line-height: 42px;
-    display: inline-block;
-  }
-
-  .banner-text-wrapper iframe {
-    border: 0;
-    opacity: 0.8;
-    transition: opacity 0.3s ease;
-  }
-
-  .banner-text-wrapper iframe:hover {
-    opacity: 1;
-  }
-
-  .banner-text-wrapper a:hover {
-    box-shadow: 0 0 10px #2db7f5;
-  }
-
-  .banner-text-wrapper a span {
-    margin-left: 15px;
-  }
-
-  .down {
-    text-align: center;
-    position: absolute;
-    bottom: 30px;
-    color: rgba(255, 255, 255, .75);
-    left: 50%;
-    margin-left: -7px;
-  }
-
-  section {
-    height: 100%;
-    width: 100%;
-    background: #fff;
-  }
-
-  .page {
-    min-height: 700px;
-  }
-
-  .content-wrapper {
-    width: 100%;
-    height: 100%;
-    max-width: 1850px;
-    margin: auto;
-    overflow: hidden;
-  }
-
-  .content-wrapper .image-wrapper {
-    width: 65%;
-    float: left;
-    position: relative;
-  }
-
-  .image1 {
-    background: url("https://t.alipayobjects.com/images/T1Ch8kXfpdXXXXXXXX.png") no-repeat right / 841px;
-    height: 511px;
-    top: 50%;
-    margin-top: -256px;
-  }
-
-  .image2 {
-    background: url("https://t.alipayobjects.com/images/T1r5RkXotXXXXXXXXX.png") no-repeat left / 800px;
-    height: 474px;
-    top: 50%;
-    margin-top: -266px;
-  }
-
-  .image3 {
-    padding-right: 10%;
-    background: url("https://t.alipayobjects.com/images/T1nx0kXdFfXXXXXXXX.png") no-repeat right / 639px;
-    background-origin: content-box;
-    height: 500px;
-    top: 50%;
-    margin-top: -250px;
-  }
-
-  .image4 {
-    background: url("https://t.alipayobjects.com/images/T1lyJkXg4aXXXXXXXX.png") no-repeat center / 615px;
-    height: 364px;
-    margin: auto;
-  }
-
-  .content-wrapper .text-wrapper {
-    width: 35%;
-    float: left;
-    position: relative;
-    top: 20%;
-    left: 10px;
-  }
-
-  .content-wrapper .text-wrapper h2,
-  .content-wrapper .text-wrapper-bottom h2 {
-    font-size: 32px;
-    color: #666;
-    font-weight: normal;
-  }
-
-  .content-wrapper .text-wrapper p {
-    margin: 10px 0 20px;
-    font-size: 16px;
-    line-height: 28px;
-    color: #999999;
-  }
-
-  .content-wrapper .left-text {
-    padding-left: 10%;
-  }
-
-  .text-wrapper-bottom {
-    text-align: center;
-    margin: 10% auto 40px;
-  }
-
-  .text-wrapper-bottom p {
-    margin: 20px auto;
-    font-size: 16px;
-    line-height: 28px;
-    color: #999;
-  }
-
-  #footer {
-    background: #000;
-  }
-
-  .anticon-right {
-    transform: scale(0.6);
-  }
-
-  footer,
-  footer ul li > h2 {
-    color: #999;
-  }
-
-  footer ul li > a {
-    color: #eee;
-  }
-
-  #list {
-    position: fixed;
-    z-index: 9998;
-    top: 50%;
-    right: 20px;
-    width: 6px;
-    margin-top: -35px;
-  }
-
-  .list-point {
-    width: 6px;
-    height: 6px;
-    background: #00AAEE;
-    border-radius: 6px;
-    float: left;
-    margin: 4px auto;
-    opacity: 0.5;
-    cursor: pointer;
-    transition: opacity .3s;
-  }
-
-  .list-point:hover, .list-point.active {
-    opacity: 1;
-  }
-</style>
-{% endblock %}
diff --git a/site/templates/layout.html b/site/templates/layout.html
deleted file mode 100644
index 2b8a86f7cf..0000000000
--- a/site/templates/layout.html
+++ /dev/null
@@ -1,110 +0,0 @@
-<!DOCTYPE html>
-<html>
-  <head>
-    <meta charset="utf-8">
-    <meta http-equiv="X-UA-Compatible" content="IE=edge">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <meta name="apple-mobile-web-app-capable" content="yes">
-    <meta name="apple-mobile-web-app-status-bar-style" content="black">
-    <meta name="format-detection" content="telephone=no">
-    <meta name="description" content="{{ config.site.description }}"/>
-    <title>{% block title %}{{ config.site.name }} - {{ config.site.description }}{% endblock %}</title>
-    <link rel="icon" href="https://t.alipayobjects.com/images/T1QUBfXo4fXXXXXXXX.png" type="image/x-icon">
-    <link rel="shortcut icon" href="https://t.alipayobjects.com/images/T1QUBfXo4fXXXXXXXX.png" type="image/x-icon">
-    {% block styles %}{% endblock %}
-    <link rel="stylesheet" href="{{static_url('../dist/demo.css')}}">
-    <script src="https://as.alipayobjects.com/g/component/??console-polyfill/0.2.2/index.js,es5-shim/4.5.7/es5-shim.min.js,es5-shim/4.5.7/es5-sham.min.js,html5shiv/3.7.2/html5shiv.min.js,media-match/2.0.2/media.match.min.js,jquery/1.11.3/jquery.min.js,bluebird/3.1.1/bluebird.min.js"></script>
-    <script>
-    (function() {
-      window.ANT_COMPONENTS = [];
-      window.InstantClickChangeFns = [];
-      {%- for item in resource.pages|find_category(["CSS","Components"]) %}
-      ANT_COMPONENTS.push({
-        title: '{{item.title}}',
-        desc: '{{item.meta.chinese}}'
-      });
-      {%- endfor %}
-      // fix ie location origin
-      // http://stackoverflow.com/questions/22564167/window-location-origin-gives-wrong-value-when-using-ie
-      if (!window.location.origin) {
-        window.location.origin = window.location.protocol + "//"
-          + window.location.hostname
-          + (window.location.port ? ':' + window.location.port : '');
-      }
-      var i = location.pathname.split('/').lastIndexOf('ant-design');
-      if (i > 0) {
-        window.rootUrl = location.origin + location.pathname.split('/').slice(0, 2+1).join('/');
-      } else {
-        window.rootUrl = location.origin;
-      }
-    })();
-    </script>
-    <script>
-      window.antdVersion = {
-        latest: '{{config.package.version}}'
-      };
-    </script>
-    <script src="{{static_url('../dist/demo.js')}}"></script>
-    {% block scripts %}{% endblock %}
-  </head>
-  <body {% block bodyAttribute %}{% endblock %}>
-    <header id="header" class="clearfix">
-      <a class="logo" href="{{static_url('../')}}">
-        <img width="60" src="https://t.alipayobjects.com/images/rmsweb/T1B9hfXcdvXXXXXXXX.svg">
-        {{ config.site.name }}
-      </a>
-      <div class="search">
-        <div id="autoComplete"></div>
-      </div>
-      <nav class="nav" tabindex="-1">
-        <span class="bar"></span>
-        <ul>
-          <li class="{%- if post.meta.filepath === 'README.md' %}current{%- endif %}">
-            <a href="{{static_url('../')}}">首页</a>
-          </li>
-          <li class="{%- if post.directory|rootDirectoryIn(['docs/practice']) %}current{%- endif %}">
-            <a href="{{static_url('../docs/practice/cases')}}">实践</a>
-          </li>
-          <li class="{%- if post.directory|rootDirectoryIn(['docs/pattern']) %}current{%- endif %}">
-            <a href="{{static_url('../docs/pattern/navigation')}}">模式</a>
-          </li>
-          <li class="{%- if post.directory|rootDirectoryIn(['docs/react','components']) or post.meta.filepath === 'CHANGELOG.md' %}current{%- endif %}">
-            <a href="{{static_url('../docs/react/introduce')}}">组件</a>
-          </li>
-          <li class="{%- if post.directory|rootDirectoryIn(['docs/spec']) %}current{%- endif %}">
-            <a href="{{static_url('../docs/spec/introduce')}}">语言</a>
-          </li>
-          <li class="{%- if post.directory|rootDirectoryIn(['docs/resource']) %}current{%- endif %}">
-            <a href="{{static_url('../docs/resource/download')}}">资源</a>
-          </li>
-        </ul>
-      </nav>
-      <div class="nav-phone-icon"></div>
-    </header>
-    <div class="main-wrapper">
-      {% block aside %}{% endblock %} {% block content %}{% endblock %}
-    </div>
-    {%- include "footer.html" %}
-    <script data-no-instant>
-    if (!location.port) {
-      (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
-      (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
-      m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
-      })(window,document,'script','//www.google-analytics.com/analytics.js','ga');
-      ga('create', 'UA-72788897-1', 'auto');
-      ga('send', 'pageview');
-      InstantClick.on('change', function() {
-        ga('send', 'pageview', location.pathname + location.search);
-      });
-    }
-    </script>
-    <script data-no-instant>
-      InstantClick.on('change', function() {
-        InstantClickChangeFns.forEach(function(fn) {
-          fn();
-        });
-      });
-      InstantClick.init();
-    </script>
-  </body>
-</html>
diff --git a/site/templates/page.html b/site/templates/page.html
deleted file mode 100644
index 8708ab74a8..0000000000
--- a/site/templates/page.html
+++ /dev/null
@@ -1,26 +0,0 @@
-{% extends "layout.html" %}
-
-{% block title %}
-{%- if post.title !== config.site.name %}
-{{post.title}} {{ post.meta.chinese }} - {{config.site.name}}
-{%- else %}
-{{ config.site.name }} - {{ config.site.description }}
-{%- endif %}
-{% endblock %}
-
-{% block description %}{% if post.summay %}{{post.summary}}{% endif %}{% endblock %}
-
-{% block aside %}
-{%- include "aside.html" %}
-{% endblock %}
-
-{% block content %}
-<section class="main-container">
-  <article class="markdown">
-    <h1>{{ post.title }} <span class="subtitle">{{ post.meta.subtitle }}</span></h1>
-    {{ post.meta.description }}
-    <div class="toc">{{ post.toc }}</div>
-    {{ post.html|add_anchor }}
-  </article>
-</section>
-{% endblock %}