preface :
notice next 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 progress 6.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: find CSDN Yes md Our support is not very good , Suggest or will md 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 and Disqus combination ,gitment Not enabled temporarily


Theme configuration

By default, laibili has only livere_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 last endif 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 %}

* Laibili {% 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 order comments Comment systems div order , My order is from top to bottom
Laibili
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 one div 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 whole div 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 the original comments Modification of template file , Easy to upgrade and update

*
Add or modify disqus Load button location

*
Button on all comment systems div before

*
After clicking load , Will be loaded out Disqus 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 Full 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, big man

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