From 851c23cedc38252a2811e617b94c265304925b4a Mon Sep 17 00:00:00 2001
From: xaoxuu <git@xaoxuu.com>
Date: Sun, 11 Dec 2022 14:33:10 +0800
Subject: [PATCH] [feat] add artalk

---
 _config.yml                                   | 42 ++++++-------------
 .../plugins/comments/artalk/layout.ejs        | 19 +++++++++
 .../plugins/comments/artalk/script.ejs        | 25 +++++++++++
 source/css/_plugins/comments/artalk.styl      |  4 ++
 source/css/_plugins/index.styl                |  2 +
 5 files changed, 63 insertions(+), 29 deletions(-)
 create mode 100644 layout/_partial/plugins/comments/artalk/layout.ejs
 create mode 100644 layout/_partial/plugins/comments/artalk/script.ejs
 create mode 100644 source/css/_plugins/comments/artalk.styl

diff --git a/_config.yml b/_config.yml
index 0e625a8..cb19dec 100755
--- a/_config.yml
+++ b/_config.yml
@@ -84,7 +84,7 @@ search:
 
 ######## Comments ########
 comments:
-  service: # beaudar, utterances, twikoo, waline
+  service: # beaudar, utterances, giscus, twikoo, waline, artalk
   # beaudar
   # https://beaudar.lipk.org/
   beaudar:
@@ -128,22 +128,18 @@ comments:
   twikoo:
     js: https://fastly.jsdelivr.net/npm/twikoo@1.4.0/dist/twikoo.all.min.js # 建议锁定版本
     envId: https://xxx # vercel函数
+  
+  # Waline
+  # https://waline.js.org/
   waline:
     js: https://unpkg.com/@waline/client@v2/dist/waline.js
     css: https://unpkg.com/@waline/client@v2/dist/waline.css
     # Waline server address url, you should set this to your own link
     serverURL:
-
     # If false, comment count will only be displayed in post page, not in home page
     commentCount: true
-
     # Pageviews count, Note: You should not enable both `waline.pageview` and `leancloud_visitors`.
     pageview: false
-
-    # Custom locales
-    # locale:
-    #   placeholder: Welcome to comment # Comment box placeholder
-
     # Custom emoji
     # emoji:
     #   - https://unpkg.com/@waline/emojis@1.1.0/weibo
@@ -153,28 +149,16 @@ comments:
     #   - https://unpkg.com/@waline/emojis@1.1.0/tieba
     #   - https://unpkg.com/@waline/emojis@1.1.0/tw-emoji
     #   - https://unpkg.com/@waline/emojis@1.1.0/bmoji
+  
+  # Artalk
+  # https://artalk.js.org/
+  artalk:
+    css: https://unpkg.com/artalk@2.4.3/dist/Artalk.css
+    js: https://unpkg.com/artalk@2.4.3/dist/Artalk.js 
+    server: # 后端服务地址
+    placeholder: ''
+    darkMode: auto
 
-    # Comment infomation, valid meta are nick, mail and link
-    # meta:
-    #   - nick
-    #   - mail
-    #   - link
-
-    # Set required meta field, e.g.: [nick] | [nick, mail]
-    # requiredMeta:
-    #   - nick
-
-    # Language, available values: en-US, zh-CN, zh-TW, pt-BR, ru-RU, jp-JP
-    # lang: zh-CN
-
-    # Word limit, no limit when setting to 0
-    # wordLimit: 0
-
-    # Whether enable login, can choose from 'enable', 'disable' and 'force'
-    # login: enable
-
-    # comment per page
-    # pageSize: 10
 
 ######## Footer ########
 footer:
diff --git a/layout/_partial/plugins/comments/artalk/layout.ejs b/layout/_partial/plugins/comments/artalk/layout.ejs
new file mode 100644
index 0000000..fb82fd7
--- /dev/null
+++ b/layout/_partial/plugins/comments/artalk/layout.ejs
@@ -0,0 +1,19 @@
+<%
+function layoutDiv() {
+  var el = '';
+  el += '<div id="artalk_container"';
+  let cfg = {};
+  if (page.comment_id) {
+    cfg['comment_id'] = page.comment_id;
+  }
+  for (let key of Object.keys(cfg)) {
+    if (cfg[key]) {
+      el += ' ' + key + '="' + cfg[key] + '"';
+    }
+  }
+  el += '><svg class="loading" style="vertical-align: middle;fill: currentColor;overflow: hidden;" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2709"><path d="M832 512c0-176-144-320-320-320V128c211.2 0 384 172.8 384 384h-64zM192 512c0 176 144 320 320 320v64C300.8 896 128 723.2 128 512h64z" p-id="2710"></path></svg></div>';
+  return el;
+}
+%>
+
+<%- layoutDiv() %>
\ No newline at end of file
diff --git a/layout/_partial/plugins/comments/artalk/script.ejs b/layout/_partial/plugins/comments/artalk/script.ejs
new file mode 100644
index 0000000..d3cd646
--- /dev/null
+++ b/layout/_partial/plugins/comments/artalk/script.ejs
@@ -0,0 +1,25 @@
+<script>
+  function load_artalk() {
+    if (!document.querySelectorAll("#artalk_container")[0]) return;
+    stellar.loadCSS('<%- theme.comments.artalk.css %>');
+    stellar.loadScript('<%- theme.comments.artalk.js %>', {defer: true}).then(function () {
+      const el = document.getElementById("artalk_container");
+      var path = el.getAttribute('comment_id');
+      if (!path) {
+        path = decodeURI(window.location.pathname);
+      }
+      var artalk = new Artalk({
+        el: '#artalk_container',
+        pageKey: path,
+        pageTitle: '<%= page.title || page.seo_title %>',
+        server: '<%= theme.comments.artalk.server %>',
+        placeholder: '<%= theme.comments.artalk.placeholder %>',
+        site: '<%= config.title %>',
+        darkMode: '<%= theme.comments.artalk.darkMode %>'
+        })
+      });
+  }
+  window.addEventListener('DOMContentLoaded', (event) => {
+    load_artalk();
+  });
+</script>
\ No newline at end of file
diff --git a/source/css/_plugins/comments/artalk.styl b/source/css/_plugins/comments/artalk.styl
new file mode 100644
index 0000000..5ac8691
--- /dev/null
+++ b/source/css/_plugins/comments/artalk.styl
@@ -0,0 +1,4 @@
+.cmt-body.artalk .artalk
+  --at-color-main: $color-theme
+  .atk-main-editor
+    border-radius: $border-block
\ No newline at end of file
diff --git a/source/css/_plugins/index.styl b/source/css/_plugins/index.styl
index 135bb27..85ee4f2 100644
--- a/source/css/_plugins/index.styl
+++ b/source/css/_plugins/index.styl
@@ -18,3 +18,5 @@ if hexo-config('comments.service') == 'utterances'
   @import 'comments/utterances'
 if hexo-config('comments.service') == 'waline'
   @import 'comments/waline'
+if hexo-config('comments.service') == 'artalk'
+  @import 'comments/artalk'