Preface:
noticenext issue Some people put forward the question of double comment system, Different implementation plans and effects

I also consider the implementation of a similar double comment system

For the convenience of theme upgrading and management modification, This paper studies the principle of implementation, As described in this article, It's not hard to implement our own combined comment system

Next Official development in progress6.0.2 Edition, The delayed loading function of comments has been added to the development list, But it hasn't been released yet

This article starts with my personal blog <https://1022-zhang.github.io/combined-comments.html>, Domestic visiting node
<https://tianbozhang.coding.me/combined-comments.html>
ps: findCSDN Yesmd Our support is not very good, Suggest or willmd Post to your own blog, Use large communities to attract traffic


Double comment system

principle: Mainly modify layout code, Control display with theme configuration

Double comment effect demonstration

Demonstrate the relationship between laibili andDisqus combination,gitment Not enabled temporarily


Theme configuration

By default, laibili has onlylivere_uid, New configuration required
livere:# Newly added enable: true# Newly added, Control comment display livere_uid: xxxxxxx
Third party comment template support

/layout/third-partycomments/xxx.swig file

Delete the control statement other than the self opening condition, Pay attention to the lastendif Also delete

as:

* 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 --> # ellipsis {% endif %} <!-- END LOCAL -->
Delete the outermost{% if not (theme.duoshuo and theme.duoshuo.shortname) and not
theme.duoshuo_shortname %} {% endif %}

* Lai Bi Li {% 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 %} # ellipsis
{% endif %} {% endif %}
Delete the outermost{% 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 %} # ellipsis {% endif %} {% endif %}
Delete the outermost{% if not (theme.duoshuo and theme.duoshuo.shortname) and not
theme.duoshuo_shortname %}{% endif %}

Layout order adjustment

Adjust in the required ordercomments Comment systemsdiv order, My order is from top to bottom
Lai Bi Li
gitment
disqus

Overall comment layout support

* Establish
theme/next/layout/partials/comments/custom-comments.swig template file
Combine comment systems that need to be displayed together, Use onediv Load bearing, The advantage is that if you add a background, Several comment systems can be displayed together.

Conditional statements use logic or control the wholediv display, Each comment system has its own control logic unchanged

Core code:
{% if theme.livere.enable or theme.gitment.enable or theme.disqus.enable %} <
div class="comments" id="comments"> {% if theme.livere.enable %} # Core code of laibili {%
endif %} ​ {% if theme.gitment.enable %} # gitment Core code {% endif %} {% if
theme.disqus.enable %} # disqus Core code {% endif %} ​ </div> {% endif %}
* /themes/next/layout/partials/comments.swig Introduce the above template at the end of the file {% include
'comments/custom-comments.swig' %}
Put at the end to override the previous configuration

The advantage of this is, Reduce originalcomments Modification of template file, Easy to upgrade and update

*
Add or modifydisqus Load button location

*
Button on all comment systemsdiv before

*
After clicking load, Will be loaded outDisqus After existing comments

*
Add the following code to the template
<div style="text-align:center;"> <button class="btn" id="load-disqus" onclick=
"disqus.load();"> Load Disqus comment</button> </div>
custom-comments Complete code
{% if page.comments %} {% if theme.disqus.enable %} <div style=
"text-align:center;"> <button class="btn" id="load-disqus" onclick=
"disqus.load();"> Load Disqus comment</button> </div> {% endif %} # Core code {% if
theme.livere.enable or theme.gitment.enable or theme.disqus.enable %} <div class
="comments" id="comments"> {% if theme.livere.enable %}# Use theme configuration to create new control <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 %}
Reference resources, Thank you guys.

chalkit
<https://chalkit.tk/20171123-load-Disqus-livere-comment-on-click-in-hexo-next-theme/>
ehlxr <https://ehlxr.me/about/>