feat(comment): added support waline comment plugin (#135)

_config.yml

@@ -211,6 +211,7 @@ comment:
 
   # Valine
   # See: https://github.com/xCss/Valine
+  #      https://valine.js.org
   valine:
     appid:           # Your leancloud application appid
     appkey:          # Your leancloud application appkey
@@ -218,6 +219,7 @@ comment:
 
   # Gitalk
   # See: https://github.com/gitalk/gitalk
+  #      https://gitalk.github.io
   gitalk:
     github_id:        # GitHub repo owner
     github_admins:    # GitHub Admins (in Array type), optional.
@@ -227,10 +229,19 @@ comment:
 
   # Twikoo
   # See: https://github.com/imaegoo/twikoo
+  #      https://twikoo.js.org
   twikoo:
     env_id:         # Tencent Cloud environment id
     region:         # Environment region. If select Guangzhou, fill in "ap-guangzhou".
-    version: 1.6.7  # Twikoo version, default use v1.6.7, you can custom fill
+    version: 1.6.7  # Twikoo version, default use v1.6.7
+
+  # Waline
+  # See: https://github.com/walinejs/waline
+  #      https://waline.js.org/guide/get-started.html
+  waline:
+    server_url:     # Server URL
+    reaction:       # Article reactions
+    version: 2      # Waline version, default use v2
 
 # ---------------------------------------------------------------------------------------
 # RSS

layout/_partial/comment/comment.ejs

@@ -1,10 +1,9 @@
 <div class="comments-container">
-    <div id="comment-anchor"></div>
+    <div id="comments-anchor"></div>
     <div class="comment-area-title">
         <i class="fas fa-comments"></i>&nbsp;<%- __('comments') %>
     </div>
     <% if (theme.comment.enable === true && theme.comment.hasOwnProperty(theme.comment.use)) { %>
-
         <% if  (theme.comment.use === 'valine') { %>
             <%- partial('valine') %>
 
@@ -14,6 +13,9 @@
         <% } else if (theme.comment.use === 'twikoo') { %>
             <%- partial('twikoo') %>
 
+        <% } else if (theme.comment.use === 'waline') { %>
+            <%- partial('waline') %>
+
         <% } %>
     <% } %>
 </div>

layout/_partial/comment/gitalk.ejs

@@ -37,7 +37,7 @@
         }
       }
 
-      if ('<%= theme.pjax.enable %>') {
+      if ('<%= theme.pjax.enable %>' === 'true') {
         const loadGitalkTimeout = setTimeout(() => {
           loadGitalk();
           clearTimeout(loadGitalkTimeout);

layout/_partial/comment/twikoo.ejs

@@ -1,9 +1,11 @@
 <%
-const { enable: pjax_enable } = theme.pjax
+const {enable: pjax_enable} = theme.pjax
 let {
-  env_id: tk_env_id, region: tk_region, version: tk_version
+    env_id: tk_env_id, region: tk_region, version: tk_version
 } = theme.comment.twikoo
-if (!tk_version) { tk_version = '1.6.7' }
+if (!tk_version) {
+    tk_version = '1.6.7'
+}
 const twikoo_cdn_url = `//cdn.jsdelivr.net/npm/twikoo@${tk_version}/dist/twikoo.all.min.js`
 %>
 <% if(theme.comment.use === 'twikoo' && tk_env_id) { %>
@@ -13,23 +15,23 @@ const twikoo_cdn_url = `//cdn.jsdelivr.net/npm/twikoo@${tk_version}/dist/twikoo.
         ></script>
         <div id="twikoo-comment"></div>
         <script <%= pjax_enable === true ? 'data-pjax' : '' %>>
-            function loadTwikoo() {
+          function loadTwikoo() {
-                twikoo.init({
+            twikoo.init({
-                    el: '#twikoo-comment',
+              el: '#twikoo-comment',
-                    envId: '<%= tk_env_id %>',
+              envId: '<%= tk_env_id %>',
-                    region: '<%= tk_region %>',
+              region: '<%= tk_region %>',
-                    lang: '<%= config.language %>' || 'zh-CN'
+              lang: '<%= config.language %>' || 'zh-CN'
-                });
+            });
-            }
+          }
 
-            if ('<%= pjax_enable === true %>') {
+          if ('<%= pjax_enable %>' === 'true') {
-                const loadTwikooTimeout = setTimeout(() => {
+            const loadTwikooTimeout = setTimeout(() => {
-                    loadTwikoo();
+              loadTwikoo();
-                    clearTimeout(loadTwikooTimeout);
+              clearTimeout(loadTwikooTimeout);
-                }, 1000);
+            }, 1000);
-            } else {
+          } else {
-                window.addEventListener('DOMContentLoaded', loadTwikoo);
+            window.addEventListener('DOMContentLoaded', loadTwikoo);
-            }
+          }
         </script>
     </div>
 <% } %>

layout/_partial/comment/valine.ejs

@@ -53,7 +53,7 @@
                 }, 2000);
             }
 
-            if ('<%= theme.pjax.enable %>') {
+            if ('<%= theme.pjax.enable %>' === 'true') {
                 const loadValineTimeout = setTimeout(() => {
                     loadValine();
                     clearTimeout(loadValineTimeout);

layout/_partial/comment/waline.ejs

@@ -0,0 +1,45 @@
+<%
+const {enable: pjax_enable} = theme.pjax
+let {
+    server_url: waline_env_server_url,
+    version: waline_version,
+    reaction: waline_reaction,
+} = theme.comment.waline
+if (!waline_version) {
+    waline_version = '2'
+}
+const waline_cdn_url = `//cdn.jsdelivr.net/npm/@waline/client@v${waline_version}/dist/waline.js`
+%>
+<% if(theme.comment.use === 'waline' && waline_env_server_url) { %>
+    <div class="waline-comment-container">
+        <script <%= pjax_enable === true ? 'data-pjax' : '' %>
+                src="<%= waline_cdn_url %>"
+        ></script>
+        <link rel="stylesheet"
+              href="//cdn.jsdelivr.net/npm/@waline/client@v2/dist/waline.css"
+        />
+        <link rel="stylesheet"
+              href="//cdn.jsdelivr.net/npm/@waline/client@v2/dist/waline-meta.css"
+        />
+        <div id="waline-comment"></div>
+        <script <%= pjax_enable === true ? 'data-pjax' : '' %>>
+          function loadWaline() {
+            Waline.init({
+              el: '#waline-comment',
+              serverURL: '<%= waline_env_server_url %>',
+              lang: '<%= config.language %>' || 'zh-CN',
+              comment: '.post-comments-count',
+              reaction: '<%= waline_reaction %>' === 'true'
+            })
+          }
+
+          if ('<%= pjax_enable %>' === 'true') {
+            setTimeout(() => {
+              loadWaline()
+            }, 1000)
+          } else {
+            window.addEventListener('DOMContentLoaded', loadWaline)
+          }
+        </script>
+    </div>
+<% } %>

layout/_partial/post-tools.ejs

@@ -2,15 +2,16 @@
     <ul class="tools-list">
         <!-- TOC aside toggle -->
         <% if (theme.toc.enable) { %>
-            <li class="tools-item toggle-show-toc">
+            <li class="tools-item flex-center toggle-show-toc">
                 <i class="fas fa-list"></i>
             </li>
         <% } %>
 
         <!-- go comment -->
         <% if (theme.comment.enable === true && theme.comment.hasOwnProperty(theme.comment.use)) { %>
-            <li class="tools-item go-comment">
+            <li class="tools-item flex-center go-to-comments">
                 <i class="fas fa-comment"></i>
+                <span class="post-comments-count"></span>
             </li>
         <% } %>
     </ul>

source/css/common/variables.styl

@@ -64,6 +64,7 @@ $z-index-10 = 1010
 // ==============================================================================================
 $temp-color = hexo-config('style.primary_color')
 $primary-color = $temp-color ? convert($temp-color) : #0066cc
+$primary-color-1 = lighten($primary-color, 10%)
 
 
 // ==============================================================================================
@@ -95,6 +96,7 @@ $pjax-progress-bar-color = linear-gradient(45deg, #f10006, #ef5b00, #e59c01, #19
 // theme dark mode color set
 // ==============================================================================================
 $dark-primary-color = $primary-color
+$dark-primary-color-1 =  darken($primary-color, 10%)
 $dark-background-color = #383940
 $dark-second-background-color = darken($dark-background-color, 10%)
 $dark-default-text-color = #bebec6
@@ -133,9 +135,10 @@ $default-font-weight = 400
 //  light/dark mode color
 // ==============================================================================================
 root-color(mode) {
+  --primary-color mode == 'light' ? $primary-color : $dark-primary-color
+  --primary-color-1 mode == 'light' ? $primary-color-1 : $dark-primary-color-1
   --background-color mode == 'light' ? $background-color : $dark-background-color
   --second-background-color mode == 'light' ? $second-background-color : $dark-second-background-color
-  --primary-color mode == 'light' ? $primary-color : $dark-primary-color
   --first-text-color mode == 'light' ? $first-text-color : $dark-first-text-color
   --second-text-color mode == 'light' ? $second-text-color : $dark-second-text-color
   --third-text-color mode == 'light' ? $third-text-color : $dark-third-text-color

source/css/layout/_partial/comment/comment.styl

@@ -8,6 +8,9 @@ if (hexo-config('comment.enable') == true && hexo-config('comment.use') != "") {
   else if (hexo-config('comment.use') == "twikoo") {
     @import "./twikoo.styl"
   }
+  else if (hexo-config('comment.use') == "waline") {
+    @import "./waline.styl"
+  }
 }
 
 .comments-container {
@@ -15,7 +18,7 @@ if (hexo-config('comment.enable') == true && hexo-config('comment.use') != "") {
   width 100%
   margin-top $component-spacing-value
 
-  #comment-anchor {
+  #comments-anchor {
     width 100%
     height 0.8rem
   }

source/css/layout/_partial/comment/waline.styl

@@ -0,0 +1,62 @@
+.waline-comment-container {
+  #waline-comment {
+    --waline-theme-color var(--primary-color)
+    --waline-active-color var(--primary-color-1)
+    --waline-color var(--default-text-color)
+    --waline-bgcolor var(--background-color)
+    --waline-border-color var(--border-color)
+    --waline-disable-bgcolor var(--second-background-color)
+    --waline-disable-color var(--default-text-color)
+    --waline-code-bgcolor rgba(40, 44, 52, 0.9)
+    --waline-info-bgcolor var(--fourth-text-color)
+    --waline-info-color var(--default-text-color)
+    --waline-border 1px solid var(--waline-border-color)
+
+    input
+    textarea {
+      position relative
+      box-sizing border-box
+      padding 0.6rem 1rem
+      color var(--default-text-color)
+      background transparent
+      border-radius 0.4rem
+      outline none
+
+      &:hover {
+        background var(--second-background-color)
+      }
+    }
+
+
+    .wl-header {
+      box-sizing border-box
+      padding 0
+    }
+
+
+    button {
+      transition-t("color, background", "0, 0", "0.2, 0.2", "ease, ease")
+    }
+
+    .wl-logout-btn {
+      svg {
+        width 1rem
+        height 1rem
+        path {
+          color var(--default-text-color)
+        }
+      }
+    }
+
+    .wl-panel {
+      border-radius 0.4rem
+    }
+
+    .wl-count
+    .wl-num
+    .wl-preview h4
+    .wl-like span {
+      color var(--third-text-color)
+    }
+  }
+}

source/css/layout/_partial/post-tools.styl

@@ -9,9 +9,8 @@ $li-margin-bottom = 0.8rem
   .tools-list {
 
     li {
-      display flex
+      position relative
-      align-items center
+      box-sizing border-box
-      justify-content center
       width $post-tool-button-width
       height $post-tool-button-width
       margin-bottom $li-margin-bottom
@@ -49,6 +48,30 @@ $li-margin-bottom = 0.8rem
           display none !important
         }
       }
+
+
+      &.go-to-comments {
+        .post-comments-count {
+          position absolute
+          top 0
+          right -1rem
+          display none
+          align-items center
+          justify-content center
+          box-sizing border-box
+          min-width 1.4rem
+          height 1.4rem
+          padding 0 0.2rem
+          color var(--background-color)
+          font-size 12px
+          background var(--border-color)
+          border-radius 0.4rem
+
+          +keep-tablet() {
+            display none !important
+          }
+        }
+      }
     }
   }
 }

source/js/post-helper.js

@@ -6,7 +6,9 @@ function initToggleShowToc() {
     toggleShowTocBtnDom: document.querySelector('.toggle-show-toc'),
     toggleShowTocIcon: document.querySelector('.toggle-show-toc i'),
     mainContentDom: document.querySelector('.main-content'),
-    postToolsDom: document.querySelector('.page-container .post-tools'),
+    postToolsDom: document.querySelector('.post-tools'),
+    goToCommentsDom: document.querySelector('.post-tools .go-to-comments'),
+
     isShowToc: false,
 
     initToggleToc() {
@@ -56,10 +58,45 @@ function initToggleShowToc() {
       window.addEventListener('resize', () => {
         this.setPostToolsLeft()
       })
+    },
+
+    // go comment anchor
+    goToComments() {
+      if (this.goToCommentsDom) {
+        const commentsAnchor = document.querySelector('#comments-anchor')
+        this.goToCommentsDom.addEventListener('click', () => {
+          commentsAnchor && commentsAnchor.scrollIntoView()
+        })
+      }
+    },
+
+    // watch comments count
+    watchPostCommentsCount() {
+      const commentsCountDom = this.postToolsDom.querySelector('.post-comments-count')
+      const config = { attributes: true, childList: true }
+      const callback = function (mutationsList) {
+        mutationsList.forEach((item) => {
+          if (item.type === 'childList') {
+            const count = Number(item.target.innerHTML)
+            if (count > 0) {
+              commentsCountDom.style.display = 'flex'
+              if (count > 99) {
+                commentsCountDom.innerHTML = '99+'
+                observer.disconnect()
+              }
+            }
+          }
+        })
+      }
+
+      const observer = new MutationObserver(callback)
+      observer.observe(commentsCountDom, config)
     }
   }
   KEEP.utils.postHelper.initToggleToc()
   KEEP.utils.postHelper.initSetPostToolsLeft()
+  KEEP.utils.postHelper.goToComments()
+  KEEP.utils.postHelper.watchPostCommentsCount()
 }
 
 if (KEEP.theme_config.pjax.enable === true && KEEP.utils) {

source/js/utils.js

@@ -132,16 +132,6 @@ KEEP.initUtils = () => {
       })
     },
 
-    // go comment anchor
-    goComment() {
-      this.goComment_dom = document.querySelector('.go-comment')
-      if (this.goComment_dom) {
-        this.goComment_dom.addEventListener('click', () => {
-          document.querySelector('#comment-anchor').scrollIntoView()
-        })
-      }
-    },
-
     // get dom element height
     getElementHeight(selectors) {
       const dom = document.querySelector(selectors)
@@ -443,9 +433,6 @@ KEEP.initUtils = () => {
   // global font adjust
   KEEP.utils.globalFontAdjust()
 
-  // go comment
-  KEEP.utils.goComment()
-
   // init page height handle
   KEEP.utils.initPageHeightHandle()