Hexo 博客双评论系统（来必力与Disqus）

前言：
看到next issue 有人提出双评论系统的问题，实现方案及效果各不同

正好我也考虑实现类似的双评论系统方案

为方便主题升级及管理修改方便，特此研究了一下实现原理，按照此文所讲述方式，实现自己的组合评论系统也不难

Next官方正在开发6.0.2版本，已经将评论延时加载功能加入开发清单，但是还没有正式发布

本文首发于我的个人博客,国内访问节点
ps:发现CSDN对md的支持也不是很好，建议还是将md博文发布到自己的博客，用大社区来引流量

双评论系统

原理：主要修改布局代码，配合主题配置控制显示

双评论效果演示

演示来必力与Disqus组合，gitment暂时未启用

主题配置

来必力默认只有livere_uid，需要新增配置

livere:#新增
  enable: true#新增，控制评论显示
  livere_uid: xxxxxxx

第三方评论模板支持

/layout/third-partycomments/xxx.swig文件

删除自己开启条件之外的控制语句，注意最后的endif 也要删除

如：

扫描二维码关注公众号，回复： 1522566 查看本文章

• gitment

{% if not (theme.duoshuo and theme.duoshuo.shortname) and not theme.duoshuo_shortname %}
{% if theme.gitment.enable and theme.gitment.client_id %}
<!-- LOCAL: You can save these files to your site and update links -->
   #省略
{% endif %}
<!-- END LOCAL -->

删除最外围的{% if not (theme.duoshuo and theme.duoshuo.shortname) and not theme.duoshuo_shortname %} {% endif %}

• 来必力

{% if not (theme.duoshuo and theme.duoshuo.shortname) and not theme.duoshuo_shortname and not (theme.disqus.enable and theme.disqus.shortname) and not theme.hypercomments_id %}

  {% if page.comments and theme.livere_uid %}
  #省略
  {% endif %}

{% endif %}

删除最外围的{% if not (theme.duoshuo and theme.duoshuo.shortname) and not theme.duoshuo_shortname and not (theme.disqus.enable and theme.disqus.shortname) and not theme.hypercomments_id %} {% endif %}

• Disqus

{% if not (theme.duoshuo and theme.duoshuo.shortname) and not theme.duoshuo_shortname %}
  {% if theme.disqus.enable %}

   #省略

  {% endif %}
{% endif %}

删除最外围的{% if not (theme.duoshuo and theme.duoshuo.shortname) and not theme.duoshuo_shortname %}{% endif %}

布局顺序调整

按所需顺序调整comments各评论系统div顺序，我的顺序从上到下是
来必力
gitment
disqus

整体评论布局支持

1. 创建
   theme/next/layout/partials/comments/custom-comments.swig模板文件

组合需要在一起显示的评论系统，用一个div 承载，好处是如果添加了背景，可以将几个评论系统显示在一起。

条件语句使用逻辑或控制整体div显示，每个评论系统自己控制逻辑不变

核心代码：

{% if theme.livere.enable or theme.gitment.enable or theme.disqus.enable %}

 <div class="comments" id="comments">

 {% if theme.livere.enable %}
  #来必力核心代码          
 {% endif %}
​        
 {% if theme.gitment.enable %}
  # gitment核心代码  
 {% endif %}

 {% if theme.disqus.enable %}
  # disqus 核心代码
 {% endif %}
​     
 </div>

{% endif %}

1. /themes/next/layout/partials/comments.swig 文件末尾引入上述模板

  {% include 'comments/custom-comments.swig' %}

放在末尾可以覆盖前面的配置

这样做的好处是，减少原comments模板文件的修改，方便升级更新

1. 添加或修改disqus 加载按钮位置

   • 按钮放置于所有评论系统div之前

   • 点击加载之后，将加载出的Disqus置于已有评论之后

   • 添加以下代码到模板

<div style="text-align:center;">
<button class="btn" id="load-disqus" onclick="disqus.load();">加载 Disqus 评论</button>
</div>

custom-comments完整代码

{% if page.comments %}

{% if theme.disqus.enable %}
  <div style="text-align:center;">
  <button class="btn" id="load-disqus" onclick="disqus.load();">加载 Disqus 评论</button>
  </div>
{% endif %}

 #核心代码
{% if theme.livere.enable or theme.gitment.enable or theme.disqus.enable %}
  <div class="comments" id="comments">

  {% if theme.livere.enable %}#使用主题配置来必力新增控制
    <div id="lv-container" data-id="city" data-uid="{{ theme.livere.livere_uid }}"></div>
  {% endif %}

  {% if theme.gitment.enable %}#gitment
   {% if theme.gitment.lazy %}
    <div onclick="showGitment()" id="gitment-display-button">{{ __('gitmentbutton') }}</div>
    <div id="gitment-container" style="display:none"></div>
   {% else %}
   <div id="gitment-container"></div>
   {% endif %}
  {% endif %}

  {% if theme.disqus.enable %}# disqus
   <div style="text-align:center;">
   </div>
   <div id="disqus_thread">
   <noscript>
    Please enable JavaScript to view the
    <a href="https://disqus.com/?ref_noscript">comments powered by Disqus.</a>
   </noscript>
   </div>
  {% endif %}

  </div>
 {% endif %}

{% endif %}

参考,感谢大佬

chalkit
ehlxr