diff --git a/.gitignore b/.gitignore
index f22afe06b9..2540e09903 100644
--- a/.gitignore
+++ b/.gitignore
@@ -23,6 +23,6 @@ nohup.out
 _site
 _data
 dist
-lib
+/lib
 elasticsearch-*
 config/base.yaml
diff --git a/bisheng.config.js b/bisheng.config.js
index 400c9a19a3..4428a653b5 100644
--- a/bisheng.config.js
+++ b/bisheng.config.js
@@ -1,6 +1,7 @@
 module.exports = {
   source: ['./components', './docs'],
   theme: './site/theme',
+  plugins: ['./site/bisheng-plugin-antd'],
   webpackConfig(config) {
     config.resolve.alias = {
       antd: process.cwd(),
diff --git a/site/component/ImagePreview/index.jsx b/site/bisheng-plugin-antd/lib/ImagePreview.jsx
similarity index 100%
rename from site/component/ImagePreview/index.jsx
rename to site/bisheng-plugin-antd/lib/ImagePreview.jsx
diff --git a/site/component/VideoPlayer/index.jsx b/site/bisheng-plugin-antd/lib/VideoPlayer.jsx
similarity index 100%
rename from site/component/VideoPlayer/index.jsx
rename to site/bisheng-plugin-antd/lib/VideoPlayer.jsx
diff --git a/site/bisheng-plugin-antd/lib/browser.js b/site/bisheng-plugin-antd/lib/browser.js
new file mode 100644
index 0000000000..f8d31da63a
--- /dev/null
+++ b/site/bisheng-plugin-antd/lib/browser.js
@@ -0,0 +1,41 @@
+const React = require('react');
+const ReactDOM = require('react-dom');
+const Link = require('react-router').Link;
+const toReactComponent = require('jsonml-to-react-component');
+const JsonML = require('jsonml.js/lib/utils');
+const VideoPlayer = require('./VideoPlayer');
+const ImagePreview = require('./ImagePreview');
+
+module.exports = () => {
+  return {
+    converters: [
+      [(node) => React.isValidElement(node), (node, index) => {
+        return React.cloneElement(node, { key: index });
+      }],
+      [(node) => typeof node === 'function', (node, index) => {
+        return React.cloneElement(node(React, ReactDOM), { key: index });
+      }],
+      [(node) => JsonML.getTagName(node) === 'video', (node, index) =>
+        <VideoPlayer video={JsonML.getAttributes(node)} key={index} />,
+      ],
+      [(node) => JsonML.isElement(node) && JsonML.getTagName(node) === 'a' && !(
+        JsonML.getAttributes(node).class ||
+          (JsonML.getAttributes(node).href &&
+           JsonML.getAttributes(node).href.indexOf('http') === 0)
+      ), (node, index) => {
+        return <Link to={JsonML.getAttributes(node).href} key={index}>{toReactComponent(JsonML.getChildren(node)[0])}</Link>;
+      }],
+      [(node) => {
+        return JsonML.isElement(node) &&
+          JsonML.getTagName(node) === 'p' &&
+          JsonML.getTagName(JsonML.getChildren(node)[0]) === 'img' &&
+          /preview-img/gi.test(JsonML.getAttributes(JsonML.getChildren(node)[0]).class);
+      }, (node, index) => {
+        const imgs = JsonML.getChildren(node)
+                .filter((img) => JsonML.isElement(img) && Object.keys(JsonML.getAttributes(img)).length > 0)
+                .map((img) => JsonML.getAttributes(img));
+        return <ImagePreview imgs={imgs} key={index} />;
+      }],
+    ],
+  };
+};
diff --git a/site/component/utils.js b/site/component/utils.js
deleted file mode 100644
index 23886e767f..0000000000
--- a/site/component/utils.js
+++ /dev/null
@@ -1,80 +0,0 @@
-import React from 'react';
-import ReactDOM from 'react-dom';
-import { Link } from 'react-router';
-import { getTagName, getAttributes, getChildren, isElement } from 'jsonml.js/lib/utils';
-import toReactComponent from 'jsonml-to-react-component';
-import VideoPlayer from './VideoPlayer';
-import ImagePreview from './ImagePreview';
-
-function isHeading(type) {
-  return /h[1-6]/i.test(type);
-}
-
-export function jsonmlToComponent(pathname, jsonml) {
-  return toReactComponent(jsonml, [
-    [(node) => React.isValidElement(node), (node, index) => {
-      return React.cloneElement(node, { key: index });
-    }],
-    [(node) => typeof node === 'function', (node, index) => {
-      return React.cloneElement(node(React, ReactDOM), { key: index });
-    }],
-    [(node) => isHeading(getTagName(node)), (node, index) => {
-      const children = getChildren(node);
-      return React.createElement(getTagName(node), {
-        key: index,
-        id: children,
-        ...getAttributes(node),
-      }, [
-        <span key="title">{children.map((child) => toReactComponent(child))}</span>,
-        <Link to={{ pathname, query: { scrollTo: children } }} className="anchor" key="anchor">#</Link>,
-      ]);
-    }],
-    [(node) => getTagName(node) === 'pre' && getAttributes(node).highlighted, (node, index) => {
-      return React.createElement('pre', { key: index, lang: getAttributes(node).lang }, React.createElement(
-        'code',
-        { dangerouslySetInnerHTML: { __html: getChildren(getChildren(node)[0])[0] } }
-      ));
-    }],
-    [(node) => getTagName(node) === 'video', (node, index) =>
-      <VideoPlayer video={getAttributes(node)} key={index} />,
-    ],
-    [(node) => isElement(node) && getTagName(node) === 'a' && !(
-      getAttributes(node).class ||
-        (getAttributes(node).href &&
-         getAttributes(node).href.indexOf('http') === 0)
-    ), (node, index) => {
-      return <Link to={getAttributes(node).href} key={index}>{toReactComponent(getChildren(node)[0])}</Link>;
-    }],
-    [(node) => {
-      return isElement(node) &&
-        getTagName(node) === 'p' &&
-        getTagName(getChildren(node)[0]) === 'img' &&
-        /preview-img/gi.test(getAttributes(getChildren(node)[0]).class);
-    }, (node, index) => {
-      const imgs = getChildren(node)
-              .filter((img) => isElement(img) && Object.keys(getAttributes(img)).length > 0)
-              .map((img) => getAttributes(img));
-      return <ImagePreview imgs={imgs} key={index} />;
-    }],
-  ]);
-}
-
-export function setTitle(title) {
-  document.title = title;
-}
-
-export function ping(url, callback) {
-  const img = new Image();
-  let done;
-  const finish = (status) => {
-    if (!done) {
-      done = true;
-      img.src = '';
-      callback(status);
-    }
-  };
-  img.onload = () => finish('responded');
-  img.onerror = () => finish('error');
-  img.src = url;
-  setTimeout(() => finish('timeout'), 1500);
-}
diff --git a/site/theme/index.js b/site/theme/index.js
index d4514c7729..b2fe86bbf5 100644
--- a/site/theme/index.js
+++ b/site/theme/index.js
@@ -20,9 +20,15 @@ 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',
   },
 };
diff --git a/site/common/styles/preview-img.less b/site/theme/static/preview-img.less
similarity index 100%
rename from site/common/styles/preview-img.less
rename to site/theme/static/preview-img.less
diff --git a/site/theme/static/style.js b/site/theme/static/style.js
index 39fb376600..4042d44f0b 100644
--- a/site/theme/static/style.js
+++ b/site/theme/static/style.js
@@ -6,4 +6,6 @@ import './page-nav.less';
 import './markdown.less';
 import './resource.less';
 import './responsive.less';
+import './preview-img.less';
+import './toc.less';
 import './not-found.less';
diff --git a/site/common/styles/toc.less b/site/theme/static/toc.less
similarity index 100%
rename from site/common/styles/toc.less
rename to site/theme/static/toc.less
diff --git a/site/theme/template/Content/MainContent.jsx b/site/theme/template/Content/MainContent.jsx
index 425afa7285..50cd89c3d3 100644
--- a/site/theme/template/Content/MainContent.jsx
+++ b/site/theme/template/Content/MainContent.jsx
@@ -101,8 +101,8 @@ export default class MainContent extends React.Component {
 
   getMenuItems() {
     const props = this.props;
-    // TODO: data
-    const menuItems = utils.getMenuItems(props.data.docs.resource, this.context.intl.locale);
+    const 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)
             .sort((a, b) => {
diff --git a/site/theme/template/utils.jsx b/site/theme/template/utils.jsx
index d6d6609e65..6920f558a4 100644
--- a/site/theme/template/utils.jsx
+++ b/site/theme/template/utils.jsx
@@ -1,7 +1,8 @@
 export function getMenuItems(data, locale) {
   const menuMeta = Object.keys(data)
           .map((key) => data[key])
-          .map((file) => {
+          .map((item) => {
+            const file = item.index || item;
             if (file.meta) {
               return file.meta;
             }