modified: 优化 home 文章显示样式

layout/home-content.ejs

@@ -1,20 +1,27 @@
 <div class="home-content-container">
 
     <ul class="home-article-list">
+
         <% page.posts.forEach(post => { %>
             <li class="home-article-item">
-                <div class="home-article-title">
+                <h3 class="home-article-title">
-                    <h3>
+                    <a class="article-title-hover-animation" href="<%- url_for(post.path) %>"><%= post.title %></a>
-                        <a class="article-title-hover-animation" href="<%- url_for(post.path) %>"><%= post.title %></a>
+                </h3>
-                    </h3>
-                </div>
 
-                <div class="home-article-content">
+                <div class="home-article-content markdown">
-                    <%- truncate(strip_html(post.content), {length: 150}) %>
+                    <% if (post.excerpt) { %>
+                        <%- post.excerpt %>
+                    <% } else { %>
+                        <%- truncate(strip_html(post.content), {length: 150}) %>
+                    <% } %>
                 </div>
 
                 <div class="home-article-meta-info">
-                    <%- partial('_partial/article-meta-info', {articleObject: post, index: true}) %>
+                    <span class="article-date">
+                        <i class="fa fa-calendar-o"></i> <%= date(post.date, 'YYYY-MM-DD') %>
+                    </span>
+                    <hr>
+                    <a href="<%- url_for(post.path) %>">阅读全文</a>
                 </div>
             </li>
         <% }) %>

source/css/layout/common/basic.styl

@@ -72,7 +72,7 @@ a:hover, a:active {
     position: absolute;
     width: 100%;
     height: 2px;
-    bottom: -2px;
+    bottom: -4px;
     left: 0;
     background-color: $article-title-color;
     visibility: hidden;

source/css/layout/home-content.styl

@@ -6,29 +6,65 @@
 
     .home-article-item {
 
-      margin-bottom: 30px;
+      margin-bottom: 60px;
       padding-bottom: 30px;
-      border-bottom: 1px solid $border-color;
 
       .home-article-title {
+        position: relative;
 
-        h3 {
+        &::before {
-          font-weight: 600;
+          content: '';
-          color: $article-title-color;
+          position: absolute;
-          font-size: 22px;
+          top: 50%;
-          margin: 0;
+          transform: translateY(-50%);
+          left: -16px;
+          width: 2px;
+          height: 20px;
+          background: $a-hover-color;
+          transition: all 0.5s ease;
         }
 
+
+        &:hover {
+          &::before {
+            opacity: 0;
+          }
+        }
+
+
+        font-weight: 600;
+        color: $article-title-color;
+        font-size: 22px;
+        margin: 0;
+
         a {
           color: $article-title-color;
         }
       }
 
       .home-article-content {
-        padding: 15px 0;
+        margin: 45px 0;
         line-height: 2em;
       }
 
+      .home-article-meta-info {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+
+        span {
+          letter-spacing: 1px;
+        }
+
+        hr {
+          border: none;
+          flex: 1;
+          height: 1px;
+          background: $border-color;
+          margin: 0 10px;
+        }
+      }
+
     }
   }
 

source/css/layout/page.styl

@@ -22,7 +22,7 @@
       width: 80%;
       height: 100%;
       position: relative;
-      padding: 20px 0;
+      padding: 40px 0;
     }