feat: Add valine comment

Author: liuyib

_config.yml

@@ -341,7 +341,7 @@ reward:
 # ---------------------------------------------------------------
 
 # Gitment
-# See: https://github.com/imsun/gitment
+# See: https://github.com/imsun/gitment/
 gitment:
   enable: false
   # Github username.
@@ -356,7 +356,7 @@ gitment:
   lazy: true
 
 # Gittalk
-# See: https://github.com/gitalk/gitalk
+# See: https://github.com/gitalk/gitalk/
 gitalk:
   enable: false
   # Github username.
@@ -377,6 +377,33 @@ gitalk:
   # Available values: en, zh-CN, es-ES, fr, ru, zh-TW
   language: 
 
+# Valine
+# See: https://valine.js.org/quickstart.html
+valine:
+  enable: false
+  # Your leancloud application appid.
+  appid: 
+  # Your leancloud application appkey.
+  appkey: 
+  # Mail notifier.
+  notify: true
+  # Verification code.
+  verify: true
+  # Comment box placeholder.
+  placeholder: Just go go
+  # Gravatar style.
+  avatar: mp
+  # Custom comment header.
+  meta: nick,mail,link
+  # Pagination size.
+  pageSize: 10
+  # Article reading statistics.
+  visitor: false
+  # Whether to record the commenter IP.
+  recordIP: false
+  # language, available values: en, zh-cn.
+  language: 
+
 # Livere
 # See: https://www.livere.com/
 livere:
@@ -394,8 +421,10 @@ disqus:
 # Statistics and Analytics config
 # ---------------------------------------------------------------
 
+# Busuanzi statistics
+# See: https://busuanzi.ibruce.info/
 busuanzi:
-  enable: true
+  enable: false
   site:
     # Only show by icon.
     icon_only: false

layout/_components/comments.pug

@@ -15,3 +15,5 @@ else if theme.livere && theme.livere.enable
 else if theme.disqus && theme.disqus.enable
   div#comments.comments.main-content-layout
     div#disqus_thread
+else if theme.valine && theme.valine.enable
+  div#comments.comments.main-content-layout

layout/_third-party/comments/index.pug

@@ -7,3 +7,5 @@ if page.comments
     include ./livere.pug
   else if theme.disqus && theme.disqus.enable
     include ./disqus.pug
+  else if theme.valine && theme.valine.enable
+    include ./valine.pug

layout/_third-party/comments/valine.pug

@@ -0,0 +1,27 @@
+script(src='https://cdn1.lncld.net/static/js/3.0.4/av-min.js')
+script(src='https://cdn.jsdelivr.net/npm/valine@latest/dist/Valine.min.js')
+
+script.
+  window.onload = function() {
+    var GUEST_INFO = ['nick', 'mail', 'link'];
+    var guest_info = '!{ theme.valine.meta }';
+
+    guest_info = guest_info.split(',').filter(function(item) {
+      return GUEST_INFO.indexOf(item) > -1;
+    });
+
+    new Valine({
+      el: '#comments',
+      appId: '!{ theme.valine.appid }',
+      appKey: '!{ theme.valine.appkey }',
+      notify: !{ theme.valine.notify },
+      verify: !{ theme.valine.verify },
+      placeholder: '!{ theme.valine.placeholder }',
+      avatar: '!{ theme.valine.avatar }',
+      meta: guest_info,
+      pageSize: '!{ theme.valine.pageSize }' || 10,
+      visitor: !{ theme.valine.visitor },
+      recordIP: !{ theme.valine.recordIP },
+      lang: '!{ theme.valine.language }' || 'zh-cn'
+    });
+  };

source/css/_components/comments.styl

@@ -1,14 +1,15 @@
 .comments
   display: flex
   margin: 1.5rem 0 0
+  flex-direction: column
 
   a
     text-decoration: none !important
 
   // Gitment
   #gitment-container
     width: 100%
-  
+
   #gitment-button
     margin: 0 auto
     border-radius: 10px
@@ -23,15 +24,15 @@
       background-color: $blue-light
 
   a.gitment-editor-avatar
-    clearAStyle()  
+    clearAStyle()
 
   // Gitalk
   #gitalk-container
     width: 100%
-    
+
     & > :first-child
       margin: 0 auto
-  
+
   // Livere
   #lv-container
     width: 100%