From 9c630a6436fb1960956e874524ba812f74df0cea Mon Sep 17 00:00:00 2001
From: XPoet <i@xpoet.cn>
Date: Fri, 15 Jan 2021 16:18:02 +0800
Subject: [PATCH] feat: add twikoo comment plugin

---
 _config.yml                                   |  7 ++++
 layout/_partial/comment/comment.ejs           | 12 ++++--
 layout/_partial/comment/twikoo.ejs            | 26 ++++++++++++
 layout/_partial/post-tools.ejs                |  6 ++-
 layout/article-content.ejs                    | 10 +++--
 .../css/layout/_partial/comment/comment.styl  | 14 ++++---
 .../css/layout/_partial/comment/twikoo.styl   | 40 +++++++++++++++++++
 7 files changed, 102 insertions(+), 13 deletions(-)
 create mode 100644 layout/_partial/comment/twikoo.ejs
 create mode 100644 source/css/layout/_partial/comment/twikoo.styl

diff --git a/_config.yml b/_config.yml
index 0431078..bc500be 100644
--- a/_config.yml
+++ b/_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
diff --git a/layout/_partial/comment/comment.ejs b/layout/_partial/comment/comment.ejs
index 42f7773..3ca73a2 100644
--- a/layout/_partial/comment/comment.ejs
+++ b/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>
diff --git a/layout/_partial/comment/twikoo.ejs b/layout/_partial/comment/twikoo.ejs
new file mode 100644
index 0000000..b874949
--- /dev/null
+++ b/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>
+<% } %>
diff --git a/layout/_partial/post-tools.ejs b/layout/_partial/post-tools.ejs
index db415a3..a1ac4ac 100644
--- a/layout/_partial/post-tools.ejs
+++ b/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>
diff --git a/layout/article-content.ejs b/layout/article-content.ejs
index 608f69b..f660b7c 100644
--- a/layout/article-content.ejs
+++ b/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>
diff --git a/source/css/layout/_partial/comment/comment.styl b/source/css/layout/_partial/comment/comment.styl
index d577269..506ec75 100644
--- a/source/css/layout/_partial/comment/comment.styl
+++ b/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 {
diff --git a/source/css/layout/_partial/comment/twikoo.styl b/source/css/layout/_partial/comment/twikoo.styl
new file mode 100644
index 0000000..ff80949
--- /dev/null
+++ b/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;
+          }
+
+        }
+
+      }
+
+    }
+
+
+  }
+
+
+}