diff --git a/site/bisheng-plugin-antd/lib/node.js b/site/bisheng-plugin-antd/lib/node.js
new file mode 100644
index 0000000000..4b11bf253c
--- /dev/null
+++ b/site/bisheng-plugin-antd/lib/node.js
@@ -0,0 +1,11 @@
+const path = require('path');
+const processDoc = require('./process-doc');
+const processDemo = require('./process-demo');
+
+module.exports = (markdownData) => {
+  const isDemo = path.dirname(markdownData.meta.filename).endsWith('/demo');
+  if (isDemo) {
+    return processDemo(markdownData);
+  }
+  return processDoc(markdownData);
+};
diff --git a/site/bisheng-plugin-antd/lib/process-demo.js b/site/bisheng-plugin-antd/lib/process-demo.js
new file mode 100644
index 0000000000..8109750a8f
--- /dev/null
+++ b/site/bisheng-plugin-antd/lib/process-demo.js
@@ -0,0 +1,3 @@
+module.exports = (markdownData) => {
+  return markdownData;
+};
diff --git a/site/bisheng-plugin-antd/lib/process-doc.js b/site/bisheng-plugin-antd/lib/process-doc.js
new file mode 100644
index 0000000000..940d892c45
--- /dev/null
+++ b/site/bisheng-plugin-antd/lib/process-doc.js
@@ -0,0 +1,15 @@
+const JsonML = require('jsonml.js/lib/utils');
+
+module.exports = (markdownData) => {
+  const contentChildren = JsonML.getChildren(markdownData.content);
+  const apiStartIndex = contentChildren.findIndex((node) => {
+    return JsonML.getTagName(node) === 'h2' &&
+      JsonML.getChildren(node)[0] === 'API';
+  });
+  const content = contentChildren.slice(0, apiStartIndex);
+  const api = contentChildren.slice(apiStartIndex);
+
+  markdownData.content = ['section'].concat(content);
+  markdownData.api = ['section'].concat(api);
+  return markdownData;
+};
diff --git a/site/theme/index.js b/site/theme/index.js
index b2fe86bbf5..1a0790078a 100644
--- a/site/theme/index.js
+++ b/site/theme/index.js
@@ -1,3 +1,5 @@
+const contentTmpl = './template/Content/index';
+
 export default {
   categoryOrder: {
     组件: 0,
@@ -20,15 +22,11 @@ export default {
   },
   routes: {
     '/': './template/Home/index',
-    '/docs/practice/:children': './template/Content/index',
-    '/docs/pattern/:children': './template/Content/index',
-    '/docs/spec/:children': './template/Content/index',
-    '/docs/resource/:children': './template/Content/index',
-  },
-  redirects: {
-    '/docs/practice': '/docs/practice/cases',
-    '/docs/pattern': '/docs/pattern/navigation',
-    '/docs/spec': '/docs/spec/introduce',
-    '/docs/resource': '/docs/resource/download',
+    '/docs/practice/:children': contentTmpl,
+    '/docs/pattern/:children': contentTmpl,
+    '/docs/react/:children': contentTmpl,
+    '/components/:children': contentTmpl,
+    '/docs/spec/:children': contentTmpl,
+    '/docs/resource/:children': contentTmpl,
   },
 };
diff --git a/site/common/styles/font.less b/site/theme/static/font.less
similarity index 100%
rename from site/common/styles/font.less
rename to site/theme/static/font.less
diff --git a/site/common/styles/highlight.less b/site/theme/static/highlight.less
similarity index 100%
rename from site/common/styles/highlight.less
rename to site/theme/static/highlight.less
diff --git a/site/theme/static/markdown.less b/site/theme/static/markdown.less
index 7d59a03458..2209bc32a9 100644
--- a/site/theme/static/markdown.less
+++ b/site/theme/static/markdown.less
@@ -99,7 +99,6 @@
 
 .markdown pre code {
   border: none;
-  padding: 1em 2em;
   background: #f7f7f7;
   margin: 0;
   font-size: 13px;
diff --git a/site/theme/static/style.js b/site/theme/static/style.js
index 4042d44f0b..1c9d612dd7 100644
--- a/site/theme/static/style.js
+++ b/site/theme/static/style.js
@@ -9,3 +9,5 @@ import './responsive.less';
 import './preview-img.less';
 import './toc.less';
 import './not-found.less';
+import './font.less';
+import './highlight.less';
diff --git a/site/theme/template/Content/Article.jsx b/site/theme/template/Content/Article.jsx
index b3733c52c8..0fbe5def03 100644
--- a/site/theme/template/Content/Article.jsx
+++ b/site/theme/template/Content/Article.jsx
@@ -42,7 +42,7 @@ export default class Article extends React.Component {
   }
   render() {
     const { content, location } = this.props;
-    const jumper = content.toc.map((node) => {
+    const jumper = (content.toc || []).map((node) => {
       return (
         <li key={getChildren(node)[0]}>
           <Link to={{ pathname: location.pathname, query: { scrollTo: getChildren(node)[0] } }}>
diff --git a/site/component/ComponentDoc/index.jsx b/site/theme/template/Content/ComponentDoc.jsx
similarity index 89%
rename from site/component/ComponentDoc/index.jsx
rename to site/theme/template/Content/ComponentDoc.jsx
index 683ce2d895..2d360652ef 100644
--- a/site/component/ComponentDoc/index.jsx
+++ b/site/theme/template/Content/ComponentDoc.jsx
@@ -2,9 +2,9 @@ import React from 'react';
 import { Link } from 'react-router';
 import classNames from 'classnames';
 import { Row, Col, Icon, Affix } from 'antd';
-import Demo from '../Demo';
+import { getChildren } from 'jsonml.js/lib/utils';
+import Demo from './Demo';
 import * as utils from '../utils';
-import demosList from '../../../_data/demos-list';
 
 export default class ComponentDoc extends React.Component {
   static contextTypes = {
@@ -34,11 +34,12 @@ export default class ComponentDoc extends React.Component {
   }
 
   render() {
-    const { doc, location } = this.props;
+    const props = this.props;
+    const { doc, location } = props;
     const scrollTo = location.query.scrollTo;
-    const { description, meta } = doc;
+    const { content, meta } = doc;
     const locale = this.context.intl.locale;
-    const demos = (demosList[meta.fileName.replace(`.${locale}`, '')] || [])
+    const demos = Object.keys(props.demos).map((key) => props.demos[key])
             .filter((demoData) => !demoData.meta.hidden);
     const expand = this.state.expandAll;
 
@@ -91,10 +92,9 @@ export default class ComponentDoc extends React.Component {
         <section className="markdown">
           <h1>{meta.title || meta.english} {meta.subtitle || meta.chinese}</h1>
           {
-            utils.jsonmlToComponent(
-              location.pathname,
+            props.utils.toReactComponent(
               ['section', { className: 'markdown' }]
-                .concat(description)
+                .concat(getChildren(content))
             )
           }
           <h2>
@@ -118,8 +118,7 @@ export default class ComponentDoc extends React.Component {
           }
         </Row>
         {
-          utils.jsonmlToComponent(
-            location.pathname,
+          props.utils.toReactComponent(
             ['section', {
               className: 'markdown api-container',
             }].concat(doc.api || [])
diff --git a/site/component/Demo/index.jsx b/site/theme/template/Content/Demo.jsx
similarity index 100%
rename from site/component/Demo/index.jsx
rename to site/theme/template/Content/Demo.jsx
diff --git a/site/theme/template/Content/MainContent.jsx b/site/theme/template/Content/MainContent.jsx
index 50cd89c3d3..f3ff1eb645 100644
--- a/site/theme/template/Content/MainContent.jsx
+++ b/site/theme/template/Content/MainContent.jsx
@@ -3,6 +3,7 @@ import { Link } from 'react-router';
 import scrollIntoView from 'dom-scroll-into-view';
 import { Row, Col, Menu } from 'antd';
 import Article from './Article';
+import ComponentDoc from './ComponentDoc';
 import * as utils from '../utils';
 import config from '../../';
 const SubMenu = Menu.SubMenu;
@@ -101,7 +102,16 @@ export default class MainContent extends React.Component {
 
   getMenuItems() {
     const props = this.props;
-    const moduleData = props.utils.get(props.data, props.location.pathname.split('/').slice(0, 2));
+    let moduleData;
+    if (/(docs\/react\/)|(components\/)/i.test(props.location.pathname)) {
+      moduleData = {
+        ...props.data.docs.react,
+        ...props.data.components,
+      };
+    } else {
+      moduleData = props.utils.get(props.data, props.location.pathname.split('/').slice(0, 2));
+    }
+
     const menuItems = utils.getMenuItems(moduleData, this.context.intl.locale);
     const topLevel = this.generateSubMenuItems(menuItems.topLevel);
     const subMenu = Object.keys(menuItems).filter(this.isNotTopLevel)
@@ -153,7 +163,17 @@ export default class MainContent extends React.Component {
     const { prev, next } = this.getFooterNav(menuItems, activeMenuItem);
 
     const locale = this.context.intl.locale;
-    const moduleData = props.utils.get(props.data, props.location.pathname.split('/').slice(0, 2));
+    let moduleData;
+    if (/(docs\/react\/)|(components\/)/i.test(props.location.pathname)) {
+      moduleData = {
+        ...props.data.docs.react,
+        ...props.data.components,
+      };
+    } else {
+      moduleData = props.utils.get(props.data, props.location.pathname.split('/').slice(0, 2));
+    }
+    const pageData = props.pageData.index || props.pageData;
+    const localizedPageData = pageData[locale] || pageData;
     return (
       <div className="main-wrapper">
         <Row>
@@ -165,7 +185,11 @@ export default class MainContent extends React.Component {
             </Menu>
           </Col>
           <Col lg={20} md={18} sm={24} xs={24} className="main-container">
-            <Article {...props} content={props.pageData[locale] || props.pageData} />
+            {
+              props.pageData.demo ?
+                <ComponentDoc {...props} doc={localizedPageData} demos={props.pageData.demo} /> :
+                <Article {...props} content={localizedPageData} />
+            }
           </Col>
         </Row>
 
diff --git a/site/theme/template/Layout/Header.jsx b/site/theme/template/Layout/Header.jsx
index 0708c6e076..bc9266e623 100644
--- a/site/theme/template/Layout/Header.jsx
+++ b/site/theme/template/Layout/Header.jsx
@@ -169,27 +169,27 @@ export default class Header extends React.Component {
                 </Link>
               </Menu.Item>
               <Menu.Item key="docs/practice">
-                <Link to="/docs/practice">
+                <Link to="/docs/practice/cases">
                   <FormattedMessage id="app.header.menu.practice" />
                 </Link>
               </Menu.Item>
               <Menu.Item key="docs/pattern">
-                <Link to="/docs/pattern">
+                <Link to="/docs/pattern/navigation">
                   <FormattedMessage id="app.header.menu.pattern" />
                 </Link>
               </Menu.Item>
               <Menu.Item key="docs/react">
-                <Link to="/docs/react">
+                <Link to="/docs/react/introduce">
                   <FormattedMessage id="app.header.menu.react" />
                 </Link>
               </Menu.Item>
               <Menu.Item key="docs/spec">
-                <Link to="/docs/spec">
+                <Link to="/docs/spec/introduce">
                   <FormattedMessage id="app.header.menu.spec" />
                 </Link>
               </Menu.Item>
               <Menu.Item key="docs/resource">
-                <Link to="/docs/resource">
+                <Link to="/docs/resource/download">
                   <FormattedMessage id="app.header.menu.resource" />
                 </Link>
               </Menu.Item>