💄 Add comment counter in home & page.

assets/js/third-party/comments/waline.js

@@ -5,6 +5,7 @@ NexT.plugins.comments.waline = function() {
     || !NexT.utils.checkDOMExist(element)) return; 
   
   const {
+    comment,
     emoji, 
     imguploader, 
     pageview, 
@@ -39,6 +40,7 @@ NexT.plugins.comments.waline = function() {
         locale,
         el            : element,
         pageview      : pageview,
+        comment       : comment,
         emoji         : emoji,
         imageUploader : imguploader,
         wordLimit     : wordlimit,

assets/js/third-party/others/counter.js

@@ -0,0 +1,35 @@
+/* Page's view & comment counter plugin */
+NexT.plugins.others.counter = function() {
+    let busz_postview = false;
+    let pageview_js = undefined;
+    let comment_js = undefined;
+
+  const busz = NexT.CONFIG.busuanzi;
+  if (busz != undefined && busz.pageview) {
+    busz_postview = true;
+  }
+
+  // Here can append others pageview & comment plugin
+  const waline = NexT.CONFIG.waline;
+  if (waline != undefined){
+    if(!busz_postview && waline.cfg.pageview) {
+      pageview_js = NexT.utils.getCDNResource(NexT.CONFIG.page.waline.js[0]);
+      NexT.utils.getScript(pageview_js, function(){
+        Waline.pageviewCount({
+          serverURL: waline.cfg.serverurl
+        });
+      });
+    }
+
+    if (waline.cfg.comment) {
+      comment_js = NexT.utils.getCDNResource(NexT.CONFIG.page.waline.js[1]);
+      NexT.utils.getScript(comment_js, function(){
+        Waline.commentCount({
+          serverURL: waline.cfg.serverurl
+        });
+      });
+    }
+  }
+
+ 
+}

assets/js/third-party/others/pageview.js

@@ -1,21 +0,0 @@
-/* Waline pageview plugin */
-NexT.plugins.others.pageview = function() {
-  const busz = NexT.CONFIG.busuanzi;
-  if (busz != undefined && busz.pageview) return;
-
-  let pageview_js = undefined;
-
-  // Here can append others pageview plugin
-  const waline = NexT.CONFIG.waline;
-  if (waline != undefined && waline.cfg.pageview) {
-    pageview_js = NexT.utils.getCDNResource(NexT.CONFIG.page.pageview.js);
-  }
-
-  if (pageview_js == undefined) return;
-
-  NexT.utils.getScript(pageview_js, function(){
-    Waline.pageviewCount({
-      serverURL: waline.cfg.serverurl
-    });
-  });
-}

assets/js/utils.js

@@ -8,15 +8,15 @@ HTMLElement.prototype.wrap = function (wrapper) {
 
 NexT.utils = {
   registerImageLoadEvent: function() {
-    var images = document.querySelectorAll('.sidebar img, .post-block img, .vendors-list img');
+    const images = document.querySelectorAll('.sidebar img, .post-block img, .vendors-list img');
 			
-    var callback = (entries) => {
+    const callback = (entries) => {
       entries.forEach(item => {
         if (item.intersectionRatio > 0) {
-          var ele = item.target;
-          var imgSrc = ele.getAttribute('data-src');
+          let ele = item.target;
+          let imgSrc = ele.getAttribute('data-src');
           if (imgSrc) {
-            var img = new Image();
+            let img = new Image();
             img.addEventListener('load', function() {
               ele.src = imgSrc;
             }, false);
@@ -28,7 +28,7 @@ NexT.utils = {
       })
     };
       
-    var observer = new IntersectionObserver(callback);
+    const observer = new IntersectionObserver(callback);
     images.forEach(img => {
       observer.observe(img);
     });
@@ -125,7 +125,7 @@ NexT.utils = {
       if (laWidget.length > 0) {
         const valIds = [0, 2, 4, 6];
         const domIds = ['today_site_pv', 'yesterday_site_pv', 'month_site_pv', 'total_site_pv']
-        for (var i in valIds) {
+        for (let i in valIds) {
           let pv = NexT.utils.numberFormat(laWidget[valIds[i]].innerText);
           document.getElementById(domIds[i]).innerText = pv;
         }
@@ -455,7 +455,7 @@ NexT.utils = {
     const comms = document.querySelectorAll('.comment-wrap > div');
     if (comms.length <= 1) return;
     comms.forEach(function (item) {
-      var dis = window.getComputedStyle(item, null).display;
+      let dis = window.getComputedStyle(item, null).display;
       item.style.display = dis;
     });
   },

data/resources.yaml

@@ -115,12 +115,18 @@ plugins:
       name: mermaid
       version: 9.1.7
       file: dist/mermaid.min.js
-  # 文章访问统计
+  # 文章访问/评论统计
   waline:
     js:
-      name: '@waline/client'
-      version: 2.13.0
-      file: dist/pageview.js
-      alias: waline
+      - name: pageview
+        alias_name: '@waline/client'
+        version: 2.13.0
+        file: dist/pageview.js
+        alias: waline 
+      - name: comment
+        alias_name: '@waline/client'
+        version: 2.13.0
+        file: dist/comment.js
+        alias: waline
 
 

i18n/en.yaml

@@ -93,6 +93,8 @@ PostReadTime:
   other: "{{- .ReadingTime -}}min"
 PostViews:
   other: "Views"
+PostComments:
+  other: "Comments"
 PostTag:
   other: "Tags"
 PostReadMore:

i18n/zh-cn.yaml

@@ -94,6 +94,8 @@ PostReadTime:
   other: "{{- .ReadingTime -}}分钟"
 PostViews:
   other: 浏览
+PostComments:
+  other: 评论
 PostTags:
   other: 标签
 PostReadMore:

layouts/partials/head/config.html

@@ -7,12 +7,12 @@
   "title"     .Page.Title
 -}}
 
-{{/* Append waline pageview plugin */}}
-{{ if and .Site.Params.waline .Site.Params.waline.pageView }}
-{{ $pageview := dict
+{{/* Append waline pageview & comment plugin */}}
+{{ if and .Site.Params.waline ( or .Site.Params.waline.pageView .Site.Params.waline.comment) }}
+{{ $counter := dict
   "js"  .Site.Data.resources.plugins.waline.js
 }}
-{{ $pageCfg = merge $pageCfg (dict "pageview" $pageview) }}
+{{ $pageCfg = merge $pageCfg (dict "waline" $counter) }}
 {{ end }}
 
 {{/* Append mermaid plugin */}}

layouts/partials/post/header.html

@@ -27,10 +27,15 @@
     {{ partial "post/header_meta/created_date.html" . }}
     {{ partial "post/header_meta/update_date.html" . }}
     {{ partial "post/header_meta/categories.html" . }}
-    {{ if .Site.Params.waline.pageView }}
-      {{ if and $.IsHome (not (isset .Params "extlink")) }}
-      {{ partial "post/header_meta/views.html" . }}
-    {{ end }}
+    {{ if and $.IsHome (not (isset .Params "extlink")) }}
+    <div class="post-meta-items">
+      {{ if .Site.Params.waline.pageView }}
+        {{ partial "post/header_meta/views.html" . }}
+      {{ end }}
+      {{ if .Site.Params.waline.comment }}
+        {{ partial "post/header_meta/comments.html" . }}
+      {{ end }}
+    </div>
     {{ end }}    
   </div>
   {{- if not $.IsHome }}
@@ -38,6 +43,9 @@
     {{ partial "post/header_meta/words.html" . }}
     {{ partial "post/header_meta/readtime.html" . }}
     {{ partial "post/header_meta/views.html" . }}
+    {{ if .Site.Params.waline.comment }}
+    {{ partial "post/header_meta/comments.html" . }}
+    {{ end }}
   </div>
   {{ end }}
 </div>

layouts/partials/post/header_meta/comments.html

@@ -0,0 +1,11 @@
+<span class="post-meta-item" title="{{ T "PostComments" }}">
+  <span class="post-meta-item-icon">
+    <i class="far fa-comments"></i>
+  </span>
+  <span class="post-meta-item-text">
+  {{ print (T "PostComments") (T "SymbolColon") }}
+  </span>
+  <span {{ with .Site.Params.waline.comment }}class="waline-comment-count"{{end}} data-path="{{ .RelPermalink | relLangURL }}">
+    <i class="fa fa-sync fa-spin"></i>
+  </span>
+</span>

layouts/partials/scripts/global.html

@@ -49,9 +49,9 @@
 {{ if isset .Site.Params "waline" }}
 {{ $walinejs := resources.Get "js/third-party/comments/waline.js" }}
 {{ $nextjs = $nextjs | append $walinejs }}
-{{ if .Site.Params.waline.pageView }}
-  {{ $pageviewjs := resources.Get "js/third-party/others/pageview.js" }}
-  {{ $nextjs = $nextjs | append $pageviewjs }}
+{{ if or .Site.Params.waline.pageView .Site.Params.waline.comment }}
+  {{ $counterjs := resources.Get "js/third-party/others/counter.js" }}
+  {{ $nextjs = $nextjs | append $counterjs }}
   {{ end }}
 {{ end }}
 {{ if isset .Site.Params "giscus" }}