layout

components/button/index.md

@@ -5,3 +5,17 @@
 ---
 
 这是一个按钮。
+
+## 什么时候使用
+
+的凯撒垃圾分类快结束的凯撒垃圾分类快结束的凯撒垃圾分类快结束的凯撒垃圾分类快结束的凯撒垃圾分类快结束。
+
+的凯撒垃圾分类快结束的凯撒垃圾分类快结束的凯撒垃圾分类快结束，的凯撒垃圾分类快结束。
+
+
+## 为什么使用
+
+的凯撒垃圾分类的凯撒垃圾分类快结束的凯撒垃圾分类快结束的凯撒垃圾分类快结束的凯撒垃圾分类快结束的凯撒垃圾分类快结束的凯撒垃圾分类快结束的凯撒垃圾分类快结束的凯撒垃圾分类快结束的凯撒垃圾分类快结束的凯撒垃圾分类快结束结束的凯撒垃圾分类快结束的凯撒垃圾分类快结束的凯撒垃圾分类快结束的凯撒垃圾分类快结束。
+
+的凯撒垃圾分类快结束的凯撒垃圾分类快结束的凯撒垃圾分类快结束，的凯撒垃圾分类快结束。
+

static/code.jsx

@@ -6,17 +6,24 @@ var CodeBox = React.createClass({
     };
   },
   componentDidMount: function() {
-    var that = this;
     $.get('/' + this.props.src).then(function(data) {
-      that.setState({
-        html: data
+      var item = $(data);
+      item.find('.highlight').appendTo(item);
+      this.setState({
+        html: item.html()
       });
-    });
+    }.bind(this));
+  },
+  handleClick: function(e) {
+    if (!$(e.target).hasClass('collapse')) {
+      return;
+    }
+    $(e.target).parent().parent().find('.highlight').toggle();
   },
   render: function() {
     var html = this.state.html;
     return (
-      <div className="code-box" dangerouslySetInnerHTML={{__html: html}}></div>
+      <div className="code-box" onClick={this.handleClick} dangerouslySetInnerHTML={{__html: html}}></div>
     );
   }
 });

static/style.css

@@ -3,8 +3,7 @@ html {
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }
-html,
-body {
+html, body {
   height: 100%;
 }
 body {
@@ -303,6 +302,8 @@ footer {
   clear: both;
   border-top: 1px solid #eee;
   font-size: 16px;
+  position: relative;
+  background: #fff;
 }
 footer ul {
   overflow: hidden;
@@ -340,10 +341,7 @@ footer ul li > a {
 }
 .aside-container {
   width: 240px;
-  float: left;
-  height: 100%;
   background: #F9F9F9;
-  position: absolute;
   padding-top: 15px;
 }
 
@@ -375,13 +373,15 @@ footer ul li > a {
   color: #71B5DE;
 }
 
+.main-wrapper {
+  display: flex;
+}
+
 .main-container {
   width: calc(100% - 240px);
-  float: right;
   padding: 30px 40px;
   -webkit-animation: xRightMatrix .5s ease-out .5s backwards;
   animation: xRightMatrix .5s ease-out .5s backwards;
-  height: 100%;
 }
 
 .main-container-center {
@@ -400,8 +400,13 @@ footer ul li > a {
   color: #5C6B77;
 }
 
+.markdown h2 {
+  margin: 2.5em 0 1em 0;
+}
+
 .markdown p {
   margin: 1em 0;
+  width: 75%;
 }
 
 @media only screen and (min-width: 768px) and (max-width: 1024px) {
@@ -977,7 +982,68 @@ footer ul li > a {
 .code-box {
   border: 1px solid #E9E9E9;
   border-radius: 6px;
-  padding: 15px;
+  display: inline-block;
+  width: 100%;
+}
+
+.code-box .nico-insert-code {
+  padding: 50px 25px;
+  border-bottom: 1px solid #ddd;
+}
+
+.code-box-meta {
+  position: relative;
+  padding: 25px 15px;
+}
+
+.code-box-meta h4,
+.code-box-meta p {
+  margin: 0;
+}
+
+.code-box-title {
+  position: absolute;
+  top: -10px;
+  background: #fff;
+  padding: 0 1em;
+  color: #999;
+  font-weight: bold;
+}
+
+.code-box-description {
+  font-size: 12px;
+}
+
+.code-box .collapse {
+  position: absolute;
+  right: 15px;
+  top: 50%;
+  cursor: pointer;
+  border: 1px solid #999;
+  width: 20px;
+  height: 20px;
+  line-height: 17px;
+  font-size: 14px;
+  text-indent: 3px;
+  border-radius: 100%;
+  opacity: 0.5;
+  transform: rotate(90deg);
+  margin-top: -10px;
+}
+
+.code-box .collapse:hover {
+  opacity: 1;
+}
+
+.code-box .highlight {
+  overflow: hidden;
+  display: none;
+  border-top: 1px dashed #ddd;
+  padding: 5px 15px;
+}
+
+.code-box pre {
+  margin: 0;
 }
 
 .code-box pre code {

theme/templates/code.html

 <div class="code-box-container">
   {{ post.html }}
-  <h4 class="code-box-title">{{ post.title }}</h4>
-  <p class="code-box-description">{{ post.meta.description }}</p>
+  <div class="code-box-meta">
+    <div class="code-box-title">{{ post.title }}</div>
+    <p class="code-box-description">
+      {{ post.meta.description }}
+    </p>
+    <span class="collapse iconfont icon-chevron"></span>
+  </div>
 </div>

theme/templates/layout.html

@@ -72,6 +72,7 @@
   </div>
   <script src="/static/home.js"></script>
   {%- else %}
+  <div class="main-wrapper">
     {%- if post.meta.template === 'component' %}
     {%- include "aside.html" %}
     <section class="main-container">
@@ -100,8 +101,9 @@
           document.getElementById('code-boxes')
         );
       </script>
-    </article>
-  </section>
+      </article>
+    </section>
+  </div>
   {%- endif %}
   <footer id="footer">
     <ul>