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

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

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

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

本文首发于我的个人博客 <https://1022-zhang.github.io/combined-comments.html>,国内访问节点
<https://tianbozhang.coding.me/combined-comments.html>
ps:发现CSDN对md的支持也不是很好,建议还是将md博文发布到自己的博客,用大社区来引流量


双评论系统

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

双评论效果演示

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


主题配置

来必力默认只有livere_uid,需要新增配置
livere:#新增 enable: true#新增,控制评论显示 livere_uid: xxxxxxx
第三方评论模板支持

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

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

如:

* 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

整体评论布局支持

* 创建
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 %}
* /themes/next/layout/partials/comments.swig 文件末尾引入上述模板 {% include
'comments/custom-comments.swig' %}
放在末尾可以覆盖前面的配置

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

*
添加或修改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
<https://chalkit.tk/20171123-load-Disqus-livere-comment-on-click-in-hexo-next-theme/>
ehlxr <https://ehlxr.me/about/>

友情链接
ioDraw流程图
API参考文档
OK工具箱
云服务器优惠
阿里云优惠券
腾讯云优惠券
华为云优惠券
站点信息
问题反馈
邮箱:ixiaoyang8@qq.com
QQ群:637538335
关注微信