个人博客-双评论系统（来必力与Disqus）

发表于 | 阅读次数:
字数统计: 4.7k | 阅读时长约 0:05 分钟

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

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

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

以下内容基于Next 5.1.4实现，支持主题升级，原理不变，细节会有变化

Next官方已经发布6.0.2版本，将延时加载加入了disqus。

双评论系统

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

双评论效果演示

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

主题配置

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

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

第三方评论模板支持

themes\next\layout\third-partycomments\xxx.swig文件

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

如：

  • gitment
1
2
3
4
5
6
7
8
9
10
{% raw %}

{% 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 -->

{% endraw %}

删除最外围的

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

  • 来必力
1
2
3
4
5
6
7
8
9
10
11
{% raw %}

{% 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 %}

{% endraw %}

删除最外围的

{% 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
1
2
3
4
5
6
7
8
9
10
11
{% raw %}

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

   #省略

  {% endif %}
{% endif %}

{% endraw %}

删除最外围的

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

上述代码主题升级到6.0.1时有变化，原理不变

布局顺序调整

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

整体评论布局支持

  1. 创建
    themes\next\layout_partials\comments\custom-comments.swig模板文件

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

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

核心代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
{% raw %}
{% 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 %}

{% endraw %}
  1. \themes\next\layout_partials\comments.swig 文件末尾引入上述模板

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

注意：此代码在主题升级到6.0.1时会有变化，如下

1
2
3
4
5
6
7
8
{% raw %}

{% if theme.custom_file_path.comments %}
  {% set custom_comments = '../../../../' + theme.custom_file_path.comments %}
{% endif %}
{% include custom_comments %}

{% endraw %}

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

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

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

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

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

  • 添加以下代码到模板

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

custom-comments完整代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
{% raw %}

{% 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 %}

{% endraw %}

参考,感谢大佬

chalkit
ehlxr

完结撒花