diff --git a/layout/common/article-meta-info.ejs b/layout/common/article-meta-info.ejs
new file mode 100644
index 0000000..c205b67
--- /dev/null
+++ b/layout/common/article-meta-info.ejs
@@ -0,0 +1,34 @@
+<div class="article-meta-info">
+    <!-- date -->
+    <span class="article-date article-meta-item">
+                <i class="fa fa-calendar-o"></i> <%= date(articleData.date, 'YYYY-MM-DD HH:MM:SS') %>
+    </span>
+
+    <!-- categories -->
+    <% if (articleData.categories.length) { %>
+        <span class="article-categories article-meta-item">
+            <i class="fa fa-bookmark"></i>
+            <ul>
+                <% articleData.categories.forEach((category, i) => { %>
+                    <li>
+                        <%= i === 0 ? '' : '| ' %><a href="<%- url_for(category.path) %>"><%= category.name %></a>
+                    </li>
+                <% }); %>
+            </ul>
+        </span>
+    <% } %>
+
+    <!-- tags -->
+    <% if (articleData.tags.length) { %>
+        <span class="article-tags article-meta-item">
+            <i class="fa fa-tags"></i>
+            <ul>
+                <% articleData.tags.forEach((tag, i) => { %>
+                    <li>
+                        <%= i === 0 ? '' : '| ' %><a href="<%- url_for(tag.path) %>"><%= tag.name %></a>
+                    </li>
+                <% }); %>
+            </ul>
+        </span>
+    <% } %>
+</div>
\ No newline at end of file
diff --git a/layout/common/article-post.ejs b/layout/common/article-post.ejs
index 23ae432..4e05b69 100644
--- a/layout/common/article-post.ejs
+++ b/layout/common/article-post.ejs
@@ -1,34 +1,18 @@
 <!-- is_post() 检查当前页面是否为文章 -->
 <% if (is_post()) { %>
+    <!-- 文章内容详情页面 -->
     <div class="article-container">
         <div class="article-title">
             <h3><a><%= page.title %></a></h3>
         </div>
+
         <div class="article-meta-info">
-            <div class="meta">
-                <div class="info">
-                    <span>
-                        <i class="fa fa-calendar"></i>
-                        <span class="date"><%- date(page.date, 'YYYY-MM-DD') %></span>
-                    </span>
-                    <span>
-                        <i class="fa fa-list"></i>
-                        <% page.categories.forEach(category => { %>
-                            <a href="<%- url_for(category.path) %>" rel="category"><%= category.name %></a>
-                        <% }) %>
-                    </span>
-                    <span>
-                        <% page.tags.forEach(tag => { %>
-                            <a href="<%- url_for(tag.path) %>" rel="tag">#<%= tag.name %></a>
-                        <% }) %>
-                    </span>
-                </div>
-            </div>
+            <%- partial('article-meta-info', {articleData: page, index: true}) %>
         </div>
+
         <div class="article-content">
             <%- page.content %>
         </div>
-
         <div class="article-nav">
             <% if (page.prev) { %>
                 <div class="article-prev">
diff --git a/layout/common/home-post.ejs b/layout/common/home-post.ejs
index 7dc67f6..d77a059 100644
--- a/layout/common/home-post.ejs
+++ b/layout/common/home-post.ejs
@@ -15,42 +15,8 @@
                         <%- truncate(strip_html(post.content), {length: 80}) %>
                     </div>
 
-                    <!-- date -->
-                    <div class="article-meta">
-                        <span class="article-date article-item">
-                            <i class="fa fa-calendar-o"></i>
-                            <%= date(post.date, 'YYYY-MM-DD HH:MM:SS') %>
-                        </span>
-
-                        <!-- categories -->
-                        <% if (post.categories.length) { %>
-                            <span class="article-categories article-item">
-                            <i class="fa fa-bookmark"></i>
-                            <ul>
-                                <% post.categories.forEach((category, i) => { %>
-                                    <li>
-                                        <%= i === 0 ? '' : '| ' %><a href="<%- url_for(category.path) %>"
-                                                                     rel="tag"><%= category.name %></a>
-                                    </li>
-                                <% }); %>
-                            </ul>
-                        </span>
-                        <% } %>
-
-                        <!-- tags -->
-                        <% if (post.tags.length) { %>
-                            <span class="article-tags article-item">
-                            <i class="fa fa-tags"></i>
-                            <ul>
-                                <% post.tags.forEach((tag, i) => { %>
-                                    <li>
-                                      <%= i === 0 ? '' : '| ' %><a href="<%- url_for(tag.path) %>"
-                                                                   rel="tag"><%= tag.name %></a>
-                                    </li>
-                                <% }); %>
-                            </ul>
-                        </span>
-                        <% } %>
+                    <div class="article-meta-info-container">
+                        <%- partial('article-meta-info', {articleData: post, index: true}) %>
                     </div>
                 </li>
             <% }) %>
diff --git a/source/css/common/article-meta-info.styl b/source/css/common/article-meta-info.styl
new file mode 100644
index 0000000..44332dd
--- /dev/null
+++ b/source/css/common/article-meta-info.styl
@@ -0,0 +1,26 @@
+.article-meta-info {
+  color: #bbbbbb;
+  font-size: 12px;
+
+  .article-meta-item {
+    margin-right: 10px;
+  }
+
+  .article-tags, .article-categories {
+    display: inline;
+
+    ul, li {
+      display: inline;
+    }
+
+    a {
+      text-decoration: none;
+      color: rgba(0, 0, 0, 0.44);
+      font-weight: 400;
+
+      &:hover {
+        text-decoration: none;
+      }
+    }
+  }
+}
\ No newline at end of file
diff --git a/source/css/common/home-post.styl b/source/css/common/home-post.styl
index 0dd7659..48308b8 100644
--- a/source/css/common/home-post.styl
+++ b/source/css/common/home-post.styl
@@ -5,6 +5,8 @@
     .article-post-item {
 
       margin-bottom 30px
+      padding-bottom 20px
+      border-bottom: 1px solid #f2f2f2;
 
       .article-post-title {
         h1 {
@@ -50,63 +52,9 @@
 
       .article-post-content {
         padding 15px 0
-
-        a {
-          text-decoration: none;
-          letter-spacing: 1px;
-          color: #4786D6;
-        }
-
-        a:hover {
-          color: #2F69B3;
-        }
-
-        h3 {
-          color: #5F5F5F;
-          font-size: 22px;
-          font-weight: 600;
-        }
-
-        h4 {
-          color: #5F5F5F;
-          font-size: 16px;
-        }
+        line-height 26px
       }
 
-
-      .article-meta {
-        padding-bottom: 20px;
-        border-bottom: 1px solid #f2f2f2;
-        color: #bbbbbb;
-        font-size: 12px;
-        position relative
-
-        .article-item {
-          margin-right: 15px;
-        }
-
-        .article-tags, .article-categories {
-          display: inline;
-
-          ul, li {
-            display: inline;
-          }
-
-          li {
-
-          }
-
-          a {
-            text-decoration: none;
-            color: rgba(0, 0, 0, 0.44);
-            font-weight: 400;
-
-            &:hover {
-              text-decoration: none;
-            }
-          }
-        }
-      }
     }
   }
 }
diff --git a/source/css/style.styl b/source/css/style.styl
index cb264ee..eead4ff 100644
--- a/source/css/style.styl
+++ b/source/css/style.styl
@@ -9,6 +9,7 @@
 @import "common/home-post.styl"
 @import "common/archive-post.styl"
 @import "common/article-post.styl"
+@import "common/article-meta-info.styl"
 @import "common/category-post.styl"
 @import "common/tag-post.styl"
 @import "common/site-info.styl"