Refactor comments using theme_inject (#998)

* Refactor comments

* Use partial insteal of macro

* Fix QA

* Fix QA

* Refactor priority

* Format inject point

layout/_macro/post.swig

@@ -1,5 +1,3 @@
-{% macro render(post, is_index, post_extra_class) %}
-
   {% set headlessPost = Array.prototype.indexOf.call(['quote', 'picture'], post.type) > -1 %}
 
   {% set post_class = 'post post-type-' + post.type | default('normal') %}
@@ -133,50 +131,6 @@
             </span>
           {% endif %}
 
-          {% if post.comments %}
-            {% macro comments() %}
-              <span class="post-meta-item">
-                <span class="post-meta-item-icon">
-                  <i class="fa fa-comment-o"></i>
-                </span>
-            {% endmacro %}
-            {% if theme.facebook_comments_plugin.enable %}
-              {{ comments() }}
-                <span class="post-meta-item-text">{{ __('post.comments_count') + __('symbol.colon') }}</span>
-                <a 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>
-            {% elif theme.disqus.enable and theme.disqus.count %}
-              {{ comments() }}
-                <span class="post-meta-item-text">{{ __('post.comments_count') + __('symbol.colon') }}</span>
-                <a 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>
-            {% elif theme.changyan.enable and theme.changyan.appid and theme.changyan.appkey %}
-              {{ comments() }}
-              {% if is_post() %}
-                <span class="post-meta-item-text">{{ __('post.comments_count') + __('symbol.colon') }}</span>
-                <a 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 %}
-                <span class="post-meta-item-text">{{ __('post.comments_count') + __('symbol.colon') }}</span>
-                <a 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 %}
-            {% elif (is_post() or theme.valine.comment_count) and theme.valine.enable and theme.valine.appid and theme.valine.appkey %}
-              {{ comments() }}
-                <span class="post-meta-item-text">{{ __('post.comments_count') + __('symbol.colon') }}</span>
-                <a 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>
-            {% endif %}
-          {% endif %}
-
           {# LeanCloud PageView #}
           {% if theme.leancloud_visitors.enable or (theme.valine.enable and theme.valine.appid and theme.valine.appkey and theme.valine.visitor) %}
             <span id="{{ url_for(post.path) }}" class="post-meta-item leancloud_visitors" data-flag-title="{{ post.title }}">
@@ -202,9 +156,7 @@
           {% endif %}
 
           {% for inject_item in theme.injects.postMeta %}
-            <span class="post-meta-item">
-              {{ partial(inject_item.layout, inject_item.locals, inject_item.options) }}
-            </span>
+            {{ partial(inject_item.layout, inject_item.locals, inject_item.options) }}
           {% endfor %}
 
           {% if theme.symbols_count_time.separated_meta %}<br/>{% endif %}
@@ -446,5 +398,3 @@
   {### END POST BLOCK ###}
   {######################}
   </article>
-
-{% endmacro %}

layout/_partials/comments.swig

@@ -1,47 +1,9 @@
 {% if page.comments %}
-
-  {% if theme.facebook_sdk.enable and theme.facebook_comments_plugin.enable %}
-    <div class="comments" id="comments">
-      <div class="fb-comments"
-           data-href="{{ page.permalink }}"
-           data-numposts="{{ theme.facebook_comments_plugin.num_of_posts }}"
-           data-width="{{ theme.facebook_comments_plugin.width }}"
-           data-colorscheme="{{ theme.facebook_comments_plugin.scheme }}">
-      </div>
-    </div>
-
-  {% elif theme.vkontakte_api.enable and theme.vkontakte_api.comments %}
-    <div class="comments" id="comments">
-      <div id="vk_comments"></div>
-    </div>
-
-  {% elif theme.disqus.enable or (theme.disqusjs.enable and theme.disqusjs.apikey and theme.disqusjs.shortname) %}
-    <div class="comments" id="comments">
-      <div id="disqus_thread">
-        <noscript>{#
-        #}Please enable JavaScript to view the comments powered by Disqus.{#
-      #}</noscript>
-      </div>
-    </div>
-
-  {% elif theme.livere_uid %}
-    <div class="comments" id="comments">
-      <div id="lv-container" data-id="city" data-uid="{{ theme.livere_uid }}"></div>
-    </div>
-
-  {% elif theme.changyan.enable and theme.changyan.appid and theme.changyan.appkey %}
-    <div class="comments" id="comments">
-      <div id="SOHUCS"></div>
-    </div>
-
-  {% elif theme.valine.enable and theme.valine.appid and theme.valine.appkey %}
-    <div class="comments" id="comments">
-    </div>
-
-  {% elif theme.gitalk.enable %}
-    <div class="comments" id="gitalk-container">
-    </div>
-
+  {% if theme.injects.comment.length == 1 %}
+    {% set inject_item = theme.injects.comment[0] %}
+    {{ partial(inject_item.layout, inject_item.locals, inject_item.options) }}
   {% endif %}
-
+{# {% for inject_item in theme.injects.comment %}
+  {{ partial(inject_item.layout, inject_item.locals, inject_item.options) }}
+{% endfor %} #}
 {% endif %}

layout/_third-party/comments/disqusjs.swig

@@ -1,3 +1,4 @@
+{% if page.comments %}
 {% set disqusjs_css_url = '//cdn.jsdelivr.net/npm/disqusjs@1/dist/disqusjs.css' %}
 {% if theme.vendors.disqusjs_css %}
   {% set disqusjs_css_url = theme.vendors.disqusjs_css %}
@@ -30,3 +31,4 @@
 
   window.addEventListener('load', loadDsqJS, false);
 </script>
+{% endif %}

layout/_third-party/comments/gitalk.swig

@@ -1,3 +1,4 @@
+{% if page.comments %}
 {% set gitalk_js_url = '//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.js' %}
 {% if theme.vendors.gitalk_js %}
   {% set gitalk_js_url = theme.vendors.gitalk_js %}
@@ -33,3 +34,4 @@
   });
   gitalk.render('gitalk-container');
 </script>
+{% endif %}

layout/_third-party/comments/livere.swig

@@ -1,3 +1,4 @@
+{% if page.comments %}
 {% set liveRefer = page.path %}
 {% if not is_post() %}
   {% set liveRefer = page.path.replace('index.html', '') %}
@@ -16,3 +17,4 @@
     e.parentNode.insertBefore(j, e);
   })(document, 'script');
 </script>
+{% endif %}

layout/_third-party/index.swig

@@ -2,7 +2,6 @@
 {% include 'quicklink.swig' %}
 {% include 'bookmark.swig' %}
 {% include 'schedule.swig' %}
-{% include 'comments/index.swig' %}
 {% include 'analytics/analytics-with-jquery.swig' %}
 {% include 'search/index.swig' %}
 {% include 'chat/index.swig' %}

layout/index.swig

@@ -1,5 +1,4 @@
 {% extends '_layout.swig' %}
-{% import '_macro/post.swig' as post_template %}
 {% import '_macro/sidebar.swig' as sidebar_template %}
 
 {% block title %}{{ title }}{% if theme.index_with_subtitle and subtitle %} - {{ subtitle }}{% endif %}{% endblock %}
@@ -11,7 +10,7 @@
 {% block content %}
   <section id="posts" class="posts-expand">
     {% for post in page.posts %}
-      {{ post_template.render(post, true) }}
+      {{ partial('_macro/post.swig', {is_index: true}) }}
     {% endfor %}
   </section>
 

layout/post.swig

@@ -1,5 +1,4 @@
 {% extends '_layout.swig' %}
-{% import '_macro/post.swig' as post_template %}
 {% import '_macro/sidebar.swig' as sidebar_template %}
 
 {% block title %}{{ page.title }} | {{ title }}{% endblock %}
@@ -9,7 +8,7 @@
 {% block content %}
 
   <div id="posts" class="posts-expand">
-    {{ post_template.render(page) }}
+    {{ partial('_macro/post.swig', {post: page}) }}
   </div>
 
 {% endblock %}

scripts/filters/comment/changyan.js

@@ -0,0 +1,46 @@
+/* global hexo */
+
+'use strict';
+
+const path = require('path');
+const {iconText} = require('./common');
+const priority = hexo.config.inject_priority || {};
+
+// Add comment
+hexo.extend.filter.register('theme_inject', function(injects) {
+  let theme = hexo.theme.config;
+  if (!theme.changyan.enable || !theme.changyan.appid || !theme.changyan.appkey) return;
+
+  injects.comment.raw('changyan', `
+  <div class="comments" id="comments">
+    <div id="SOHUCS"></div>
+  </div>
+  `, {}, {cache: true});
+
+  injects.bodyEnd.file('changyan', path.join(hexo.theme_dir, 'layout/_third-party/comments/changyan.swig'));
+
+}, priority.changyan);
+
+// Add post_meta
+hexo.extend.filter.register('theme_inject', function(injects) {
+  let theme = hexo.theme.config;
+  if (!theme.changyan.enable || !theme.changyan.appid || !theme.changyan.appkey) return;
+
+  injects.postMeta.raw('changyan', `
+  {% if post.comments %}
+  <span class="post-meta-item">
+    ${iconText}
+    {% if is_post() %}
+      <a 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">
+        <span id="url::{{ post.permalink }}" class="cy_cmt_count" data-xid="{{ post.path }}" itemprop="commentCount"></span>
+      </a>
+    {% endif %}
+  </span>
+  {% endif %}
+  `);
+
+}, priority.changyan_post_meta);

scripts/filters/comment/common.js

@@ -0,0 +1,12 @@
+'use strict';
+
+module.exports = {
+  iconText: `
+    <span class="post-meta-item-icon">
+      <i class="fa fa-comment-o"></i>
+    </span>
+    {% if theme.post_meta.item_text %}
+      <span class="post-meta-item-text">{{ __('post.comments_count') + __('symbol.colon') }}</span>
+    {% endif %}
+  `
+};

scripts/filters/comment/disqus.js

@@ -0,0 +1,44 @@
+/* global hexo */
+
+'use strict';
+
+const path = require('path');
+const {iconText} = require('./common');
+const priority = hexo.config.inject_priority || {};
+
+// Add comment
+hexo.extend.filter.register('theme_inject', function(injects) {
+  let theme = hexo.theme.config;
+  if (!theme.disqus.enable || !theme.disqus.shortname) return;
+
+  injects.comment.raw('disqus', `
+  <div class="comments" id="comments">
+    <div id="disqus_thread">
+      <noscript>{#
+      #}Please enable JavaScript to view the comments powered by Disqus.{#
+    #}</noscript>
+    </div>
+  </div>
+  `, {}, {cache: true});
+
+  injects.bodyEnd.file('disqus', path.join(hexo.theme_dir, 'layout/_third-party/comments/disqus.swig'));
+
+}, priority.disqus);
+
+// Add post_meta
+hexo.extend.filter.register('theme_inject', function(injects) {
+  let theme = hexo.theme.config;
+  if (!theme.disqus.enable || !theme.disqus.shortname || !theme.disqus.count) return;
+
+  injects.postMeta.raw('disqus', `
+  {% if post.comments %}
+  <span class="post-meta-item">
+    ${iconText}
+    <a 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>
+  {% endif %}
+  `);
+
+}, priority.disqus_post_meta);

scripts/filters/comment/disqusjs.js

@@ -0,0 +1,25 @@
+/* global hexo */
+
+'use strict';
+
+const path = require('path');
+const priority = hexo.config.inject_priority || {};
+
+// Add comment
+hexo.extend.filter.register('theme_inject', function(injects) {
+  let theme = hexo.theme.config;
+  if (!theme.disqusjs.enable || !theme.disqusjs.shortname || !theme.disqusjs.apikey) return;
+
+  injects.comment.raw('disqusjs', `
+  <div class="comments" id="comments">
+    <div id="disqus_thread">
+      <noscript>{#
+      #}Please enable JavaScript to view the comments powered by Disqus.{#
+    #}</noscript>
+    </div>
+  </div>
+  `, {}, {cache: true});
+
+  injects.bodyEnd.file('disqusjs', path.join(hexo.theme_dir, 'layout/_third-party/comments/disqusjs.swig'));
+
+}, priority.disqusjs);

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

@@ -0,0 +1,42 @@
+/* global hexo */
+
+'use strict';
+
+const {iconText} = require('./common');
+const priority = hexo.config.inject_priority || {};
+
+// Add comment
+hexo.extend.filter.register('theme_inject', function(injects) {
+  let theme = hexo.theme.config;
+  if (!theme.facebook_sdk.enable || !theme.facebook_comments_plugin.enable) return;
+
+  injects.comment.raw('facebook-comments-plugin', `
+  <div class="comments" id="comments">
+    <div class="fb-comments"
+       data-href="{{ page.permalink }}"
+       data-numposts="{{ theme.facebook_comments_plugin.num_of_posts }}"
+       data-width="{{ theme.facebook_comments_plugin.width }}"
+       data-colorscheme="{{ theme.facebook_comments_plugin.scheme }}">
+    </div>
+  </div>
+  `);
+
+}, priority.facebook_comments_plugin);
+
+// Add post_meta
+hexo.extend.filter.register('theme_inject', function(injects) {
+  let theme = hexo.theme.config;
+  if (!theme.facebook_sdk.enable || !theme.facebook_comments_plugin.enable) return;
+
+  injects.postMeta.raw('facebook-comments-plugin', `
+  {% if post.comments %}
+  <span class="post-meta-item">
+    ${iconText}
+    <a 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>
+  {% endif %}
+  `);
+
+}, priority.facebook_comments_plugin_post_meta);