feat: 新增 Artalk 评论系统

_config.yml

@@ -750,7 +750,7 @@ post:
     enable: false
     # 指定的插件，需要同时设置对应插件的必要参数
     # The specified plugin needs to set the necessary parameters at the same time
-    # Options: utterances | disqus | gitalk | valine | waline | changyan | livere | remark42 | twikoo | cusdis | giscus | discuss
+    # Options: utterances | disqus | gitalk | valine | waline | changyan | livere | remark42 | twikoo | cusdis | giscus | discuss | artalk
     type: disqus
 
 
@@ -912,6 +912,13 @@ discuss:
   serverURLs:
   path: window.location.pathname
 
+# Artalk
+# 由 Golang 驱动的自托管评论系统
+# Self-hosted commenting system driven by Golang
+# See: https://artalk.js.org
+artalk:
+  server:
+  site:
 
 #---------------------------
 # 归档页
@@ -1124,6 +1131,8 @@ static_prefix:
 
   discuss: https://lib.baomitu.com/discuss/1.2.1/
 
+  artalk: https://lib.baomitu.com/artalk/2.9.0/
+
   hint: https://lib.baomitu.com/hint.css/2.7.0/
 
   moment: https://lib.baomitu.com/moment.js/2.29.4/

layout/_partials/comments/artalk.ejs

@@ -0,0 +1,45 @@
+<% if (theme.artalk && theme.artalk.server) { %>
+  <div id="artalk"></div>
+  <script type="text/javascript">
+    Fluid.utils.loadComments('#comments', function() {
+      Fluid.utils.createCssLink('<%= url_join(theme.static_prefix.artalk, 'Artalk.min.css') %>');
+      Fluid.utils.createScript('<%= url_join(theme.static_prefix.artalk, 'Artalk.min.js') %>', function() {
+        var schema = document.documentElement.getAttribute('data-user-color-scheme');
+        if (schema !== 'light' && schema !== 'dark') {
+          schema = 'light';
+        }
+        var options = Object.assign(
+          <%- JSON.stringify(theme.artalk || {}) %>,
+          {
+            el: document.querySelector('#artalk'),
+            pageKey: '',
+            pageTitle: '<%= page.title %>',
+            server: '<%= theme.artalk.server %>',
+            site: '<%= theme.artalk.site %>',
+            darkMode: schema === 'dark'
+          }
+        );
+        Artalk.init(options);
+
+        // watch for user color scheme change
+        var observer = new MutationObserver(function (mutations) {
+          mutations.forEach(function (mutation) {
+            if (mutation.attributeName === 'data-user-color-scheme') {
+              var schema = document.documentElement.getAttribute('data-user-color-scheme');
+              if (schema === 'dark') {
+                Artalk.setDarkMode(true);
+              } else {
+                Artalk.setDarkMode(false);
+              }
+            }
+          });
+        });
+
+        observer.observe(document.documentElement, {
+          attributes: true
+        });
+      });
+    });
+  </script>
+  <noscript>Please enable JavaScript to view the comments</noscript>
+<% } %>