diff --git a/site/templates/component.html b/site/templates/component.html
index 3b3dc74400..5bf9843c25 100644
--- a/site/templates/component.html
+++ b/site/templates/component.html
@@ -17,5 +17,6 @@
   {%- if post.meta.template === 'component' && !post.meta.nodemos %}
   {%- include "demos.html" %}
   {%- endif %}
+  <div class="api-container markdown"></div>
 </section>
 {% endblock %}
diff --git a/site/templates/demos.html b/site/templates/demos.html
index 8e68551344..6f344dece5 100644
--- a/site/templates/demos.html
+++ b/site/templates/demos.html
@@ -8,7 +8,7 @@
   </a>
   {%- endif %}
 </h2>
-<div class="code-boxes clearfix">
+<div class="code-boxes">
   {%- set items = resource.pages|find_demo_in_component(post.meta.directory) %}
   {%- if post.meta.cols == 1 %}
     <div class="code-boxes-col-1-1">
diff --git a/static/script.js b/static/script.js
index c4e95eef72..873b4925a5 100644
--- a/static/script.js
+++ b/static/script.js
@@ -33,19 +33,24 @@ $(function() {
       $(this).parent().parent().addClass('expand');
     }
   });
-    $.easing['jswing'] = $.easing['swing'];
-    $.extend($.easing,{
-        easeInCirc: function (x, t, b, c, d) {
-            return -c * (Math.sqrt(1 - (t/=d)*t) - 1) + b;
-        },
-        easeOutCirc: function (x, t, b, c, d) {
-            return c * Math.sqrt(1 - (t=t/d-1)*t) + b;
-        },
-        easeInOutCirc: function (x, t, b, c, d) {
-            if ((t/=d/2) < 1) return -c/2 * (Math.sqrt(1 - t*t) - 1) + b;
-            return c/2 * (Math.sqrt(1 - (t-=2)*t) + 1) + b;
-        }
-    });
+
+  // 移动 API 文档到演示下方
+  $('.markdown #api').nextAll().andSelf().appendTo('.api-container');
+
+  $.easing['jswing'] = $.easing['swing'];
+  $.extend($.easing,{
+    easeInCirc: function (x, t, b, c, d) {
+      return -c * (Math.sqrt(1 - (t/=d)*t) - 1) + b;
+    },
+    easeOutCirc: function (x, t, b, c, d) {
+      return c * Math.sqrt(1 - (t=t/d-1)*t) + b;
+    },
+    easeInOutCirc: function (x, t, b, c, d) {
+      if ((t/=d/2) < 1) return -c/2 * (Math.sqrt(1 - t*t) - 1) + b;
+      return c/2 * (Math.sqrt(1 - (t-=2)*t) + 1) + b;
+    }
+  });
+
   var navFunc = {
     navStrArr: [],
     init: function() {
@@ -117,22 +122,22 @@ $(function() {
       var title = self.listBox.find("h4");
       title.bind("click", function(e) {
         var parent = $(this).parent(),
-            list=parent.find("ul");
+          list=parent.find("ul");
         if (parent.attr("open")) {
           parent.removeAttr("open");
           if (parent.index() == self.num) {
             $(this).addClass("current");
           }
           list.animate({marginTop:-list.height()},400,"easeInOutCirc",function (){
-              list.css({"display":"none"})
+            list.css({"display":"none"})
           })
         } else {
           parent.attr("open", true);
           if (parent.index() == self.num) {
             $(this).removeClass("current");
           }
-            list.css({"display":"block","margin-top":-list.height()});
-            list.animate({marginTop:0},400,"easeInOutCirc")
+          list.css({"display":"block","margin-top":-list.height()});
+          list.animate({marginTop:0},400,"easeInOutCirc")
         }
         //parent.find("ul").slideToggle(300);
       });
diff --git a/static/style.css b/static/style.css
index c0a8e54d48..0ab0278a83 100644
--- a/static/style.css
+++ b/static/style.css
@@ -1671,6 +1671,10 @@ footer ul li > a {
   color: #3B4357;
 }
 
+.code-boxes {
+  overflow: hidden;
+}
+
 .code-boxes-col-1-1 {
   width: 80%;
 }