From dca305c5c3e6079ee61b0b85b7c9cdad6e7fc7ad Mon Sep 17 00:00:00 2001
From: xaoxuu <git@xaoxuu.com>
Date: Fri, 23 Feb 2024 12:31:21 +0800
Subject: [PATCH] [feat] add waline v3

---
 _config.yml                                   |  4 ++++
 layout/_partial/comments/waline_v3/layout.ejs | 23 +++++++++++++++++++
 layout/_partial/comments/waline_v3/script.ejs | 17 ++++++++++++++
 source/css/_plugins/comments/waline.styl      |  2 +-
 source/css/_plugins/index.styl                |  2 ++
 5 files changed, 47 insertions(+), 1 deletion(-)
 create mode 100644 layout/_partial/comments/waline_v3/layout.ejs
 create mode 100644 layout/_partial/comments/waline_v3/script.ejs

diff --git a/_config.yml b/_config.yml
index 9116792..a344ff4 100755
--- a/_config.yml
+++ b/_config.yml
@@ -242,6 +242,10 @@ comments:
     #   token: # 图床验证
     #   resp: # 图片地址返回值的字段
 
+  waline_v3:
+    # Waline server address url, you should set this to your own link
+    serverURL: https://waline.vercel.app
+
   # Artalk
   # https://artalk.js.org/
   artalk:
diff --git a/layout/_partial/comments/waline_v3/layout.ejs b/layout/_partial/comments/waline_v3/layout.ejs
new file mode 100644
index 0000000..0777a75
--- /dev/null
+++ b/layout/_partial/comments/waline_v3/layout.ejs
@@ -0,0 +1,23 @@
+<%
+function layoutDiv() {
+  var el = ''
+  el += '<div id="waline_container" class="waline_thread"'
+  const cfg = theme.comments['waline_v3']
+  var attrs = {}
+  if (page.comment_id) {
+    attrs['comment_id'] = page.comment_id
+  }
+  // 参数在这里进行传递
+  attrs.serverURL = cfg?.serverURL
+  
+  for (let key of Object.keys(attrs)) {
+    if (attrs[key]) {
+      el += ' ' + key + '="' + attrs[key] + '"'
+    }
+  }
+  el += `>${icon('default:loading')}</div>`
+  return el
+}
+%>
+
+<%- layoutDiv() %>
diff --git a/layout/_partial/comments/waline_v3/script.ejs b/layout/_partial/comments/waline_v3/script.ejs
new file mode 100644
index 0000000..6e8f694
--- /dev/null
+++ b/layout/_partial/comments/waline_v3/script.ejs
@@ -0,0 +1,17 @@
+<script defer type="module">
+  import { init } from 'https://unpkg.com/@waline/client@v3/dist/waline.js';
+  window.addEventListener('DOMContentLoaded', (event) => {
+    utils.css('https://unpkg.com/@waline/client@v3/dist/waline.css');
+    const id = 'waline_container';
+    const el = document.getElementById(id);
+    var path = el.getAttribute('comment_id');
+    if (!path) {
+      path = decodeURI(window.location.pathname);
+    }
+    const waline = init({
+      el: `#${id}`,
+      path: path,
+      serverURL: el.getAttribute('serverURL'),
+    });
+  });
+</script>
diff --git a/source/css/_plugins/comments/waline.styl b/source/css/_plugins/comments/waline.styl
index 1458b55..d1b021b 100644
--- a/source/css/_plugins/comments/waline.styl
+++ b/source/css/_plugins/comments/waline.styl
@@ -1,4 +1,4 @@
-.cmt-body.waline
+.cmt-body
   .wl-panel
     margin: 0.5em 0 !important
   .wl-meta-head
diff --git a/source/css/_plugins/index.styl b/source/css/_plugins/index.styl
index 65f6466..f9e0064 100644
--- a/source/css/_plugins/index.styl
+++ b/source/css/_plugins/index.styl
@@ -28,5 +28,7 @@ if hexo-config('comments.service') == 'utterances'
   @import 'comments/utterances'
 if hexo-config('comments.service') == 'waline'
   @import 'comments/waline'
+if hexo-config('comments.service') == 'waline_v3'
+  @import 'comments/waline'
 if hexo-config('comments.service') == 'artalk'
   @import 'comments/artalk'