twikoo评论插件适配 (#16)

Co-authored-by: XiaoXuxuy <v_xuxu@baidu.com>

_config.yml

@@ -100,7 +100,11 @@ comments:
       - 6783037F2DF30EAB99F9FC256157D875
     friends: #md5加密后的小伙伴邮箱
       - 6783037F2DF30EAB99F9FC256157D875
-
+  # Twikoo
+  # https://twikoo.js.org/
+  twikoo:
+    js: https://cdn.jsdelivr.net/npm/twikoo@1.4.0/dist/twikoo.all.min.js # 建议锁定版本
+    envId: https://xxx # vercel函数
 
 ######## Footer ########
 footer:

layout/_partial/plugins/comments/twikoo/layout.ejs

@@ -0,0 +1,19 @@
+<%
+function layoutDiv() {
+  var el = '';
+  el += '<div id="twikoo_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() %>

layout/_partial/plugins/comments/twikoo/script.ejs

@@ -0,0 +1,20 @@
+<script>
+    function load_twikoo() {
+        if (!document.querySelectorAll("#twikoo_container")[0]) return;
+        stellar.loadScript('<%- theme.comments.twikoo.js %>', {defer: true}).then(function () {
+            const el = document.getElementById("twikoo_container");
+            var path = el.getAttribute('comment_id');
+            if (!path) {
+                path = decodeURI(window.location.pathname);
+            }
+            twikoo.init(Object.assign(<%- JSON.stringify(theme.comments.twikoo) %>, {
+                el: '#twikoo_container',
+                path: path,
+            }));
+        });
+    }
+
+    window.addEventListener('DOMContentLoaded', (event) => {
+        load_twikoo();
+    });
+</script>

source/css/_plugins/comments/twikoo.styl

@@ -0,0 +1,115 @@
+.cmt-body.twikoo
+  --twikoo-lighttext: #ef794f;
+  --twikoo-secondtext: #909094;
+  --twikoo-emoji-background: #f8f8f8;
+  --twikoo-theme: #409eff;
+  margin-top: 1.5rem
+
+  .tk-content
+    .vemoji, .tk-owo-emotion
+      width: unset;
+      border-radius: 0;
+      max-height: 24px;
+      max-width: 100px;
+
+    img
+      max-width: 400px;
+      max-height: 400px;
+      border-radius: 8px;
+
+.OwO
+  .OwO-body
+    background: var(--twikoo-emoji-background) !important;
+    color: var(--text-p1) !important;
+
+    .OwO-items
+      .OwO-item
+        img
+          max-height: 26px;
+          width: unset;
+
+.twikoo
+  .el-input-group__append, .el-input-group__prepend,
+  .el-input__inner, .el-textarea__inner,
+  .el-button:not(.el-button--primary):not(.el-button--text),
+  .tk-comments-count,
+  .tk-content,
+  .tk-preview-container
+    color: var(--text-p1) !important;
+
+  .el-button:not(.el-button--primary):not(.el-button--text):active,
+  .el-button:not(.el-button--primary):not(.el-button--text):focus,
+  .el-button:not(.el-button--primary):not(.el-button--text):hover
+    color: var(--twikoo-theme) !important;
+
+  .tk-action-icon svg
+    color: var(--text-p1) !important;
+
+  b, strong
+    color: var(--twikoo-lighttext);
+
+  a
+    cursor: pointer
+
+  .tk-time, .tk-extras
+    color: var(--twikoo-secondtext);
+
+  .tk-expand
+    width: auto
+    border: none
+    padding: 6px 2rem
+    border-radius: 4px
+    background: var(--block)
+    color: var(--text-p1)
+    line-height: 2
+    font-size: 14px
+    font-weight: 500
+    trans()
+
+    &:hover
+      background: var(--block-hover)
+
+  .tk-comment
+    margin-top: 0 !important;
+    margin-bottom: 1rem
+    border: 1px dashed var(--block-border);
+    padding: 1rem;
+    border-radius: 4px;
+    background: var(--card);
+
+    &:hover
+      border-color: var(--twikoo-theme);
+
+  .tk-main .tk-comment
+    margin-top: 1rem !important;
+    margin-bottom: 0;
+
+  .tk-submit
+    padding: 1rem 1rem 0 1rem;
+    border-radius: 4px;
+    background: var(--card);
+
+  .tk-tag
+    vertical-align: 0.1em !important;
+
+  .tk-comments-title .tk-comments-count
+    margin-top: 15px;
+    color: var(--text-p1);
+
+    span:nth-child(1)
+      font-size: 1.5rem;
+      font-weight: 700;
+
+    span:nth-child(2)
+      font-size: 1rem;
+
+  .tk-comments-no
+    color: var(--text-p1);
+
+if hexo-config('style.darkmode') == 'auto'
+  @media (prefers-color-scheme: dark)
+    .cmt-body.twikoo
+      --twikoo-lighttext: #f2b94b;
+      --twikoo-secondtext: #a1a2b8;
+      --twikoo-emoji-background: darken($dark-block, 1);
+      --twikoo-theme: #409eff;