components name

components/button/index.md

-# Button 按钮
+# Button
 
 - category: CSS
+- chinese: 按钮
 
 ---
 

components/datepicker/index.md

-# Datepicker 日期选择框
+# Datepicker
 
 - category: Component
+- chinese: 日期选择框
 
 ---
 

components/select/select.md

-# Select 选择框
+# Select
 
 - category: Component
+- chinese: 选择框
 - API: github.com/react-component/select
 
 ---

static/style.css

@@ -333,7 +333,7 @@ footer ul li > a {
   margin: 5px auto;
 }
 .aside-container {
-  width: 240px;
+  width: 260px;
   background: #F9F9F9;
   padding-top: 15px;
 }
@@ -356,6 +356,13 @@ footer ul li > a {
   border-left: 3px solid transparent;
 }
 
+.aside-container li a .chinese {
+  font-size: 12px;
+  margin-left: 10px;
+  font-weight: normal;
+  color: #999;
+}
+
 .aside-container li a:hover {
   color: #6EB4E0;
 }
@@ -371,7 +378,7 @@ footer ul li > a {
 }
 
 .main-container {
-  width: calc(100% - 240px);
+  width: calc(100% - 260px);
   padding: 30px 40px 80px;
   -webkit-animation: xRightMatrix .5s ease-out .5s backwards;
   animation: xRightMatrix .5s ease-out .5s backwards;

theme/templates/aside.html

@@ -8,7 +8,10 @@
       <ul>
         {%- for item in items %}
         <li class="{%- if item.title === post.title %}current{%- endif %}">
-          <a href="{{permalink_url(item)}}">{{item.title}}</a>
+          <a href="{{permalink_url(item)}}">
+            {{item.title}}
+            <span class="chinese">{{item.meta.chinese}}</span>
+          </a>
         </li>
         {%- endfor %}
       </ul>