feat: add waline comment system (#141)

liuyib · Dec 18, 2020 · d2ce245 · d2ce245
1 parent 6d61545
commit d2ce245
Show file tree

Hide file tree

Showing 5 changed files with 83 additions and 0 deletions.
diff --git a/_config.yml b/_config.yml
@@ -482,6 +482,25 @@ gitalk:
   # Optional values: en | zh-CN | es-ES | fr | ru | zh-TW
   language:
 
+# Waline
+# See: https://waline.js.org/
+waline:
+  enable: false
+  # The URL of your server.
+  serverURL:
+  # Comment box placeholder.
+  placeholder: Just go go
+  # Gravatar style.
+  avatar: mp
+  # Custom comment header.
+  meta: nick,mail,link
+  # The number of comments per page.
+  pageSize: 10
+  # Optional values: en | zh-CN | zh-TW | jp
+  lang: zh-CN,zh-TW,en
+  # Article reading statistics.
+  visitor: false
+
 # Valine
 # See: https://valine.js.org/quickstart.html
 valine:
@@ -865,6 +884,7 @@ icon:
   prompt_info: fas fa-arrow-circle-right
   prompt_warning: fas fa-exclamation-circle
   prompt_error: fas fa-times-circle
+  waline_visitor: fas fa-eye
   valine_visitor: fas fa-eye
   post_heading: fas fa-link
   notetag_default: fas fa-arrow-circle-right
@@ -925,6 +945,12 @@ cdn:
   valine:
   leancloud_storage:
 
+  # Waline
+  # See: https://github.com/lizheming/waline
+  # Example:
+  # waline: //unpkg.com/@waline/client@0.8.5/dist/Waline.min.js
+  waline:
+
   # minivaline
   # See: https://github.com/MiniValine/MiniValine
   # Example:

diff --git a/layout/_mixins/post-header.pug b/layout/_mixins/post-header.pug
@@ -67,6 +67,20 @@ mixin postHeader(post)
               valueText: `${min2read(post.content, { cn: postRead.speed.zh, en: postRead.speed.en })}${__('post.reading_unit')}`
             })
 
+        if theme.waline.enable && theme.waline.visitor
+          span(id=url_for(post.path) data-flag-title=post.title).post-meta-item.post-meta-item--visitors.leancloud_visitors
+            - var iconClass = theme.icon.waline_visitor;
+            +postMetaItem({
+              isIconOnly: isPostMetaIconOnly,
+              iconClass: iconClass,
+              iconText: __('post.reading_count'),
+              popoverPos: 'up',
+              popoverText: __('popover.post.visit_num'),
+              valueAttr: {
+                class: 'leancloud-visitors-count'
+              }
+            })
+
         if theme.valine.enable && theme.valine.visitor
           span(id=url_for(post.path) data-flag-title=post.title).post-meta-item.post-meta-item--visitors.leancloud_visitors
             - var iconClass = theme.icon.valine_visitor;

diff --git a/layout/_partials/widgets/comments.pug b/layout/_partials/widgets/comments.pug
@@ -1,6 +1,9 @@
 if theme.disqus.enable
   div#comments.comments
     div#disqus_thread
+else if theme.waline.enable
+  div#comments.comments
+    div#waline-container
 else if theme.valine.enable
   div#comments.comments
     div#valine-container

diff --git a/layout/_third-party/comments/index.pug b/layout/_third-party/comments/index.pug
@@ -1,6 +1,8 @@
 if page.comments || theme.pjax.enable
   if theme.disqus.enable
     include ./disqus.pug
+  else if theme.waline.enable
+    include ./waline.pug
   else if theme.valine.enable
     include ./valine.pug
   else if theme.minivaline.enable
@@ -13,5 +15,7 @@ if page.comments || theme.pjax.enable
     include ./livere.pug
   else if theme.fbcomments.enable
     include ./fbcomments.pug
+else if theme.waline.enable && theme.waline.visitor
+  include ./waline.pug
 else if theme.valine.enable && theme.valine.visitor
   include ./valine.pug
diff --git a/layout/_third-party/comments/waline.pug b/layout/_third-party/comments/waline.pug
@@ -0,0 +1,36 @@
+-
+  var waline_js = 'https://unpkg.com/@waline/client/dist/Waline.min.js';
+
+  if (theme.cdn.waline) {
+    waline_js = theme.cdn.waline;
+  }
+
+script(src=waline_js)
+
+script&attributes(dataPjax).
+  function loadWaline () {
+    var GUEST_INFO = ['nick', 'mail', 'link'];
+    var guest_info = '!{ theme.waline.meta }';
+
+    guest_info = guest_info.split(',').filter(function(item) {
+      return GUEST_INFO.indexOf(item) > -1;
+    });
+
+    new Waline({
+      el: '#waline-container',
+      serverURL: '!{ theme.waline.serverURL }',
+      placeholder: '!{ theme.waline.placeholder }',
+      pageSize: '!{ theme.waline.pageSize }' || 10,
+      lang: '!{ theme.waline.language }' || 'zh-cn',
+      visitor: !{ theme.waline.visitor },
+      avatar: '!{ theme.waline.avatar }',
+      path: window.location.pathname,
+      meta: guest_info
+    });
+  }
+
+  if (!{ pjax }) {
+    loadWaline();
+  } else {
+    window.addEventListener('DOMContentLoaded', loadWaline, false);
+  }