Add multi-comments

_config.yml

@@ -610,6 +610,21 @@ reading_progress:
 # See: https://theme-next.org/docs/third-party-services/comments-and-widgets
 # ---------------------------------------------------------------
 
+# Multiple Comment System Support
+comments:
+  # Available values: tabs | buttons
+  style: tabs
+  # Choose a comment system to be displayed by default
+  # Available values: changyan | disqus | disqusjs | facebook_comments_plugin | gitalk | livere | valine | vkontakte
+  active:
+  # Setting `true` means remembering the comment system selected by the visitor
+  storage: true
+  # Modify icons and texts for any style, here are some examples
+  nav:
+    #disqus: disqus
+    #facebook_comments_plugin: <i class="fa fa-facebook-official" aria-hidden="true"></i> facebook
+    #gitalk: Load Gitalk
+
 # Disqus
 disqus:
   enable: false
@@ -907,7 +922,6 @@ note:
 
 # Tabs tag
 tabs:
-  enable: true
   transition:
     tabs: false
     labels: true

languages/en.yml

@@ -32,7 +32,6 @@ post:
   sticky: Sticky
   toc_empty: This post does not have a Table of Contents
   views: Views
-  comments_count: Comments
   related_posts: Related Posts
   copy_button: Copy
   copy_success: Copied

layout/_partials/comments.swig

@@ -2,8 +2,80 @@
   {%- if theme.injects.comment.length == 1 %}
     {%- set inject_item = theme.injects.comment[0] %}
     {{ partial(inject_item.layout, inject_item.locals, inject_item.options) }}
+  {%- elif theme.injects.comment.length > 1 %}
+    {%- if theme.comments.style == 'buttons' %}
+      <div class="comment-button-group">
+        {%- for inject_item in theme.injects.comment %}
+          <a class="btn comment-button {{ inject_item.locals.class }}">{{ inject_item.locals.button }}</a>
+        {%- endfor %}
+      </div>
+      {%- for inject_item in theme.injects.comment %}
+        <div class="comment-position {{ inject_item.locals.class }}">
+          {{ partial(inject_item.layout, inject_item.locals, inject_item.options) }}
+        </div>
+      {%- endfor %}
+      <script{{ pjax }}>
+        (function() {
+          let commentButton = document.querySelectorAll('.comment-button');
+            commentButton.forEach(item => {
+            let commentClass = item.classList[2];
+            item.addEventListener('click', () => {
+              commentButton.forEach(rmActive => rmActive.classList.remove('active'));
+              item.classList.add('active');
+              document.querySelectorAll('.comment-position').forEach(rmActive => rmActive.classList.remove('active'));
+              document.querySelector(`.comment-position.${commentClass}`).classList.add('active');
+              {%- if theme.comments.storage %}
+                localStorage.setItem('comments_active', commentClass);
+              {%- endif %}
+            });
+          });
+          let activeClass = '{{ theme.comments.activeClass }}';
+          {%- if theme.comments.storage %}
+            activeClass = localStorage.getItem('comments_active') || activeClass;
+          {%- endif %}
+          if (activeClass) {
+            let activeButton = document.querySelector(`.comment-button.${activeClass}`);
+            if (activeButton) {
+              activeButton.click();
+            }
+          }
+        })();
+      </script>
+    {%- elif theme.comments.style == 'tabs' %}
+      <div class="tabs tabs-comment">
+        <ul class="nav-tabs">
+          {%- for inject_item in theme.injects.comment %}
+            <li class="tab"><a href="#comment-{{ inject_item.locals.class }}">{{ inject_item.locals.button }}</a></li>
+          {%- endfor %}
+        </ul>
+        <div class="tab-content">
+          {%- for inject_item in theme.injects.comment %}
+            <div class="tab-pane {{ inject_item.locals.class }}" id="comment-{{ inject_item.locals.class }}">
+              {{ partial(inject_item.layout, inject_item.locals, inject_item.options) }}
+            </div>
+          {%- endfor %}
+        </div>
+      </div>
+      <script>
+        window.addEventListener('tabs:register', function() {
+          let activeClass = '{{ theme.comments.activeClass }}';
+          {%- if theme.comments.storage %}
+            activeClass = localStorage.getItem('comments_active') || activeClass;
+          {%- endif %}
+          if (activeClass) {
+            let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+            if (activeTab) {
+              activeTab.click();
+            }
+          }
+        });
+        {%- if theme.comments.storage %}
+        window.addEventListener('tabs:click', function(e) {
+          let commentClass = e.target.classList[1];
+          localStorage.setItem('comments_active', commentClass);
+        });
+        {%- endif %}
+      </script>
+    {%- endif %}
   {%- endif %}
-{# {%- for inject_item in theme.injects.comment %}
-  {{ partial(inject_item.layout, inject_item.locals, inject_item.options) }}
-{%- endfor %} #}
 {%- endif %}

layout/_partials/head/head.swig

@@ -116,7 +116,6 @@
     },
     localsearch: {{ theme.local_search | json_encode }},
     path: '{{ config.search.path }}',
-    tabs: {{ theme.tabs.enable }},
     motion: {{ theme.motion | json_encode }},
     translation: {
       copy_button: '{{__("post.copy_button")}}',

scripts/filters/comment/changyan.js

@@ -29,13 +29,13 @@ hexo.extend.filter.register('theme_inject', injects => {
   injects.postMeta.raw('changyan', `
   {% if post.comments %}
   <span class="post-meta-item">
-    ${iconText}
+    ${iconText('comment-o', 'changyan')}
     {% if is_post() %}
-      <a href="{{ url_for(post.path) }}#SOHUCS" itemprop="discussionUrl">
+      <a title="changyan" href="{{ url_for(post.path) }}#SOHUCS" itemprop="discussionUrl">
         <span id="changyan_count_unit" class="post-comments-count hc-comment-count" data-xid="{{ post.path }}" itemprop="commentCount"></span>
       </a>
     {% else %}
-      <a href="{{ url_for(post.path) }}#SOHUCS" itemprop="discussionUrl">
+      <a title="changyan" href="{{ url_for(post.path) }}#SOHUCS" itemprop="discussionUrl">
         <span id="url::{{ post.permalink }}" class="cy_cmt_count" data-xid="{{ post.path }}" itemprop="commentCount"></span>
       </a>
     {% endif %}

scripts/filters/comment/common.js

@@ -1,10 +1,23 @@
 'use strict';
 
+function capitalize(input) {
+  return input.toString().charAt(0).toUpperCase() + input.toString().substr(1);
+}
+
 module.exports = {
-  iconText: `
-    <span class="post-meta-item-icon">
-      <i class="fa fa-comment-o"></i>
-    </span>
-    <span class="post-meta-item-text">{{ __('post.comments_count') + __('symbol.colon') }}</span>
-  `
+  iconText(icon, key, defaultValue) {
+    if (!defaultValue) {
+      defaultValue = capitalize(key);
+    }
+    return `
+      <span class="post-meta-item-icon">
+        <i class="fa fa-${icon}"></i>
+      </span>
+      {%- set post_meta_comment = __('post.comments.${key}') %}
+      {%- if post_meta_comment == 'post.comments.${key}' %}
+        {%- set post_meta_comment = '${defaultValue}' %}
+      {%- endif %}
+      <span class="post-meta-item-text">{{ post_meta_comment + __('symbol.colon') }}</span>
+    `;
+  }
 };

scripts/filters/comment/default-config.js

@@ -0,0 +1,31 @@
+/* global hexo */
+
+'use strict';
+
+const path = require('path');
+
+hexo.extend.filter.register('theme_inject', injects => {
+  injects.comment.raws.forEach(element => {
+    // Set default button content
+    let injectName = path.basename(element.name, path.extname(element.name));
+    element.args[0] = Object.assign({
+      configKey: injectName,
+      class: injectName,
+      button: injectName
+    }, element.args[0]);
+    // Get locals and config
+    let locals = element.args[0];
+    let config = hexo.theme.config.comments;
+    // Set activeClass
+    if (config.active === locals.configKey) {
+      config.activeClass = locals.class;
+    }
+    // Set custom button content
+    if (config.nav) {
+      let customButton = config.nav[locals.configKey];
+      if (customButton) {
+        locals.button = customButton;
+      }
+    }
+  });
+}, 99999);

scripts/filters/comment/disqus.js

@@ -33,8 +33,8 @@ hexo.extend.filter.register('theme_inject', injects => {
   injects.postMeta.raw('disqus', `
   {% if post.comments %}
   <span class="post-meta-item">
-    ${iconText}
-    <a href="{{ url_for(post.path) }}#comments" itemprop="discussionUrl">
+    ${iconText('comment-o', 'disqus')}
+    <a title="disqus" href="{{ url_for(post.path) }}#comments" itemprop="discussionUrl">
       <span class="post-comments-count disqus-comment-count" data-disqus-identifier="{{ post.path }}" itemprop="commentCount"></span>
     </a>
   </span>

scripts/filters/comment/facebook-comments-plugin.js

@@ -19,7 +19,10 @@ hexo.extend.filter.register('theme_inject', injects => {
        data-colorscheme="{{ theme.facebook_comments_plugin.scheme }}">
     </div>
   </div>
-  `);
+  `, {
+    configKey: 'facebook_comments_plugin',
+    button: '<i class="fa fa-facebook-official" aria-hidden="true"></i> facebook'
+  });
 
 }, priority.facebook_comments_plugin);
 
@@ -31,8 +34,8 @@ hexo.extend.filter.register('theme_inject', injects => {
   injects.postMeta.raw('facebook-comments-plugin', `
   {% if post.comments %}
   <span class="post-meta-item">
-    ${iconText}
-    <a href="{{ url_for(post.path) }}#comments" itemprop="discussionUrl">
+    ${iconText('comment-o', 'facebook')}
+    <a title="facebook comments" href="{{ url_for(post.path) }}#comments" itemprop="discussionUrl">
       <span class="post-comments-count fb-comments-count" data-href="{{ post.permalink }}" itemprop="commentCount">0</span>
     </a>
   </span>

scripts/filters/comment/valine.js

@@ -25,8 +25,8 @@ hexo.extend.filter.register('theme_inject', injects => {
   injects.postMeta.raw('valine', `
   {% if post.comments and (is_post() or theme.valine.comment_count) %}
   <span class="post-meta-item">
-    ${iconText}
-    <a href="{{ url_for(post.path) }}#comments" itemprop="discussionUrl">
+    ${iconText('comment-o', 'valine')}
+    <a title="valine" href="{{ url_for(post.path) }}#comments" itemprop="discussionUrl">
       <span class="post-comments-count valine-comment-count" data-xid="{{ url_for(post.path) }}" itemprop="commentCount"></span>
     </a>
   </span>

scripts/filters/comment/vkontakte.js

@@ -9,6 +9,9 @@ hexo.extend.filter.register('theme_inject', injects => {
   let theme = hexo.theme.config;
   if (!theme.vkontakte_api.enable || !theme.vkontakte_api.comments) return;
 
-  injects.comment.raw('vkontakte-comments', '<div class="comments" id="comments"><div id="vk_comments"></div></div>', {}, {cache: true});
+  injects.comment.raw('vkontakte-comments', '<div class="comments" id="comments"><div id="vk_comments"></div></div>', {
+    configKey: 'vkontakte',
+    button: '<i class="fa fa-vk" aria-hidden="true"></i> vkontakte'
+  }, {cache: true});
 
 }, priority.vkontakte_comments_plugin);

source/css/_common/components/comments.styl

@@ -2,3 +2,41 @@
   margin: 60px 20px 0;
   overflow: hidden;
 }
+
+.comment-button-group {
+  display: flex;
+  flex-wrap: wrap-reverse;
+  justify-content: center;
+  margin: 1em 0;
+
+  .comment-button {
+    margin: 0.1em 0.2em;
+
+    &.active {
+      background: $btn-default-hover-bg;
+      border-color: $btn-default-hover-border-color;
+      color: $btn-default-hover-color;
+    }
+  }
+}
+
+.comment-position {
+  display: none;
+
+  &.active {
+    display: block;
+  }
+}
+
+.tabs-comment {
+  background: white;
+  margin-top: 4em;
+  padding-top: 0;
+
+  .comments {
+    border: 0;
+    box-shadow: none;
+    margin-top: 0;
+    padding-top: 0;
+  }
+}

source/css/_common/components/tags/tabs.styl

@@ -1,6 +1,9 @@
 .post-body .tabs {
-  display: block;
   margin-bottom: 20px;
+}
+
+.post-body .tabs, .tabs-comment {
+  display: block;
   padding-top: 10px;
   position: relative;
   // Read tabs border_radius from NexT config and set in "$tbr px" to use it as string variable in this CSS section.

source/css/_common/components/tags/tags.styl

@@ -1,9 +1,8 @@
 @import 'blockquote-center';
 @import 'group-pictures';
 @import 'label';
+@import 'tabs';
 
 @import 'note' if (hexo-config('note.style') != 'disabled');
 
-@import 'tabs' if (hexo-config('tabs.enable'));
-
 @import 'pdf' if (hexo-config('pdf.enable'));

source/css/_schemes/Gemini/index.styl

@@ -62,6 +62,10 @@ $use-seo = hexo-config('seo');
   padding: $content-desktop-padding;
 }
 
+.tabs-comment {
+  margin-top: 1em;
+}
+
 // Top main padding from header to posts (default 40px).
 .posts-expand {
   padding-top: initial;
@@ -239,7 +243,7 @@ $use-seo = hexo-config('seo');
 
   .comments {
     margin-top: $content-mobile-padding;
-    padding: 10 $sidebar-offset;
+    padding: 10px $sidebar-offset;
   }
 
   .pagination {

source/js/next-boot.js

@@ -53,7 +53,7 @@ $(document).on('DOMContentLoaded pjax:success', function() {
   CONFIG.pangu && window.pangu.spacingPage();
 
   CONFIG.copycode.enable && NexT.utils.registerCopyCode();
-  CONFIG.tabs && NexT.utils.registerTabsTag();
+  NexT.utils.registerTabsTag();
   NexT.utils.registerActiveMenuItem();
   NexT.utils.embeddedVideoTransformer();
 

source/js/utils.js

@@ -129,8 +129,14 @@ NexT.utils = {
         $(this).addClass('active').siblings().removeClass('active');
         var tActive = $(this).find('a').attr('href');
         $(tActive).addClass('active').siblings().removeClass('active');
+        // Trigger event
+        document.querySelector(tActive).dispatchEvent(new Event('tabs:click', {
+          bubbles: true
+        }));
       }
     });
+
+    window.dispatchEvent(new Event('tabs:register'));
   },
 
   registerCanIUseTag: function() {