feat: add Artalk comment plugin (#193)

_config.yml

@@ -207,7 +207,7 @@ local_search:
 # ---------------------------------------------------------------------------------------
 comment:
   enable: false   # Option values: true | false
-  use: valine     # Option values: valine | gitalk | twikoo | waline | giscus
+  use: valine     # Option values: valine | gitalk | twikoo | waline | giscus | artalk
 
   # Valine
   # See: https://github.com/xCss/Valine
@@ -256,6 +256,12 @@ comment:
     category_id:
     reactions_enabled: false   # Option values: true | false
 
+  # Artalk
+  # See: https://github.com/ArtalkJS/Artalk
+  #      https://artalk.js.org
+  artalk:
+    server:     # Server URL
+
 
 # ---------------------------------------------------------------------------------------
 # Docs: https://keep-docs.xpoet.cn/basis/configuration-guide/rss.html

layout/_partial/comment/comment.ejs

@@ -21,6 +21,8 @@ const {
             <%- partial('./plugins/waline') %>
         <% } else if (theme_comment_use === 'giscus') { %>
             <%- partial('./plugins/giscus') %>
+        <% } else if (theme_comment_use === 'artalk') { %>
+            <%- partial('./plugins/artalk') %>
         <% } %>
     </div>
 <% } %>

layout/_partial/comment/plugins/artalk.ejs

@@ -0,0 +1,74 @@
+<%
+const { enable: pjax_enable } = theme?.pjax || {}
+const {
+  server: artalk_server_url,
+  options: artalk_options = {}
+} = theme?.comment?.artalk || {}
+const artalk_language = config?.language === 'en' ? 'en-US' : 'zh-CN'
+const artalk_css = `${artalk_server_url}/dist/Artalk.css`
+const artalk_js = `${artalk_server_url}/dist/Artalk.js`
+%>
+<% if(artalk_server_url) { %>
+    <div class="artalk-comment-container">
+        <link rel="stylesheet" href="<%= artalk_css %>" />
+        <div id="artalk-comment"></div>
+        <script <%= pjax_enable === true ? 'data-pjax' : '' %>
+                src="<%= artalk_js %>"
+                async
+                onerror="window.KeepCommentPlugin.loadFailHandle()"
+        ></script>
+        <script <%= pjax_enable === true ? 'data-pjax' : '' %>
+                async
+                onerror="window.KeepCommentPlugin.loadFailHandle()"
+        >
+          if (!window.KeepCommentPlugin?.initArtalkTheme) {
+            window.KeepCommentPlugin.initArtalkTheme = () => {
+              return document.body.classList.contains('dark-mode')
+            }
+          }
+
+          if (!window.KeepCommentPlugin?.changeArtalkTheme) {
+            window.KeepCommentPlugin.changeArtalkTheme = () => {
+              Artalk && Artalk.setDarkMode(window.KeepCommentPlugin.initArtalkTheme())
+            }
+          }
+
+          window.KeepCommentPlugin.artalkOptions = JSON.parse('<%= JSON.stringify(artalk_options) %>'.replace(/&#34;/g, '"'))
+
+          window.KeepCommentPlugin.initArtalk = () => {
+            if (window?.Artalk) {
+              Artalk.init({
+                el: '#artalk-comment',
+                server: '<%= artalk_server_url %>',
+                locale: '<%= artalk_language %>',
+                site: '<%= theme?.base_info?.title %>' || '<%= config?.title %>',
+                darkMode: window.KeepCommentPlugin.initArtalkTheme(),
+                countEl: '.post-comments-count',
+                ...window.KeepCommentPlugin.artalkOptions
+              })
+              window.KeepCommentPlugin.hideLoading()
+
+              const toggleThemeBtn = document.querySelector('.tool-dark-light-toggle')
+              toggleThemeBtn && toggleThemeBtn.addEventListener('click', () => {
+                window.KeepCommentPlugin.changeArtalkTheme()
+              })
+
+            } else {
+              setTimeout(() => {
+                window.KeepCommentPlugin.initArtalk()
+              }, 1000)
+            }
+          }
+
+          if ('<%= pjax_enable %>' === 'true') {
+            setTimeout(() => {
+              window.KeepCommentPlugin.initArtalk()
+            }, 1200)
+          } else {
+            window.addEventListener('DOMContentLoaded', window.KeepCommentPlugin.initArtalk)
+          }
+        </script>
+    </div>
+<% } else { %>
+    <%- partial('../config-error', { comment_plugin: 'Artalk' }) %>
+<% } %>