Add: valine 评论系统，优化 article-post 页面样式

_config.yml

@@ -14,3 +14,14 @@ avatar: images/favicon.png
 #   normal | night | night eighties | night blue | night bright
 # https://github.com/chriskempson/tomorrow-theme
 highlight_theme: normal
+
+# Valine.
+# You can get your appid and appkey from https://leancloud.cn
+# more info please open https://github.com/xCss/Valine
+valine:
+  enable: true
+  appid:  ih2nzG3ilVNdLgJK4kBXTjOq-gzGzoHsz # your leancloud application appid
+  appkey: gdf6tXXLBTLg9qpjS2y6Tbw7 # your leancloud application appkey
+  notify: false # mail notifier , https://github.com/xCss/Valine/wiki
+  verify: false # Verification code
+  placeholder: 评论一下再走吧~

layout/common/article-post.ejs

@@ -4,10 +4,7 @@
         <div class="post-title">
             <h3><a><%= page.title %></a></h3>
         </div>
-        <div class="post-content">
+        <div class="post-meta-info">
-            <%- page.content %>
-        </div>
-        <div class="post-footer">
             <div class="meta">
                 <div class="info">
                     <span>
@@ -28,6 +25,9 @@
                 </div>
             </div>
         </div>
+        <div class="post-content">
+            <%- page.content %>
+        </div>
         <div class="comment-container">
             <%- partial('valine') %>
         </div>

layout/common/home-post.ejs

@@ -11,7 +11,8 @@
                     </div>
 
                     <div class="article-post-content">
-                        <%- post.content %>
+                        <!-- truncate() 移除超过 length 长度的字符串。length 的默认值是 30。 -->
+                        <%- truncate(strip_html(post.content), {length: 80}) %>
                     </div>
 
                     <div class="article-post-meta">

layout/common/valine.ejs

@@ -1,12 +1,14 @@
-<script src='https://unpkg.com/valine@1.3.10/dist/Valine.min.js'></script>
+<% if(theme.valine.enable && theme.valine.appid && theme.valine.appkey) { %>
-<div id="valine"></div>
+    <script src='https://unpkg.com/valine@1.3.10/dist/Valine.min.js'></script>
-<script>
+    <div id="valine"></div>
-    new Valine({
+    <script>
-        el: '#valine',
+        new Valine({
-        appId: 'XXX',
+            el: '#valine',
-        appKey: 'XXX',
+            appId: '<%= theme.valine.appid %>',
-        notify: true,
+            appKey: '<%= theme.valine.appkey %>',
-        verify: false,
+            notify: '<%= theme.valine.notify %>',
-        placeholder: '评论一下再走吧'
+            verify: '<%= theme.valine.verify %>',
-    })
+            placeholder: '<%= theme.valine.placeholder %>'
-</script>
+        })
+    </script>
+<%  } %>

source/css/common/article-post.styl

@@ -43,34 +43,9 @@
     }
   }
 
-  .post-content {
+  .post-meta-info {
-    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;
-    }
-  }
-
-
-  .post-footer {
-    padding: 0 0 30px 0;
-    border-bottom: 1px solid #f2f2f2;
 
+    margin-top: 20px;
 
     .meta {
       max-width: 100%;
@@ -133,4 +108,31 @@
   }
 
 
+  .post-content {
+
+    padding-bottom 10px
+
+    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;
+    }
+  }
+
+
 }

source/css/common/home-post.styl

@@ -52,6 +52,7 @@
 
 
       .article-post-content {
+        padding 15px 0
         a {
           text-decoration: none;
           letter-spacing: 1px;

source/css/common/site-info.styl

@@ -6,7 +6,7 @@
     padding 2px
     border-radius 50%
     border 1px solid #ddd
-    width: 40%;
+    width: 150px;
   }