Merge pull request blinkfox#610 from imaegoo/twikoo-comment

适配 Twikoo 评论系统

_config.yml

@@ -340,7 +340,6 @@ minivaline:
  backend: waline
  serverURL: https://waline.vercel.app
 
-
 changyan:
  enable: false
  appId:
@@ -352,6 +351,16 @@ githubLink:
  url: https://github.com/blinkfox/hexo-theme-matery
  title: Fork Me
 
+# The configuration of the Twikoo comment module is not activated by default.
+# To use it, activate the configuration item and set envId.
+# Twikoo 评论模块的配置，默认为不激活，如要使用，就请激活该配置项，并设置环境 ID envId.
+# See: https://twikoo.js.org
+twikoo:
+ enable: false
+ envId: twikoo-1gs9l0fb17e7897a # 环境 ID，搭建教程：https://twikoo.js.org/quick-start.html
+ # region: ap-guangzhou # 环境地域，默认为 ap-shanghai
+ # path: 'window.location.pathname' # 自定义文章路径
+
 # The password verification feature of read post. To use this feature,
 # activate the configuration item and write the 'password' key and Cipher in the post's Front-matter.
 # Note: In order to ensure that the original password will not be leaked to the web page,
@@ -421,6 +430,7 @@ libs:
  gitalk: /libs/gitalk/gitalk.min.js
  valine: /libs/valine/Valine.min.js # 若想保持最新版，请替换为 https://unpkg.com/valine/dist/Valine.min.js 默认为 /libs/valine/Valine.min.js
  minivaline: /libs/minivaline/MiniValine.js # latest
+ twikoo: /libs/twikoo/twikoo.all.min.js # 若想保持最新版，请替换为 https://cdn.jsdelivr.net/npm/twikoo/dist/twikoo.all.min.js 默认为 /libs/twikoo/twikoo.all.min.js
  jqcloud: /libs/jqcloud/jqcloud-1.0.4.min.js
  tocbot: /libs/tocbot/tocbot.min.js
  canvas_nest: /libs/background/canvas-nest.js

layout/_partial/post-detail.ejs

@@ -190,6 +190,10 @@
  <%- partial('_partial/changyan') %>
  <% } %>
 
+ <% if (theme.twikoo && theme.twikoo.enable) { %>
+ <%- partial('_partial/twikoo') %>
+ <% } %>
+
  <%- partial('_partial/prev-next') %>
 </div>
 

layout/_partial/twikoo.ejs

@@ -0,0 +1,272 @@
+<style>
+ .twikoo-card {
+ margin: 1.5rem auto;
+ }
+
+ .twikoo-card .card-content {
+ padding: 20px;
+ }
+
+ #tcomments textarea {
+ box-sizing: border-box;
+ background: url("<%- url_for(theme.twikoo.background) %>") 100% 100% no-repeat;
+ }
+
+ #tcomments p {
+ margin: 2px 2px 10px;
+ font-size: 1.05rem;
+ line-height: 1.78rem;
+ }
+
+ #tcomments blockquote p {
+ text-indent: 0.2rem;
+ }
+
+ #tcomments a {
+ padding: 0 2px;
+ color: #4cbf30;
+ font-weight: 500;
+ text-decoration: none;
+ }
+
+ #tcomments img {
+ max-width: 100%;
+ height: auto;
+ cursor: pointer;
+ }
+
+ #tcomments ol li {
+ list-style-type: decimal;
+ }
+
+ #tcomments ol,
+ ul {
+ display: block;
+ padding-left: 2em;
+ word-spacing: 0.05rem;
+ }
+
+ #tcomments ul li,
+ ol li {
+ display: list-item;
+ line-height: 1.8rem;
+ font-size: 1rem;
+ }
+
+ #tcomments ul li {
+ list-style-type: disc;
+ }
+
+ #tcomments ul ul li {
+ list-style-type: circle;
+ }
+
+ #tcomments table,
+ th,
+ td {
+ padding: 12px 13px;
+ border: 1px solid #dfe2e5;
+ }
+
+ #tcomments table,
+ th,
+ td {
+ border: 0;
+ }
+
+ table tr:nth-child(2n),
+ thead {
+ background-color: #fafafa;
+ }
+
+ #tcomments table th {
+ background-color: #f2f2f2;
+ min-width: 80px;
+ }
+
+ #tcomments table td {
+ min-width: 80px;
+ }
+
+ #tcomments h1 {
+ font-size: 1.85rem;
+ font-weight: bold;
+ line-height: 2.2rem;
+ }
+
+ #tcomments h2 {
+ font-size: 1.65rem;
+ font-weight: bold;
+ line-height: 1.9rem;
+ }
+
+ #tcomments h3 {
+ font-size: 1.45rem;
+ font-weight: bold;
+ line-height: 1.7rem;
+ }
+
+ #tcomments h4 {
+ font-size: 1.25rem;
+ font-weight: bold;
+ line-height: 1.5rem;
+ }
+
+ #tcomments h5 {
+ font-size: 1.1rem;
+ font-weight: bold;
+ line-height: 1.4rem;
+ }
+
+ #tcomments h6 {
+ font-size: 1rem;
+ line-height: 1.3rem;
+ }
+
+ #tcomments p {
+ font-size: 1rem;
+ line-height: 1.5rem;
+ }
+
+ #tcomments hr {
+ margin: 12px 0;
+ border: 0;
+ border-top: 1px solid #ccc;
+ }
+
+ #tcomments blockquote {
+ margin: 15px 0;
+ border-left: 5px solid #42b983;
+ padding: 1rem 0.8rem 0.3rem 0.8rem;
+ color: #666;
+ background-color: rgba(66, 185, 131, .1);
+ }
+
+ #tcomments pre {
+ font-family: monospace, monospace;
+ padding: 1.2em;
+ margin: .5em 0;
+ background: #272822;
+ overflow: auto;
+ border-radius: 0.3em;
+ tab-size: 4;
+ }
+
+ #tcomments code {
+ font-family: monospace, monospace;
+ padding: 1px 3px;
+ font-size: 0.92rem;
+ color: #e96900;
+ background-color: #f8f8f8;
+ border-radius: 2px;
+ }
+
+ #tcomments pre code {
+ font-family: monospace, monospace;
+ padding: 0;
+ color: #e8eaf6;
+ background-color: #272822;
+ }
+
+ #tcomments pre[class*="language-"] {
+ padding: 1.2em;
+ margin: .5em 0;
+ }
+
+ #tcomments code[class*="language-"],
+ pre[class*="language-"] {
+ color: #e8eaf6;
+ }
+
+ #tcomments [type="checkbox"]:not(:checked),
+ [type="checkbox"]:checked {
+ position: inherit;
+ margin-left: -1.3rem;
+ margin-right: 0.4rem;
+ margin-top: -1px;
+ vertical-align: middle;
+ left: unset;
+ visibility: visible;
+ }
+
+ #tcomments b,
+ strong {
+ font-weight: bold;
+ }
+
+ #tcomments dfn {
+ font-style: italic;
+ }
+
+ #tcomments small {
+ font-size: 85%;
+ }
+
+ #tcomments cite {
+ font-style: normal;
+ }
+
+ #tcomments mark {
+ background-color: #fcf8e3;
+ padding: .2em;
+ }
+
+ #tcomments table,
+ th,
+ td {
+ padding: 12px 13px;
+ border: 1px solid #dfe2e5;
+ }
+
+ table tr:nth-child(2n),
+ thead {
+ background-color: #fafafa;
+ }
+
+ #tcomments table th {
+ background-color: #f2f2f2;
+ min-width: 80px;
+ }
+
+ #tcomments table td {
+ min-width: 80px;
+ }
+
+ #tcomments [type="checkbox"]:not(:checked),
+ [type="checkbox"]:checked {
+ position: inherit;
+ margin-left: -1.3rem;
+ margin-right: 0.4rem;
+ margin-top: -1px;
+ vertical-align: middle;
+ left: unset;
+ visibility: visible;
+ }
+</style>
+
+<div class="card twikoo-card" data-aos="fade-up">
+ <div class="comment_headling" style="font-size: 20px; font-weight: 700; position: relative; padding-left: 20px; top: 15px; padding-bottom: 5px;">
+ <i class="fas fa-comments fa-fw" aria-hidden="true"></i>
+ <span>评论</span>
+ </div>
+ <div class="card-content" style="display: grid">
+ <div id="tcomments"></div>
+ </div>
+</div>
+
+<script src="<%- theme.jsDelivr.url %><%- url_for(theme.libs.js.twikoo) %>"></script>
+<script>
+ twikoo.init({
+ envId: '<%- theme.twikoo.envId %>',
+ el: '#tcomments',
+ region: '<%- theme.twikoo.region %>',
+ path: '<%- theme.twikoo.path %>'
+ }).then(function () {
+ var tkInputs = document.querySelector('#twikoo').getElementsByTagName('input');
+ for (var tkInputsIndex = 0; tkInputsIndex < tkInputs.length; tkInputsIndex++) {
+ if (tkInputs[tkInputsIndex]) {
+ tkInputs[tkInputsIndex].classList.add('browser-default');
+ }
+ }
+ });
+</script>

layout/contact.ejs

@@ -30,11 +30,15 @@
  <% if (theme.valine && theme.valine.enable) { %>
  <%- partial('_partial/valine') %>
  <% } %>
- 
- <% if (theme.minivaline && theme.minivaline.enable) { %>
+
+ <% if (theme.minivaline && theme.minivaline.enable) { %>
  <%- partial('_partial/minivaline') %>
  <% } %>
 
+ <% if (theme.twikoo && theme.twikoo.enable) { %>
+ <%- partial('_partial/twikoo') %>
+ <% } %>
+
  <% if (theme.changyan && theme.changyan.enable) { %>
  <%- partial('_partial/changyan') %>
  <% } %>

layout/friends.ejs

@@ -257,6 +257,10 @@
  <%- partial('_partial/valine') %>
  <% } %>
 
+ <% if (theme.twikoo && theme.twikoo.enable) { %>
+ <%- partial('_partial/twikoo') %>
+ <% } %>
+
  </div>
  </div>
 </main>

source/libs/twikoo/twikoo.all.min.js.LICENSE.txt

@@ -0,0 +1,21 @@
+/*!
+ * Twikoo v0.6.0
+ * (c) 2020-2021 iMaeGoo
+ * Released under the MIT License.
+ * Last Update: 1/7/2021, 7:44:19 AM
+ */
+
+/*!
+ * Vue.js v2.6.12
+ * (c) 2014-2020 Evan You
+ * Released under the MIT License.
+ */
+
+/**
+ * Prism: Lightweight, robust, elegant syntax highlighting
+ *
+ * @license MIT <https://opensource.org/licenses/MIT>
+ * @author Lea Verou <https://lea.verou.me>
+ * @namespace
+ * @public
+ */