feat: 添加显示评论数功能

_config.yml

@@ -604,6 +604,18 @@ post:
       # Options: busuanzi | leancloud | umami
       source: "busuanzi"
 
+    # 评论数
+    # Number of comments
+    comments:
+      enable: false
+      # 数据来源，目前仅支持 Twikoo 评论系统
+      # Data Source, currently only support Twikoo comment system
+      # Options: twikoo
+      source: "twikoo"
+      # 是否包含回复数
+      # If true, include the number of replies
+      reply: false
+
   # 在文章开头显示文章更新时间，该时间默认是 md 文件更新时间，可通过 front-matter 中 `updated` 手动指定（和 date 一样格式）
   # Update date is displayed at the beginning of the post. The default date is the update date of the md file, which can be manually specified by `updated` in front-matter (same format as date)
   updated:

languages/en.yml

@@ -47,6 +47,7 @@ post:
     wordcount: '%s words'
     min2read: '%s mins'
     views: '{} views'
+    comments: '{} comments'
   copyright:
     author: 'Author'
     posted: 'Posted on'

languages/zh-CN.yml

@@ -47,6 +47,7 @@ post:
     wordcount: '%s 字'
     min2read: '%s 分钟'
     views: '{} 次'
+    comments: '{} 条'
   copyright:
     author: '作者'
     posted: '发布于'

languages/zh-HK.yml

@@ -47,6 +47,7 @@ post:
     wordcount: '%s 字'
     min2read: '%s 分鐘'
     views: '{} 次'
+    comments: '{} 條'
   copyright:
     author: '作者'
     posted: '發布於'

languages/zh-TW.yml

@@ -47,6 +47,7 @@ post:
     wordcount: '%s 字'
     min2read: '%s 分鐘'
     views: '{} 次'
+    comments: '{} 條'
   copyright:
     author: '作者'
     posted: '發布於'

layout/_partials/post/meta-top.ejs

@@ -46,26 +46,37 @@
     <% var views_texts = (theme.post.meta.views.format || __('post.meta.views')).split('{}') %>
     <% if (theme.post.meta.views.enable && views_texts.length >= 2) { %>
       <% if (theme.post.meta.views.source === 'leancloud') { %>
-        <span id="leancloud-page-views-container" class="post-meta" style="display: none">
+        <span id="leancloud-page-views-container" class="post-meta mr-2" style="display: none">
           <i class="iconfont icon-eye" aria-hidden="true"></i>
           <%- views_texts[0] %><span id="leancloud-page-views"></span><%- views_texts[1] %>
         </span>
         <% import_js(theme.static_prefix.internal_js, 'leancloud.js', 'defer') %>
-      
+
       <% } else if (theme.post.meta.views.source === 'busuanzi')  { %>
-        <span id="busuanzi_container_page_pv" style="display: none">
+        <span id="busuanzi_container_page_pv" class="post-meta mr-2" style="display: none">
           <i class="iconfont icon-eye" aria-hidden="true"></i>
           <%- views_texts[0] %><span id="busuanzi_value_page_pv"></span><%- views_texts[1] %>
         </span>
         <% import_js(theme.static_prefix.busuanzi, 'busuanzi.pure.mini.js', 'defer') %>
 
       <% } else if (theme.post.meta.views.source === 'umami')  { %>
-        <span id="umami-page-views-container" class="post-meta" style="display: none">
+        <span id="umami-page-views-container" class="post-meta mr-2" style="display: none">
           <i class="iconfont icon-eye" aria-hidden="true"></i>
           <%- views_texts[0] %><span id="umami-page-views"></span><%- views_texts[1] %>
         </span>
         <% import_js(theme.static_prefix.internal_js, 'umami-view.js', 'defer') %>
       <% } %>
     <% } %>
+
+    <% var comments_texts = (theme.post.meta.comments.format || __('post.meta.comments')).split('{}') %>
+    <% if (theme.post.meta.comments.enable && comments_texts.length >= 2) { %>
+      <% if (theme.post.meta.comments.source === 'twikoo') { %>
+        <span id="twikoo-comment-number-container" class="post-meta" style="display: none">
+          <i class="iconfont icon-comment" aria-hidden="true"></i>
+          <%- comments_texts[0] %><span id="twikoo-comment-number"></span><%- comments_texts[1] %>
+        </span>
+        <% import_js(theme.static_prefix.internal_js, 'twikoo.js', 'defer') %>
+      <% } %>
+    <% } %>
   </div>
 <% } %>

scripts/helpers/export-config.js

@@ -26,6 +26,9 @@ hexo.extend.helper.register('export_config', function () {
     web_analytics: theme.web_analytics,
     search_path: urlJoin(config.root, theme.search.path),
     include_content_in_search: theme.search.content,
+    twikoo: theme.twikoo,
+    include_reply: theme.post.meta.comments.reply,
+    static_prefix: theme.static_prefix,
   };
   return `<script id="fluid-configs">
     var Fluid = window.Fluid || {};

source/js/twikoo.js

@@ -0,0 +1,32 @@
+function loadTwikooScript(callback) {
+    const script = document.createElement('script');
+    script.src = CONFIG.static_prefix.twikoo + 'twikoo.all.min.js';
+    script.onload = callback;
+    document.head.appendChild(script);
+}
+
+function getCommentsCount() {
+    try {
+        const currentPath = window.location.pathname;
+
+        // https://twikoo.js.org/api.html#get-comments-count
+        twikoo.getCommentsCount({
+            envId: CONFIG.twikoo.envId,
+            urls: [currentPath],
+            includeReply: CONFIG.include_reply,
+        }).then(res => {
+            const commentCount = res[0].count;
+            const commentContainer = document.getElementById('twikoo-comment-number-container');
+            if (commentContainer) {
+                commentContainer.style.display = 'inline';
+                commentContainer.querySelector('#twikoo-comment-number').textContent = commentCount;
+            }
+        }).catch(err => {
+            console.error(err);
+        });
+    } catch (err) {
+        console.error(err);
+    }
+}
+
+loadTwikooScript(getCommentsCount);