本文解決兩個(gè)問題：
- hexo next 主題（version 5.1.3)怎么設(shè)置成點(diǎn)擊按鈕再加載評(píng)論
- hexo next 主題怎樣設(shè)置才能同時(shí)加載 Disqus 和來必力（livere）雙評(píng)論系統(tǒng)或更多評(píng)論系統(tǒng)
設(shè)計(jì)思路
我的博客主要是面向墻向用戶挽放，所以只能在墻內(nèi)評(píng)論系統(tǒng)里面選一個(gè)。不需要備案剂癌、登錄方式相對(duì)多的系統(tǒng)就輪到來必力属提，唯一的缺點(diǎn)是加載的時(shí)候有點(diǎn)慢目代。但 Disqus 評(píng)論系統(tǒng)在墻外應(yīng)用比較廣、功能全，而且顯得格調(diào)和水平比較高裆馒，于是就想加載兩個(gè)系統(tǒng)。還有一種思路是用JavaScript判斷用戶的網(wǎng)絡(luò)是否在中國(guó)大陸丐怯，然后再加載對(duì)應(yīng)的評(píng)論系統(tǒng)喷好。還有為Disqus設(shè)置代理的方法，不過評(píng)論少的時(shí)候折騰了收益不高读跷。
在搜索實(shí)現(xiàn)方式的過程梗搅，發(fā)現(xiàn)還可以讓用戶點(diǎn)擊按鈕之后再加載評(píng)論系統(tǒng)，這樣可避免緩沖過多的JavaScript腳本效览，改善讀者的體驗(yàn)无切，讓博客頁(yè)面簡(jiǎn)潔。而且甚至還可以多個(gè)評(píng)論按鈕丐枉，用戶想看哪個(gè)評(píng)論系統(tǒng)就點(diǎn)哪個(gè)哆键。
上面幾種思路就有好幾種排列組合了，我暫定選用了設(shè)置一個(gè)“加載評(píng)論”的按鈕瘦锹，讀者點(diǎn)擊之后同時(shí)加載兩個(gè)評(píng)論系統(tǒng)洼哎，當(dāng)然墻內(nèi)用戶看不到Disqus烫映。
研究了hexo next 主題的源文件，發(fā)現(xiàn)它把帶個(gè)博客拆成各種模塊噩峦，再由配置文件里面的開關(guān)和JavaScript判斷語句來決定最后生成的博客是什么樣锭沟。而且最后生成的靜態(tài)博客，還可以通過JavaScript的條件語句來判斷是否加載某些模塊识补。
以post頁(yè)面的評(píng)論模塊為例族淮，它牽扯到的源文件有：
-
"\blog\themes\next_config.yml"
這是主題配置文件，里面有開關(guān)和參數(shù)
# 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兩個(gè)模塊
-
"\blog\themes\next\layout_third-party\comments\index.swig"
這個(gè)模塊就是一堆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"
這個(gè)就是最最基礎(chǔ)的disqus代碼了祝辣，也就是disqus官方的代碼。但是它有一堆if來判斷具體怎么加載切油。但具體的代碼貌似跟官方的不太一樣蝙斜。
{% if not (theme.duoshuo and theme.duoshuo.shortname) and not theme.duoshuo_shortname %} ///duoshuo不激活才執(zhí)行
{% if theme.disqus.enable %} ///前面disqus的開關(guān)
{% if theme.disqus.count %} ///disqus commment數(shù)目顯示
<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標(biāo)簽里面包著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主題只加載一種評(píng)論插件的限定就這個(gè)在這里實(shí)現(xiàn)的澎胡。它用連環(huán)if語句來控制只實(shí)現(xiàn)一種評(píng)論插件（通過控制插件參數(shù)賦值的方式）
點(diǎn)擊按鈕加載 Disqus
《Hexo Next 主題點(diǎn)擊加載 Disqus》這篇文章講得很清楚孕荠。不過我的next 主題版本和它不一樣，所以有一步還是有點(diǎn)區(qū)別攻谁，反復(fù)研究和測(cè)試稚伍，得出以下步驟词裤。
1.打開需要更改的文件
"\blog\themes\next\layout_partials\comments.swig"
"\blog\themes\next\layout_third-party\comments\disqus.swig"
我用的是EmEditor來編輯碌宴，編輯之前可以先備份一下原文件，當(dāng)然只要不關(guān)閉窗口待逞，始終可以ctrl+Z到原文件的狀態(tài)的受楼。
2. 添加按鈕
編輯第一個(gè) comments.swig 文件垦搬，在文件內(nèi)容 <div id="disqus_thread"> 前面加入下面內(nèi)容：
<div style="text-align:center;">
<button class="btn" id="load-disqus" onclick="disqus.load();">加載評(píng)論</button>
</div>
按鈕樣式我就直接用默認(rèn)的btn，懶得改了艳汽。這里的開關(guān)就是onclick="disqus.load()
3.在Disqus的代碼外面外包一層判斷語句
《Hexo Next 主題點(diǎn)擊加載 Disqus》disqus.swig的代碼和next 5.1.3里面的disqus.swig長(zhǎng)得不太一樣悼沿，直接copy過來不能用。研究了一下骚灸，是要在disqus核心代碼外面包一層這樣的判斷語句：
var disqus = {
load : function disqus(){
此處是disqus核心代碼
$('#load-disqus').remove(); ///加載后移除按鈕
}
}
}
這個(gè)disqus = { load就對(duì)應(yīng)onclick="disqus.load()
修改之后disqus.swig是如下內(nèi)容：
{% 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 %}
我就不用那個(gè)disqus計(jì)數(shù)了糟趾。它其實(shí)是在標(biāo)題的下面顯示評(píng)論數(shù)，評(píng)論全是0的時(shí)候好難看甚牲。而且它一開始就默認(rèn)加載义郑，墻內(nèi)用戶會(huì)顯示加載到失敗。
同時(shí)加載 Disqus 和來必力雙評(píng)論系統(tǒng)
上面談到丈钙，hexo next是通過comments.swig里面的if語句和livere.swig里面的if語句來限定了加載disqus就不繼續(xù)加載來必力非驮。最簡(jiǎn)單粗暴的解決方法就是，直接把上述兩個(gè)文件里面的來必力對(duì)應(yīng)的分支語句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部分
在里面分別找到兩個(gè)插件對(duì)應(yīng)的語句劫笙。來必力的語句就是一行芙扎，直接插到disqus里面
<div id="disqus_thread">
<noscript>
Please enable JavaScript to view the
<a >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 %}
測(cè)試成功
Markdown中分組標(biāo)題#與有序列表并用時(shí)，#必須寫在有序列表的序號(hào)前面填大。用Typora寫作時(shí)戒洼，必須先按快捷鍵ctrl+數(shù)字指定標(biāo)題的等級(jí)，再寫序號(hào)允华。相反操作圈浇，就會(huì)變成“序號(hào).###”的代碼，雖然在Typora里面預(yù)覽沒有問題靴寂，但最終渲染成HTML時(shí)序號(hào)就亂了磷蜀。
原文發(fā)表于：Hexo Next 主題點(diǎn)擊加載 Disqus 和來必力雙評(píng)論系統(tǒng)
