本文解决两个问题：
- hexo next 主题（version 5.1.3)怎么设置成点击按钮再加载评论
- hexo next 主题怎样设置才能同时加载 Disqus 和来必力（livere）双评论系统或更多评论系统
设计思路
我的博客主要是面向墙向用户，所以只能在墙内评论系统里面选一个。不需要备案、登录方式相对多的系统就轮到来必力，唯一的缺点是加载的时候有点慢。但 Disqus 评论系统在墙外应用比较广、功能全，而且显得格调和水平比较高，于是就想加载两个系统。还有一种思路是用JavaScript判断用户的网络是否在中国大陆，然后再加载对应的评论系统。还有为Disqus设置代理的方法，不过评论少的时候折腾了收益不高。
在搜索实现方式的过程，发现还可以让用户点击按钮之后再加载评论系统，这样可避免缓冲过多的JavaScript脚本，改善读者的体验，让博客页面简洁。而且甚至还可以多个评论按钮，用户想看哪个评论系统就点哪个。
上面几种思路就有好几种排列组合了，我暂定选用了设置一个“加载评论”的按钮，读者点击之后同时加载两个评论系统，当然墙内用户看不到Disqus。
研究了hexo next 主题的源文件，发现它把带个博客拆成各种模块，再由配置文件里面的开关和JavaScript判断语句来决定最后生成的博客是什么样。而且最后生成的静态博客，还可以通过JavaScript的条件语句来判断是否加载某些模块。
以post页面的评论模块为例，它牵扯到的源文件有：
-
"\blog\themes\next_config.yml"
这是主题配置文件，里面有开关和参数
# Disqus disqus: enable: true shortname: count: false
-
"\blog\themes\next\layout_layout.swig"
layout就是布局，这里面有两行
{% include '_partials/comments.swig' %}{% include '_third-party/comments/index.swig' %}大概就是它分别引用了
comments.swig和index.swig两个模块
-
"\blog\themes\next\layout_third-party\comments\index.swig"
这个模块就是一堆include
{% include 'duoshuo.swig' %}
{% include 'disqus.swig' %}
{% include 'hypercomments.swig' %}
{% include 'youyan.swig' %}
{% include 'livere.swig' %}
{% include 'changyan.swig' %}
{% include 'gitment.swig' %}
{% include 'valine.swig' %}
-
"\blog\themes\next\layout_third-party\comments\disqus.swig"
这个就是最最基础的disqus代码了，也就是disqus官方的代码。但是它有一堆if来判断具体怎么加载。但具体的代码貌似跟官方的不太一样。
{% if not (theme.duoshuo and theme.duoshuo.shortname) and not theme.duoshuo_shortname %} ///duoshuo不激活才执行
{% if theme.disqus.enable %} ///前面disqus的开关
{% if theme.disqus.count %} ///disqus commment数目显示
<script id="dsq-count-scr" src="https://{{theme.disqus.shortname}}.disqus.com/count.js" async></script>
{% endif %}
{% if page.comments %}
<script type="text/javascript"> ///disqus核心代码，script标签里面包着JavaScript
var disqus_config = function () {
this.page.url = '{{ page.permalink }}';
this.page.identifier = '{{ page.path }}';
this.page.title = '{{ page.title| addslashes }}';
};
var d = document, s = d.createElement('script');
s.src = 'https://{{theme.disqus.shortname}}.disqus.com/embed.js';
s.setAttribute('data-timestamp', '' + +new Date());
(d.head || d.body).appendChild(s);
</script>
{% endif %}
{% endif %}
{% endif %}
- "\blog\themes\next\layout_partials\comments.swig"
hexo next主题只加载一种评论插件的限定就这个在这里实现的。它用连环if语句来控制只实现一种评论插件（通过控制插件参数赋值的方式）
点击按钮加载 Disqus
《Hexo Next 主题点击加载 Disqus》这篇文章讲得很清楚。不过我的next 主题版本和它不一样，所以有一步还是有点区别，反复研究和测试，得出以下步骤。
1.打开需要更改的文件
"\blog\themes\next\layout_partials\comments.swig"
"\blog\themes\next\layout_third-party\comments\disqus.swig"
我用的是EmEditor来编辑，编辑之前可以先备份一下原文件，当然只要不关闭窗口，始终可以ctrl+Z到原文件的状态的。
2. 添加按钮
编辑第一个 comments.swig 文件，在文件内容 <div id="disqus_thread"> 前面加入下面内容：
<div style="text-align:center;">
<button class="btn" id="load-disqus" onclick="disqus.load();">加载评论</button>
</div>
按钮样式我就直接用默认的btn，懒得改了。这里的开关就是onclick="disqus.load()
3.在Disqus的代码外面外包一层判断语句
《Hexo Next 主题点击加载 Disqus》disqus.swig的代码和next 5.1.3里面的disqus.swig长得不太一样，直接copy过来不能用。研究了一下，是要在disqus核心代码外面包一层这样的判断语句：
var disqus = {
load : function disqus(){
此处是disqus核心代码
$('#load-disqus').remove(); ///加载后移除按钮
}
}
}
这个disqus = { load就对应onclick="disqus.load()
修改之后disqus.swig是如下内容：
{% if not (theme.duoshuo and theme.duoshuo.shortname) and not theme.duoshuo_shortname %}
{% if theme.disqus.enable %}
{% if theme.disqus.count %}
<script id="dsq-count-scr" src="https://{{theme.disqus.shortname}}.disqus.com/count.js" async></script>
{% endif %}
{% if page.comments %}
<script type="text/javascript">
var disqus = {
load : function disqus(){
var disqus_config = function () {
this.page.url = '{{ page.permalink }}';
this.page.identifier = '{{ page.path }}';
this.page.title = '{{ page.title| addslashes }}';
};
var d = document, s = d.createElement('script');
s.src = 'https://{{theme.disqus.shortname}}.disqus.com/embed.js';
s.setAttribute('data-timestamp', '' + +new Date());
(d.head || d.body).appendChild(s);
$('#load-disqus').remove(); ///加载后移除按钮
}
}
</script>
{% endif %}
{% endif %}
{% endif %}
我就不用那个disqus计数了。它其实是在标题的下面显示评论数，评论全是0的时候好难看。而且它一开始就默认加载，墙内用户会显示加载到失败。
同时加载 Disqus 和来必力双评论系统
上面谈到，hexo next是通过comments.swig里面的if语句和livere.swig里面的if语句来限定了加载disqus就不继续加载来必力。最简单粗暴的解决方法就是，直接把上述两个文件里面的来必力对应的分支语句copy到disqus的分支。
1.打开需要更改的文件
"\blog\themes\next\layout_partials\comments.swig"
"\blog\themes\next\layout_third-party\comments\disqus.swig"
"\blog\themes\next\layout_third-party\comments\livere.swig"
2.修改comments.swig中的disqus部分
在里面分别找到两个插件对应的语句。来必力的语句就是一行，直接插到disqus里面
<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>
<div id="lv-container" data-id="city" data-uid="{{ theme.livere_uid }}"></div> ///livere行
</div>
3.在disqus.swig里面直接插入来必力核心代码
先在livere.swig里面找出来必力的核心代码：
var d = document, s = d.createElement('script');
s.src = 'https://{{theme.disqus.shortname}}.disqus.com/embed.js';
s.setAttribute('data-timestamp', '' + +new Date());
(d.head || d.body).appendChild(s);
(function(d, s) {
var j, e = d.getElementsByTagName(s)[0];
if (typeof LivereTower === 'function') { return; }
j = d.createElement(s);
j.src = 'https://cdn-city.livere.com/js/embed.dist.js';
j.async = true;
e.parentNode.insertBefore(j, e);
})(document, 'script');
插入disqus.swig里面：
{% if not (theme.duoshuo and theme.duoshuo.shortname) and not theme.duoshuo_shortname %}
{% if theme.disqus.enable %}
{% if theme.disqus.count %}
<script id="dsq-count-scr" src="https://{{theme.disqus.shortname}}.disqus.com/count.js" async></script>
{% endif %}
{% if page.comments %}
<script type="text/javascript">
var disqus = {
load : function disqus(){
var disqus_config = function () {
this.page.url = '{{ page.permalink }}';
this.page.identifier = '{{ page.path }}';
this.page.title = '{{ page.title| addslashes }}';
};
var d = document, s = d.createElement('script');
s.src = 'https://{{theme.disqus.shortname}}.disqus.com/embed.js';
s.setAttribute('data-timestamp', '' + +new Date());
(d.head || d.body).appendChild(s);
(function(d, s) {
var j, e = d.getElementsByTagName(s)[0];
if (typeof LivereTower === 'function') { return; }
j = d.createElement(s);
j.src = 'https://cdn-city.livere.com/js/embed.dist.js';
j.async = true;
e.parentNode.insertBefore(j, e);
})(document, 'script');
$('#load-disqus').remove(); ///加载后移除按钮
}
}
</script>
{% endif %}
{% endif %}
{% endif %}
测试成功
Markdown中分组标题#与有序列表并用时，#必须写在有序列表的序号前面。用Typora写作时，必须先按快捷键ctrl+数字指定标题的等级，再写序号。相反操作，就会变成“序号.###”的代码，虽然在Typora里面预览没有问题，但最终渲染成HTML时序号就乱了。
