feat: 修改newest_comments的leancloud為valine，並刪除其配置，改為讀取valine配置

feat: 增加waline最新評論模塊
feat: 增加waline評論數顯示
feat: 增加waline評論
fix: 修復jquery在一些界面仍然加載問題

README.md

@@ -71,7 +71,7 @@ npm i hexo-theme-butterfly
 - [x] Related articles
 - [x] Displays outdated notice for a post
 - [x] Share (AddThis/Sharejs/Addtoany)
-- [X] Comment (Disqus/Disqusjs/Livere/Gitalk/Valine/Utterances/Facebook Comments/Twikoo）
+- [X] Comment (Disqus/Disqusjs/Livere/Gitalk/Valine/Waline/Utterances/Facebook Comments/Twikoo)
 - [x] Multiple Comment System Support
 - [x] Online Chats (Chatra/Tidio/Daovoice/Gitter/Crisp)
 - [x] Web analytics (Baidu Analytics/Google Analytics/Tencent Analytics/CNZZ Analytics)

README_CN.md

@@ -71,7 +71,7 @@ theme: butterfly
 - [x] 顯示相關文章
 - [x] 過期文章提醒
 - [x] 多種分享系統（AddThis/Sharejs/Addtoany）
-- [X] 多種評論系統（Disqus/Disqusjs/Livere/Gitalk/Valine/Utterances/Facebook Comments/Twikoo）
+- [X] 多種評論系統（Disqus/Disqusjs/Livere/Gitalk/Valine/Waline/Utterances/Facebook Comments/Twikoo）
 - [x] 支持雙評論部署
 - [x] 多種在線聊天（Chatra/Tidio/Daovoice/Gitter/Crisp）
 - [x] 多種分析系統（百度分析/谷歌分析/騰訊分析/CNZZ分析）

_config.yml

@@ -240,7 +240,7 @@ addtoany:
 
 comments:
   # Up to two comments system, the first will be shown as default
-  # Choose: Disqus/Disqusjs/Livere/Gitalk/Valine/Utterances/Facebook Comments/Twikoo
+  # Choose: Disqus/Disqusjs/Livere/Gitalk/Valine/Waline/Utterances/Facebook Comments/Twikoo
   use:
   # - Valine
   # - Disqus
@@ -304,6 +304,14 @@ valine:
   requiredFields: nick,mail # required fields (nick/mail)
   option:
 
+# waline - A simple comment system with backend support fork from Valine
+# https://waline.js.org/
+waline:
+  serverURL: # Waline server address url
+  avatar: monsterid # gravatar style https://zh-tw.gravatar.com/site/implement/images/#default-image
+  bg: /image/comment_bg.png # waline background
+  option:
+
 # utterances
 # https://utteranc.es/
 utterances:
@@ -656,12 +664,8 @@ newest_comments:
   enable: false
   limit: 6
   avatar: true
-  leancloud:
+  # You can only choose one, or neither
-    enable: false
+  valine: false
-    appId: # leancloud application app id
-    appKey: # leancloud application app key
-    serverURL: # This configuration is suitable for domestic custom domain name users, overseas version will be automatically detected (no need to manually fill in)
-    default_avatar: # mp/identicon/monsterid/wavatar/retro/robohash/blank
   github_issues:
     enable: false
     repo:
@@ -670,6 +674,7 @@ newest_comments:
     forum:
     api_key:
   twikoo: false
+  waline: false
 
 # Bottom right button (右下角按鈕)
 # --------------------------------------
@@ -848,6 +853,7 @@ CDN:
   disqusjs_css: https://cdn.jsdelivr.net/npm/disqusjs@1/dist/disqusjs.css
   utterances: https://utteranc.es/client.js
   twikoo: https://cdn.jsdelivr.net/npm/twikoo/dist/twikoo.all.min.js
+  waline: https://cdn.jsdelivr.net/npm/@waline/client/dist/Waline.min.js
 
   # share
   addtoany: https://static.addtoany.com/menu/page.js

layout/includes/header/post-info.pug

@@ -66,23 +66,29 @@
             if block
               block
         
-        if whichCount === 'Disqus' || whichCount === 'Disqusjs'
+        case whichCount
-          +countBlock
+          when 'Disqus'
-            span.disqus-comment-count
+          when 'Disqusjs'
-              a(href=full_url_for(page.path) + '#disqus_thread')
+            +countBlock
-        else if whichCount === 'Valine'
+              span.disqus-comment-count
-          +countBlock
+                a(href=full_url_for(page.path) + '#disqus_thread')
-            a(href=url_for(page.path) + '#post-comment' itemprop="discussionUrl")
+          when 'Valine'
-              span.valine-comment-count(data-xid=url_for(page.path) itemprop="commentCount")
+            +countBlock
-        else if whichCount === 'Gitalk'
+              a(href=url_for(page.path) + '#post-comment' itemprop="discussionUrl")
-          +countBlock
+                span.valine-comment-count(data-xid=url_for(page.path) itemprop="commentCount")
-            a(href=url_for(page.path) + '#post-comment')
+          when 'Waline'
-              span.gitalk-#card-toc
+            +countBlock
-        else if whichCount === 'Twikoo'
+              a(href=url_for(page.path) + '#post-comment')
-          +countBlock
+                span.waline-comment-count(id=url_for(page.path))
-            a(href=url_for(page.path) + '#post-comment')
+          when 'Gitalk'
-              span#twikoo-count
+            +countBlock
-        else if whichCount === 'Facebook Comments'
+              a(href=url_for(page.path) + '#post-comment')
-          +countBlock
+                span.gitalk-#card-toc
-            a(href=url_for(page.path) + '#post-comment')
+          when 'Twikoo'
-              span.fb-comments-count(data-href=urlNoIndex())
+            +countBlock
+              a(href=url_for(page.path) + '#post-comment')
+                span#twikoo-count
+          when 'Facebook Comments'
+            +countBlock
+              a(href=url_for(page.path) + '#post-comment')
+                span.fb-comments-count(data-href=urlNoIndex())

layout/includes/third-party/comments/index.pug

@@ -31,6 +31,8 @@ hr
             #utterances-wrap
           when 'Twikoo'
             #twikoo-wrap
+          when 'Waline'
+            #waline
           when 'Facebook Comments'
             .fb-comments(data-colorscheme = theme.display_mode === 'dark' ? 'dark' : 'light'
                         data-numposts= theme.facebook_comments.pageSize || 10

layout/includes/third-party/comments/js.pug

@@ -14,5 +14,7 @@ each name in theme.comments.use
       !=partial('includes/third-party/comments/utterances', {}, {cache:theme.fragment_cache})
     when 'Twikoo'
       !=partial('includes/third-party/comments/twikoo', {}, {cache:theme.fragment_cache})
+    when 'Waline'
+      !=partial('includes/third-party/comments/waline', {}, {cache:theme.fragment_cache})
     when 'Facebook Comments'
       !=partial('includes/third-party/comments/facebook_comments', {}, {cache:theme.fragment_cache})

layout/includes/third-party/comments/waline.pug

@@ -0,0 +1,34 @@
+- let option = theme.waline.option ? JSON.stringify(theme.waline.option) : false
+
+script.
+  function loadWaline () {
+    function initWaline () {
+      let initData = {
+        el: '#waline',
+        serverURL: '!{theme.waline.serverURL}',
+        avatar: '#{theme.waline.avatar}',
+        path: location.pathname,
+      }
+      
+      if (!{Boolean(option)}) {
+        const otherData = !{option}
+        initData = Object.assign({}, initData, otherData)
+      }
+      
+      const waline = new Waline(initData)
+    }
+
+    if (typeof Waline === 'function') initWaline() 
+    else getScript('!{url_for(theme.CDN.waline)}').then(initWaline)
+  }
+
+  if ('!{theme.comments.use[0]}' === 'Waline' || !!{theme.comments.lazyload}) {
+    if (!{theme.comments.lazyload}) btf.loadComment(document.querySelector('#waline'),loadWaline)
+    else setTimeout(loadWaline, 0)
+  } else {
+    function loadOtherComment () {
+      loadWaline()
+    }
+  }
+  
+

layout/includes/third-party/newest-comments/index.pug

@@ -1,8 +1,12 @@
-if theme.newest_comments.leancloud.enable
+- let config = theme.newest_comments
-  include ./leancloud.pug
+
-else if theme.newest_comments.github_issues.enable
+if config.valine
+  include ./valine.pug
+else if config.waline
+  include ./waline.pug
+else if config.github_issues.enable
   include ./github-issues.pug
-else if theme.newest_comments.disqus.enable
+else if config.disqus.enable
   include ./disqus-comment.pug
-else if theme.newest_comments.twikoo
+else if config.twikoo
   include ./twikoo-comment.pug

layout/includes/third-party/newest-comments/valine.pug

@@ -1,3 +1,5 @@
+- let default_avatar = theme.valine.avatar
+
 script(src="https://cdn.jsdelivr.net/npm/blueimp-md5@2.17.0/js/md5.min.js")
 script.
   window.addEventListener('load', () => {
@@ -17,7 +19,7 @@ script.
     const getIcon = (icon, mail) => {
       if (icon) return icon
       
-      let defaultIcon = '!{ theme.newest_comments.leancloud.default_avatar ? `?d=${theme.newest_comments.leancloud.default_avatar}` : ''}'
+      let defaultIcon = '!{ default_avatar ? `?d=${default_avatar}` : ''}'
       let iconUrl = `https://gravatar.loli.net/avatar/${md5(mail.toLowerCase()) + defaultIcon}`
       return iconUrl
     }
@@ -54,17 +56,17 @@ script.
 
     const getComment = () => {
         let serverURL = ''
-        if (!{Boolean(theme.newest_comments.leancloud.serverURL)}) {
+        if (!{Boolean(theme.valine.serverURLs)}) {
-          serverURL = '!{theme.newest_comments.leancloud.serverURL}'
+          serverURL = '!{theme.valine.serverURLs}'
         } else {
-          serverURL = 'https://!{theme.newest_comments.leancloud.appId.substring(0,8)}.api.lncldglobal.com'
+          serverURL = 'https://!{theme.valine.appId.substring(0,8)}.api.lncldglobal.com'
         }
 
       var settings = {
         "method": "GET",
         "headers": {
-          "X-LC-Id": '!{theme.newest_comments.leancloud.appId}',
+          "X-LC-Id": '!{theme.valine.appId}',
-          "X-LC-Key": '!{theme.newest_comments.leancloud.appKey}',
+          "X-LC-Key": '!{theme.valine.appKey}',
           "Content-Type": "application/json"
         },
       }

layout/includes/third-party/newest-comments/waline.pug

@@ -0,0 +1,95 @@
+- let default_avatar = theme.waline.avatar
+
+script.
+  window.addEventListener('load', () => {
+    const changeContent = (content) => {
+      if (content === '') return content
+
+      content = content.replace(/<[^>]+>/g,"") // remove html tag
+      content = content.replace(/(http(s?):)([/|.|\w|\s|-])*\.(?:jpg|jpeg|gif|png|webp)/g, '') // remove image link
+      content = content.replace(/(\b(https?|ftp|file):\/\/[-A-Z0-9+&@#\/%?=~_|!:,.;]*[-A-Z0-9+&@#\/%=~_|])/gi, '') // remove url
+
+      if (content.length > 150) {
+        content = content.substring(0,150) + '...'
+      }
+      return content
+    }
+
+    const getIcon = (mail) => {
+      let defaultIcon = '!{ default_avatar ? `?d=${default_avatar}` : ''}'
+      let iconUrl = `https://gravatar.loli.net/avatar/${mail + defaultIcon}`
+      return iconUrl
+    }
+
+    const generateHtml = array => {
+      let result = ''
+
+      if (array.length) {
+        for (let i = 0; i < array.length; i++) {
+          result += '<div class=\'aside-list-item\'>'
+
+          if (!{theme.newest_comments.avatar}) {
+            let name = 'src'
+            if(!{theme.lazyload.enable}) {
+              name = 'data-lazy-src'
+            }
+            result += `<a href='${array[i].url}' class="thumbnail"><img ${name}='${getIcon(array[i].mail)}' alt='${array[i].nick}'></a>`
+          }
+
+          result += `<div class='content'>
+          <a class='comment' href='${array[i].url}'>${array[i].content}</a>
+          <div class='name'><span>${array[i].nick}</span><time> / ${btf.diffDate(array[i].date, true)}</time></div>
+          </div></div>`
+        }
+      } else {
+        result += '!{_p("aside.card_newest_comments.zero")}'
+      }
+
+      let $dom = document.querySelector('#card-newest-comments .aside-list')
+      $dom.innerHTML= result
+      window.lazyLoadInstance && window.lazyLoadInstance.update()
+      window.pjax && window.pjax.refresh($dom)
+    }
+
+    const getComment = () => {
+      const loadWaline = () => {
+        Waline.Widget.RecentComments({
+          el: '#card-newest-comments .aside-list',
+          serverURL: '!{theme.waline.serverURL}',
+          count: !{theme.newest_comments.limit}
+        }).then(comments => {
+          const walineArray = comments.map(function (e) {
+            return {
+              'content': changeContent(e.comment),
+              'mail': e.mail,
+              'nick': e.nick,
+              'url': e.url,
+              'date': e.createdAt,
+            }
+          })
+          saveToLocal.set('waline-newest-comments', JSON.stringify(walineArray), 10/(60*24))
+          generateHtml(walineArray)
+        }).catch(e => {
+          const $dom = document.querySelector('#card-newest-comments .aside-list')
+          $dom.innerHTML= "!{_p('aside.card_newest_comments.error')}"
+        }) 
+      }
+
+      if (typeof Waline === 'function') loadWaline() 
+      else getScript('!{url_for(theme.CDN.waline)}').then(loadWaline)
+    }
+
+    const newestCommentInit = () => {
+      if (document.querySelector('#card-newest-comments .aside-list')) {
+        const data = saveToLocal.get('waline-newest-comments')
+        if (data) {
+          generateHtml(JSON.parse(data))
+        } else {
+          getComment()
+        }
+      }
+    }
+
+    newestCommentInit()
+    document.addEventListener('pjax:complete', newestCommentInit)
+  })

package.json

@@ -1,6 +1,6 @@
 {
   "name": "hexo-theme-butterfly",
-  "version": "3.4.1",
+  "version": "3.5.0-b1",
   "description": "A Simple and Card UI Design theme for Hexo",
   "main": "package.json",
   "scripts": {

source/css/_layout/third-party.styl

@@ -1,4 +1,5 @@
-#vcomment
+#vcomment,
+#waline
   font-size: 1.1em
 
   .vbtn
@@ -9,12 +10,9 @@
     &:hover
       background: var(--btn-hover-color)
 
-  if hexo-config('valine.bg')
+  textarea
-    textarea
+    &:focus
-      background: url(hexo-config('valine.bg')) 100% 100% no-repeat
+      background-image: none
-
-      &:focus
-        background-image: none
 
   .vimg
     transition: all .3s
@@ -27,6 +25,16 @@
     &:after
       z-index: 22
 
+if hexo-config('valine.bg')
+  #vcomment
+    textarea
+      background: url(hexo-config('valine.bg')) 100% 100% no-repeat
+
+if hexo-config('waline.bg')
+  #waline
+    textarea
+      background: url(hexo-config('waline.bg')) 100% 100% no-repeat
+
 .fireworks
   position: fixed
   top: 0

source/js/main.js

@@ -288,15 +288,17 @@ document.addEventListener('DOMContentLoaded', function () {
   }
 
   const jqLoadAndRun = () => {
-    const isFancybox = GLOBAL_CONFIG.lightbox === 'fancybox'
+    const $fancyboxEle = GLOBAL_CONFIG.lightbox === 'fancybox'
-    const $fancyboxEle = isFancybox ? document.querySelectorAll('#article-container :not(a):not(.gallery-group) > img, #article-container > img') : null
+      ? document.querySelectorAll('#article-container :not(a):not(.gallery-group) > img, #article-container > img') 
+      : []
+    const fbLengthNoZero = $fancyboxEle.length > 0
     const $jgEle = document.querySelectorAll('#article-container .justified-gallery')
-    const jgEleLength = $jgEle.length
+    const jgLengthNoZero = $jgEle.length > 0
 
-    if (jgEleLength || $fancyboxEle !== null) {
+    if (jgLengthNoZero || fbLengthNoZero) {
       btf.isJqueryLoad(() => {
-        jgEleLength && runJustifiedGallery($jgEle)
+        jgLengthNoZero && runJustifiedGallery($jgEle)
-        isFancybox && addFancybox($fancyboxEle)
+        fbLengthNoZero && addFancybox($fancyboxEle)
       })
     }
   }