feat: add twikoo comment plugin

_config.yml

@@ -173,6 +173,13 @@ comment:
     client_id:             # GitHub Application Client ID
     client_secret:         # GitHub Application Client Secret
 
+  # Twikoo
+  # See: https://github.com/imaegoo/twikoo
+  twikoo:
+    enable: false
+    env_id:                # Tencent Cloud environment id
+    region:                # environment region. If select Guangzhou, fill in "ap-guangzhou".
+
 
 # ---------------------------------------------------------------------------------------
 # RSS

layout/_partial/comment/comment.ejs

@@ -1,10 +1,16 @@
 <div class="comments-container">
     <div id="comment-anchor"></div>
-    <% if (theme.comment.valine.enable && theme.comment.gitalk.enable) { %>
+    <% if (
+            theme.comment.valine.enable === true
+            && theme.comment.gitalk.enable === true
+            && theme.comment.twikoo.enable === true
+    ) { %>
         <%- partial('valine') %>
-    <% } else if (theme.comment.valine.enable) { %>
+    <% } else if (theme.comment.valine.enable === true) { %>
         <%- partial('valine') %>
-    <% } else if (theme.comment.gitalk.enable) { %>
+    <% } else if (theme.comment.gitalk.enable === true) { %>
         <%- partial('gitalk') %>
+    <% } else if (theme.comment.twikoo.enable === true) { %>
+        <%- partial('twikoo') %>
     <% } %>
 </div>

layout/_partial/comment/twikoo.ejs

@@ -0,0 +1,26 @@
+<% if(theme.comment.twikoo.enable === true && theme.comment.twikoo.env_id) { %>
+    <div class="twikoo-container">
+        <script <%= theme.pjax.enable === true ? 'data-pjax' : '' %>
+                src="//cdn.jsdelivr.net/npm/twikoo@1.0.0/dist/twikoo.all.min.js"
+        ></script>
+        <div id="twikoo-comment"></div>
+        <script <%= theme.pjax.enable === true ? 'data-pjax' : '' %>>
+            function loadTwikoo() {
+                twikoo.init({
+                    el: '#twikoo-comment',
+                    envId: '<%= theme.comment.twikoo.env_id %>',
+                    region: '<%= theme.comment.twikoo.region %>',
+                });
+            }
+
+            if ('<%= theme.pjax.enable %>') {
+                const loadTwikooTimeout = setTimeout(() => {
+                    loadTwikoo();
+                    clearTimeout(loadTwikooTimeout);
+                }, 1000);
+            } else {
+                window.addEventListener('DOMContentLoaded', loadTwikoo);
+            }
+        </script>
+    </div>
+<% } %>

layout/_partial/post-tools.ejs

@@ -8,7 +8,11 @@
         <% } %>
 
         <!-- go comment -->
-        <% if (theme.comment.valine.enable || theme.comment.gitalk.enable) { %>
+        <% if (
+                theme.comment.valine.enable
+                || theme.comment.gitalk.enable
+                || theme.comment.twikoo.enable
+        ) { %>
             <li class="go-comment">
                 <i class="fas fa-comment"></i>
             </li>

layout/article-content.ejs

@@ -46,7 +46,7 @@
                            rel="prev"
                            href="<%= url_for(page.prev.path) %>"
                         >
-                            <span class="left arrow-icon flex-center" >
+                            <span class="left arrow-icon flex-center">
                               <i class="fas fa-chevron-left"></i>
                             </span>
                             <span class="title flex-center">
@@ -66,7 +66,7 @@
                                 <span class="post-nav-title-item"><%= page.next.title %></span>
                                 <span class="post-nav-item"><%= __('next_posts') %></span>
                             </span>
-                            <span class="right arrow-icon flex-center" >
+                            <span class="right arrow-icon flex-center">
                               <i class="fas fa-chevron-right"></i>
                             </span>
                         </a>
@@ -75,7 +75,11 @@
             </div>
         <% } %>
 
-        <% if (theme.comment.valine.enable || theme.comment.gitalk.enable) { %>
+        <% if (
+                theme.comment.valine.enable
+                || theme.comment.gitalk.enable
+                || theme.comment.twikoo.enable
+        ) { %>
             <div class="comment-container">
                 <%- partial('_partial/comment/comment') %>
             </div>

source/css/layout/_partial/comment/comment.styl

@@ -1,13 +1,15 @@
-if (hexo-config('comment.valine.enable')) {
+if (hexo-config('comment.valine.enable') && hexo-config('comment.gitalk.enable') && hexo-config('comment.twikoo.enable')) {
   @require "./valine.styl";
-}
 
-if (hexo-config('comment.gitalk.enable')) {
+} else if (hexo-config('comment.valine.enable')) {
+  @require "./valine.styl";
+
+} else if (hexo-config('comment.gitalk.enable')) {
   @require "./gitalk.styl";
-}
 
-if (hexo-config('comment.valine.enable') && hexo-config('comment.gitalk.enable')) {
-  @require "./valine.styl";
+} else if (hexo-config('comment.twikoo.enable')) {
+  @require "./twikoo.styl";
+
 }
 
 .comments-container {

source/css/layout/_partial/comment/twikoo.styl

@@ -0,0 +1,40 @@
+.twikoo-container {
+
+  #twikoo {
+
+    .actions {
+
+      .OwO {
+
+        .OwO-body {
+          color: var(--defauly-color);
+          background-color: var(--background-color);
+        }
+      }
+    }
+
+    .tk-main {
+
+      .tk-meta {
+
+        .tk-tag {
+
+          &.tk-tag-green {
+            background: -webkit-linear-gradient(45deg, #e3565e, #ee854b, #f6c258, #90c68a, #5fb3b3, #6699cc, #c594c5);
+            background: linear-gradient(45deg, #e3565e, #ee854b, #f6c258, #90c68a, #5fb3b3, #6699cc, #c594c5);
+            color: #fff;
+            border none;
+            border-radius: 5px;
+          }
+
+        }
+
+      }
+
+    }
+
+
+  }
+
+
+}