Finish the waline3 component develop.

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

@@ -5,10 +5,8 @@ NexT.plugins.comments.waline = function() {
     || !NexT.utils.checkDOMExist(element)) return; 
   
   const {
-    comment,
     emoji, 
     imguploader, 
-    pageview, 
     placeholder, 
     sofa,
     requiredmeta, 
@@ -39,8 +37,6 @@ NexT.plugins.comments.waline = function() {
       Waline.init({
         locale,
         el            : element,
-        pageview      : pageview,
-        comment       : comment,
         emoji         : emoji,
         imageUploader : imguploader,
         wordLimit     : wordlimit,

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

@@ -0,0 +1,59 @@
+/* Waline3 comment plugin */
+NexT.plugins.comments.waline3 = function () {
+  const element = '.waline3-container';
+  if (!NexT.CONFIG.waline3
+    || !NexT.utils.checkDOMExist(element)) return;
+    
+  const {
+    emoji,
+    search,
+    imguploader,
+    placeholder,
+    sofa,
+    requiredmeta,
+    serverurl,
+    wordlimit,
+    reaction,
+    reactiontext,
+    reactiontitle
+  } = NexT.CONFIG.waline3.cfg;
+
+  const waline_js = NexT.utils.getCDNResource(NexT.CONFIG.waline3.js);
+
+  NexT.utils.lazyLoadComponent(element, () => {
+    
+    const waline_css = NexT.utils.getCDNResource(NexT.CONFIG.waline3.css);
+    NexT.utils.getStyle(waline_css, 'before');
+   
+    let waline_script = `
+      let locale = {
+        placeholder   : '${placeholder}',
+        sofa          : '${sofa}',
+        reactionTitle : '${reactiontitle}'
+      };
+
+      let recatt = ${JSON.stringify(reactiontext)}
+      recatt.forEach(function(value, index){
+        locale['reaction'+index] = value;
+      });
+    
+      import('${waline_js}').then((Waline) => {
+        Waline.init({
+          locale,
+          el            : '${element}',
+          emoji         : ${emoji},
+          search        : ${search},
+          imageUploader : ${imguploader},
+          wordLimit     : ${wordlimit},
+          requiredMeta  : ${JSON.stringify(requiredmeta)},
+          reaction      : ${reaction},
+          serverURL     : '${serverurl}',
+        });
+
+        NexT.utils.hiddeLodingCmp('${element}');
+      });
+    `;
+    
+    NexT.utils.getScript(null, { module: true, textContent: waline_script });
+  });
+}

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

@@ -1,31 +1,66 @@
 /* Page's view & comment counter plugin */
-NexT.plugins.others.counter = function() {
+NexT.plugins.others.counter = function () {
   let pageview_js = undefined;
   let comment_js = undefined;
 
   const post_meta = NexT.CONFIG.postmeta;
 
   const views = post_meta.views;
-    if(views != undefined && views.enable) {
+  if (views != undefined && views.enable) {
-      if (views.plugin == 'waline') {
+    let pageview_el = '#pageview-count';
-        pageview_js = NexT.utils.getCDNResource(NexT.CONFIG.page.waline.js[0]);
+
-        NexT.utils.getScript(pageview_js, function(){
+    switch (views.plugin) {
+      case 'waline':
+        pageview_js = NexT.utils.getCDNResource(NexT.CONFIG.page.waline.pagecnt);
+        NexT.utils.getScript(pageview_js, function () {
           Waline.pageviewCount({
+            selector : pageview_el,
             serverURL: NexT.CONFIG.waline.cfg.serverurl
           });
         });
+        break;
+      case 'waline3':
+        pageview_js = NexT.utils.getCDNResource(NexT.CONFIG.page.waline3.pagecnt);
+
+        let pageview_script = `
+          import('${pageview_js}').then((Waline) => {
+            Waline.pageviewCount({             
+              selector : '${pageview_el}',
+              serverURL: '${NexT.CONFIG.waline3.cfg.serverurl}'
+            })
+          });
+          `;
+        NexT.utils.getScript(null, { module: true, textContent: pageview_script });
+        break;
     }
+
   }
 
   const comments = post_meta.comments;
   if (comments != undefined && comments.enable) {
-      if (comments.plugin == 'waline') {
+    let comments_el = '#comments-count';
-        comment_js = NexT.utils.getCDNResource(NexT.CONFIG.page.waline.js[1]);
+    switch (comments.plugin) {
-        NexT.utils.getScript(comment_js, function(){
+      case 'waline':
+        comment_js = NexT.utils.getCDNResource(NexT.CONFIG.page.waline.commentcnt);
+        NexT.utils.getScript(comment_js, function () {
           Waline.commentCount({
+            selector : comments_el,
             serverURL: NexT.CONFIG.waline.cfg.serverurl
           });
         });
+        break;
+      case 'waline3':
+        comment_js = NexT.utils.getCDNResource(NexT.CONFIG.page.waline3.commentcnt);
+        let comment_script = `
+          import('${comment_js}').then((Waline) => {
+            Waline.commentCount({             
+              selector : '${comments_el}',
+              serverURL: '${NexT.CONFIG.waline3.cfg.serverurl}'
+            })
+          });
+          `;
+        NexT.utils.getScript(null, { module: true, textContent: comment_script });
+        break;
     }
   }
 }

assets/js/utils.js

@@ -7,13 +7,13 @@ HTMLElement.prototype.wrap = function (wrapper) {
 };
 
 NexT.utils = {
-  registerMenuClick: function() {
+  registerMenuClick: function () {
     const pMenus = document.querySelectorAll('.main-menu > li > a.menus-parent');
-    pMenus.forEach(function(item) {
+    pMenus.forEach(function (item) {
       const icon = item.querySelector('span > i');
       var ul = item.nextElementSibling;
 
-      item.addEventListener('click', function(e) {
+      item.addEventListener('click', function (e) {
         e.preventDefault();
 
         ul.classList.toggle('expand');
@@ -30,7 +30,7 @@ NexT.utils = {
       }
     });
   },
-  registerImageLoadEvent: function() {
+  registerImageLoadEvent: function () {
     const images = document.querySelectorAll('.sidebar img, .post-block img, .vendors-list img');
 
     const callback = (entries) => {
@@ -40,7 +40,7 @@ NexT.utils = {
           let imgSrc = ele.getAttribute('data-src');
           if (imgSrc) {
             let img = new Image();
-            img.addEventListener('load', function() {
+            img.addEventListener('load', function () {
               ele.src = imgSrc;
             }, false);
             ele.src = imgSrc;
@@ -57,10 +57,10 @@ NexT.utils = {
     });
   },
 
-  registerImageViewer: function() {
+  registerImageViewer: function () {
     const post_body = document.querySelector('.post-body');
     if (post_body) {
-      new Viewer(post_body,{ navbar:2, toolbar:2 });
+      new Viewer(post_body, { navbar: 2, toolbar: 2 });
     }
   },
 
@@ -147,8 +147,8 @@ NexT.utils = {
     }
   },
 
-  fmtLaWidget: function(){
+  fmtLaWidget: function () {
-    setTimeout(function(){
+    setTimeout(function () {
       const laWidget = document.querySelectorAll('#la-siteinfo-widget span');
       if (laWidget.length > 0) {
         const valIds = [0, 2, 4, 6];
@@ -162,7 +162,7 @@ NexT.utils = {
   },
 
   fmtBusuanzi: function () {
-    setTimeout(function(){
+    setTimeout(function () {
       const bszUV = document.getElementById('busuanzi_value_site_uv');
       if (bszUV) {
         bszUV.innerText = NexT.utils.numberFormat(bszUV.innerText);
@@ -587,7 +587,7 @@ NexT.utils = {
     });
   },
 
-  getStyle: function (src, position='after', parent) {
+  getStyle: function (src, position = 'after', parent) {
     const link = document.createElement('link');
     link.setAttribute('rel', 'stylesheet');
     link.setAttribute('type', 'text/css');
@@ -607,8 +607,11 @@ NexT.utils = {
         condition: legacyCondition
       }).then(options);
     }
+
     const {
       condition = false,
+      module = false,
+      textContent = undefined,
       attributes: {
         id = '',
         async = false,
@@ -628,6 +631,8 @@ NexT.utils = {
 
         if (id) script.id = id;
         if (crossOrigin) script.crossOrigin = crossOrigin;
+        if (module) script.type = 'module';
+        if (textContent != undefined) script.textContent = textContent;
         script.async = async;
         script.defer = defer;
         Object.assign(script.dataset, dataset);
@@ -638,6 +643,7 @@ NexT.utils = {
         script.onload = resolve;
         script.onerror = reject;
 
+        if (src != null && src != undefined) {
           if (typeof src === 'object') {
             const { url, integrity } = src;
             script.src = url;
@@ -648,12 +654,14 @@ NexT.utils = {
           } else {
             script.src = src;
           }
+        }
+
         (parentNode || document.head).appendChild(script);
       }
     });
   },
 
-  lazyLoadComponent: function(selector, legacyCallback) {
+  lazyLoadComponent: function (selector, legacyCallback) {
     if (legacyCallback) {
       return this.lazyLoadComponent(selector).then(legacyCallback);
     }

data/resources.yaml

@@ -108,6 +108,19 @@ waline:
     file: dist/waline.css
     alias: "@waline/client"
 
+waline3:
+  js:
+    name: waline
+    version: 3.3.0
+    file: dist/waline.js
+    alias: "@waline/client"
+
+  css:
+    name: waline
+    version: 3.3.0
+    file: dist/waline.min.css
+    alias: "@waline/client"
+
 artalk:
   js:
     name: artalk
@@ -187,3 +200,16 @@ plugins:
         version: 2.15.8
         file: dist/comment.js
         alias: "@waline/client"
+  waline3:
+    js:
+      - name: pageview
+        alias_name: waline
+        version: 3.3.0
+        file: dist/pageview.js
+        alias: "@waline/client" 
+
+      - name: comment
+        alias_name: waline
+        version: 3.3.0
+        file: dist/comment.js
+        alias: "@waline/client"

exampleSite/config.yaml

@@ -485,14 +485,14 @@ params:
     # 是否开启评论数显示
     comments: 
       enable: true
-      # 评论统计插件，暂只支持waline
+      # 评论统计插件，暂只支持waline和waline3
-      # Comment counter plugin, only support waline
+      # Comment counter plugin, only support waline and waline3
       plugin: waline
     # 是否开启页面访问数显示
     views:
       enable: true
-      # 页面访问统计插件，支持busuanzi, waline, leancloud
+      # 页面访问统计插件，支持busuanzi, waline, waline3
-      # Page views counter plugin, support: busuanzi, waline, leancloud
+      # Page views counter plugin, support: busuanzi, waline, waline3
       plugin: busuanzi
 
   # 文章底部的设置
@@ -809,7 +809,7 @@ params:
     # Lazyload all comment systems.
     # lazyload: false
     # 设置你要显示的2个评论插件，`weight` 数字越小越靠前
-    # `name` 参数名可选值：livere | waline | utterances | artalk | giscus
+    # `name` 参数名可选值：livere | waline | waline3 | utterances | artalk | giscus
     # Modify texts or order for any naves, here are some examples.
     nav:
       - name: waline
@@ -836,6 +836,19 @@ params:
     reactionText: [ '点赞', '踩一下', '得意', '不屑', '尴尬', '睡觉']
     reactionTitle: "你认为这篇文章怎么样？"
     serverURL: #<your waline server url>
+  # Waline(2) 与 Waline3 无法兼容只能是二选一
+  # Waline3 采用的是ES模块开发，需要更高版本的浏览器才能支持，如考虑兼容性建议可优先选用Waline2
+  # waline3:
+  #   placeholder: "请文明发言哟 ヾ(≧▽≦*)o"
+  #   sofa: "快来发表你的意见吧 (≧∀≦)ゞ"
+  #   emoji: false
+  #   imgUploader: false
+  #   wordLimit: 200
+  #   requiredMeta: ['nick', 'mail']
+  #   reaction: true
+  #   reactionText: [ '点赞', '踩一下', '得意', '不屑', '尴尬', '睡觉']
+  #   reactionTitle: "你认为这篇文章怎么样？"
+  #   serverURL: #<your waline server url>
 
   # Artalk 评论插件
   # 更多配置信息请参考：https://artalk.js.org
@@ -921,11 +934,11 @@ params:
     id:     # <app_id>
     color:  "#fc6423"
 
-  # AddThis文章分享功能
+  # AddThis文章分享功能（服务商已下线，不推荐使用）
   # 更多信息及配置请参考：https://www.addthis.com
-  # AddThis Share. 
+  # AddThis Share (The service provider has been offline, not recommended for use)
   # See: https://www.addthis.com
-  addThisId: #<Your addthis> 
+  # addThisId: #<Your addthis> 
 
 
   # ---------------------------------------------------------------

layouts/partials/_thirdparty/comment/waline3.html

@@ -0,0 +1 @@
+<div class="waline3-container"></div>

layouts/partials/head/config.html

@@ -8,11 +8,24 @@
 }}
 
 {{/* Append waline pageview & comment plugin */}}
-{{ if or (eq .Site.Params.postMeta.views.plugin "waline") (eq .Site.Params.postMeta.comments.plugin "waline") }}
+{{ with .Site.Params.postMeta.views }}
-{{ $counter := dict
+  {{ if and .enable (ne .plugin "busuanzi") }}
-  "js"  .Site.Data.resources.plugins.waline.js
+    {{ $plugin := .plugin }}
-}}
+    {{ $counter := dict
-{{ $pageCfg = merge $pageCfg (dict "waline" $counter) }}
+      "pagecnt" (index ($.Site.Data.resources.plugins) $plugin "js" 0)
+    }}
+    {{ $pageCfg = merge $pageCfg (dict $plugin $counter) }}
+  {{ end }}
+{{ end }}
+
+{{ with .Site.Params.postMeta.comments }}
+  {{ if .enable }}
+    {{ $plugin := .plugin }}
+    {{ $counter := dict
+      "commentcnt" (index ($.Site.Data.resources.plugins) $plugin "js" 1)
+    }}
+    {{ $pageCfg = merge $pageCfg (dict $plugin $counter) }}
+  {{ end }}
 {{ end }}
 
 {{/* Append mermaid plugin */}}

layouts/partials/init.html

@@ -100,6 +100,15 @@
 {{ $config = merge $config (dict "waline" $waline) }}
 {{ end }} 
 
+{{ with .Site.Params.waline3 }}
+{{ $waline := dict 
+  "js"  $.Site.Data.resources.waline3.js
+  "css" $.Site.Data.resources.waline3.css
+  "cfg" .
+}}
+{{ $config = merge $config (dict "waline3" $waline) }}
+{{ end }} 
+
 {{ with .Site.Params.giscus }}
 {{ $giscus := dict 
   "js"  $.Site.Data.resources.giscus.js

layouts/partials/post/header_meta/views.html

@@ -1,5 +1,5 @@
 {{ if .Site.Params.postMeta.views.enable }}
-{{ $pageViewId := "" }}
+{{ $pageViewId := "pageview-count" }}
 {{ if eq .Site.Params.postMeta.views.plugin "leancloud" }}
 {{ $pageViewId = "leancloud-visitors-count" }}  
 {{ else if eq .Site.Params.postMeta.views.plugin "busuanzi" }}
@@ -12,7 +12,7 @@
   <span class="post-meta-item-text">
   {{ print (T "PostMeta.views") (T "Symbol.colon") }}
   </span>
-  <span {{ with $pageViewId }}id="{{ . }}"{{end}} {{ if eq .Site.Params.postMeta.views.plugin "waline" }}class="waline-pageview-count"{{end}} data-path="{{ .RelPermalink | relLangURL }}">
+  <span {{ with $pageViewId }}id="{{ . }}"{{end}} data-path="{{ .RelPermalink | relLangURL }}">
     <i class="fa fa-sync fa-spin"></i>
   </span>
 </span>

layouts/partials/scripts/global.html

@@ -47,12 +47,16 @@
 
 {{/* Comments scripts */}}
 {{ if isset .Site.Params "waline" }}
-{{ $walinejs := resources.Get "js/third-party/comments/waline.js" }}
+  {{ $walinejs := resources.Get "js/third-party/comments/waline.js" }}
-{{ $nextjs = $nextjs | append $walinejs }}
+  {{ $nextjs = $nextjs | append $walinejs }}
+{{ end }}
+{{ if isset .Site.Params "waline3" }}
+  {{ $walinejs3 := resources.Get "js/third-party/comments/waline3.js" }}
+  {{ $nextjs = $nextjs | append $walinejs3 }}
+{{ end }}
 {{ if or .Site.Params.postMeta.views.enable .Site.Params.postMeta.comments.enable }}
   {{ $counterjs := resources.Get "js/third-party/others/counter.js" }}
   {{ $nextjs = $nextjs | append $counterjs }}
-  {{ end }}
 {{ end }}
 {{ if isset .Site.Params "giscus" }}
 {{ $giscusjs := resources.Get "js/third-party/comments/giscus.js" }}

static/3rd/waline/3.3.0/comment.min.js

@@ -0,0 +1 @@
+const h=e=>e.replace(/\/?$/,"/")+"api/",i=(e,t="")=>{if("object"==typeof e&&e.errno)throw new TypeError(`${t} failed with ${e.errno}: `+e.errmsg);return e},g=({serverURL:e,lang:t,paths:n,signal:r})=>fetch(`${h(e)}comment?type=count&url=${encodeURIComponent(n.join(","))}&lang=`+t,{signal:r}).then(e=>e.json()).then(e=>i(e,"Get comment count").data),p=e=>{try{e=decodeURI(e)}catch{}return e},m=(e="")=>e.replace(/\/$/u,""),u=e=>/^(https?:)?\/\//.test(e),d=e=>{e=m(e);return u(e)?e:"https://"+e},$=e=>{"AbortError"!==e.name&&console.error(e.message)},f=e=>{e=e.dataset.path;return null!=e&&e.length?e:null},v=({serverURL:e,path:t=window.location.pathname,selector:n=".waline-comment-count",lang:r=navigator.language})=>{const o=new AbortController,a=document.querySelectorAll(n);return a.length&&g({serverURL:d(e),paths:Array.from(a).map(e=>p(f(e)??t)),lang:r,signal:o.signal}).then(n=>{a.forEach((e,t)=>{e.innerText=n[t].toString()})}).catch($),o.abort.bind(o)},w="3.3.0";export{v as commentCount,w as version};

static/3rd/waline/3.3.0/pageview.min.js

@@ -0,0 +1 @@
+const v="3.3.0",$={"Content-Type":"application/json"},h=e=>e.replace(/\/?$/,"/")+"api/",u=(e,t="")=>{if("object"==typeof e&&e.errno)throw new TypeError(`${t} failed with ${e.errno}: `+e.errmsg);return e},f=({serverURL:e,lang:t,paths:n,type:r,signal:a})=>fetch(`${h(e)}article?path=${encodeURIComponent(n.join(","))}&type=${encodeURIComponent(r.join(","))}&lang=`+t,{signal:a}).then(e=>e.json()).then(e=>u(e,"Get counter").data),U=({serverURL:e,lang:t,path:n,type:r,action:a})=>fetch(h(e)+"article?lang="+t,{method:"POST",headers:$,body:JSON.stringify({path:n,type:r,action:a})}).then(e=>e.json()).then(e=>u(e,"Update counter").data),R=({serverURL:e,lang:t,paths:n,signal:r})=>f({serverURL:e,lang:t,paths:n,type:["time"],signal:r}),w=e=>U({...e,type:"time",action:"inc"}),L=(e="")=>e.replace(/\/$/u,""),b=e=>/^(https?:)?\/\//.test(e),d=e=>{e=L(e);return b(e)?e:"https://"+e},j=e=>{"AbortError"!==e.name&&console.error(e.message)},m=e=>{e=e.dataset.path;return null!=e&&e.length?e:null},y=(r,e)=>{e.forEach((e,t)=>{const n=r[t].time;"number"==typeof n&&(e.innerText=n.toString())})},S=({serverURL:e,path:n=window.location.pathname,selector:t=".waline-pageview-count",update:r=!0,lang:a=navigator.language})=>{const o=new AbortController,l=Array.from(document.querySelectorAll(t)),s=e=>{e=m(e);return null!==e&&n!==e},i=t=>R({serverURL:d(e),paths:t.map(e=>m(e)??n),lang:a,signal:o.signal}).then(e=>y(e,t)).catch(j);if(r){const p=l.filter(e=>!s(e)),h=l.filter(s);w({serverURL:d(e),path:n,lang:a}).then(e=>y(e,p)),h.length&&i(h)}else i(l);return o.abort.bind(o)};export{S as pageviewCount,v as version};