前言
幾個月前，在好奇心的鼓動下，利用Github Pages和Hexo以及Next主題搭建一個屬于自己的個人主站，由于時間傖俗，搭建成功后就沒有好好完善一下，可以參照文章徒手教你建自己的博客,文章里有搭建免費(fèi)博客的詳細(xì)步驟。
這周末沒有加班，靜下心寫了篇文章，發(fā)布成功后，卻又遇到Github Pages更新的原因?qū)е虏┛偷捻撁娉霈F(xiàn)空白，又順手寫了一篇解決頁面空白問題的博客，文章為關(guān)于hexo主題next博客加載空白頁的處理,文章記錄了出現(xiàn)問題原因和解決的多種方式。
解決完問題，本以為沒有什么優(yōu)化的了，此刻，看到別人的博客都可以評論和分享，后來考慮了一下，評論的功能對于反饋博客中問題很有幫助，于是乎，決定搞一下。
在添加評論的過程中，主要遇到下面的三個問題：
1、如何選取合適評論系統(tǒng)；2、添加評論系統(tǒng)后，如何根據(jù)文章對評論進(jìn)行區(qū)分；3、如何解決評論后的郵件提醒。
后續(xù)的內(nèi)容將圍繞上述三個問題進(jìn)行展開。
選取合適評論系統(tǒng)
有disqus和多說兩種評論系統(tǒng)。
disqus加載速度較慢，并且用戶必須先注冊disqus用戶才能評論，流程很繁瑣，最重要的是需要翻墻，這可是致命一擊啊。而
多說可以很好避開上述的缺點(diǎn)，加載速度快、利用社交賬號登錄就能評論、還帶有郵件提醒功能，對比一下，簡直天壤之別，果斷選擇多說。
安裝多說
進(jìn)入多說網(wǎng)站,點(diǎn)擊我要安裝,具體設(shè)置如下圖：
點(diǎn)擊創(chuàng)建，選擇通用，就會顯示一段嵌入評論的通用js代碼，如下圖：
替換主題中指定的文件
- 首先，說一下我使用的是
Next主題，需要修改代碼文件是_config.yml中duoshuo_shroname,如下：
duoshuo_shortname: 填寫上述步驟注冊的shroname
還需要修改目錄
themes/next/layout/_partials/comments.swig下的comments.swig。若你是
landscape主題，需要修改themes\landscape\layout\_partial\article.ejs目錄下的article.ejs文件找到原文件中的被替換代碼：
<div class="ds-thread" data-thread-key="{{ page.path }}"
data-title="{{ page.title }}" data-url="{{ page.permalink }}">
</div>
- 替換的代碼如下：
<section id="comments">
<!-- 多說評論框 start -->
<div id="ds-thread" class="ds-thread" data-thread-key="{{ page.path }}" data-title="{{ page.title }}" data-url="{{ page.permalink }}" }}"></div>
<!-- 多說評論框 end -->
<!-- 多說公共JS代碼 start (一個網(wǎng)頁只需插入一次) -->
<script type="text/javascript">
var duoshuoQuery = {short_name:"shortTime"};
(function() {
var ds = document.createElement('script');
ds.type = 'text/javascript';ds.async = true;
ds.src = (document.location.protocol == 'https:' ? 'https:' : 'http:') + '//static.duoshuo.com/embed.js';
ds.charset = 'UTF-8';
(document.getElementsByTagName('head')[0]
|| document.getElementsByTagName('body')[0]).appendChild(ds);
})();
</script>
<!-- 多說公共JS代碼 end -->
</section>
需要注意的是：
data-thread-key、data-title、data-url這三個變量一定要嚴(yán)格按照上述代碼格式書寫，否則會導(dǎo)致某一篇文章評論會顯示在所有的文章里，造成數(shù)據(jù)的不準(zhǔn)確。這三個變量的具體含義在上述中已闡明（
data-thread-key=請將此處替換成你站點(diǎn)的IDdata-title=請?zhí)鎿Q成文章的標(biāo)題data-url=請?zhí)鎿Q成文章的網(wǎng)址）.上述的步驟都順利完成后，
多說評論系統(tǒng)基本功能就部署好了，可以發(fā)布博客體驗(yàn)一下。
添加評論郵件提醒
多說自帶的郵件提醒功能是不支持主動評論提醒的，比如說在某一篇博客中，有人主動評論留言的話，多說此時是不會郵件提醒的。多說所謂的郵件提醒是以別人回復(fù)別人的評論為前提的，即你不是回復(fù)他人的評論博主就收不到你評論回復(fù)的提醒。從這一點(diǎn)上看，
多說這一功能有失人性化的設(shè)計，故自己動手解決這個郵件提醒不完整的問題。從分析
多說提供的API入手，同步用戶到多說和評論框調(diào)用代碼參數(shù)說明,得知可以使用data-author-key變量設(shè)置主動郵件提醒。我們需要做的是，自定義同步一個用戶到
多說服務(wù)器，并將該用戶設(shè)置成作者身份，進(jìn)而取得該用戶在站點(diǎn)的ID,將該ID賦值給data-author-key加在多說的評論框里即可。開始動手....
在桌面或其他目錄下，新建一個文件夾，命名為
js或者其他，進(jìn)入該文件夾，利用終端執(zhí)行下面的命令：
npm install --save-dev request
需要等上幾分鐘，此時你可以進(jìn)行下一步了。
利用
sublime或其他工具新建一個myuser.js文件，將下面的代碼復(fù)制進(jìn)文件夾，并修改相應(yīng)的data數(shù)據(jù)
var http = require('request');
var data = {
'short_name' : '', // 你的short_name，后臺管理那里可以看到
'secret' : '', // 密鑰，后臺管理那里可以看到
'users[0][user_key]' : '1', // 用戶在站點(diǎn)的ID，就是后面需要設(shè)置的 data-author-key值，可以隨意設(shè)置，這里默認(rèn)為1吧
'users[0][name]' : '', // 顯示的名字
'users[0][email]' : '', // 提醒的郵箱
'users[0][role]' : 'author'// 用戶的類型，設(shè)置為作者
};
http.post({url:'http://api.duoshuo.com/users/import.json', form: data}, function (error, response, body) {
if (!error && response.statusCode == 200) {
console.log('Post data to Duoshuo success');
}
else{
console.log('Post data to Duoshuo fail');
}
});
- 將上面代碼中的數(shù)據(jù)按照自己的多說賬戶設(shè)置好之后，執(zhí)行以下命令完成數(shù)據(jù)同步到多說服務(wù)器：
node myuser.js
若輸出為
Post data to Duoshuo fail那就重新檢查以下data數(shù)據(jù)是否修改正確；若輸出為
Post data to Duoshuo success，那么就登錄到多說的后臺，在用戶那里看到新添加的用戶，如下所示；
若后臺顯示的角色不是作者，可以手動改成作者。
-
去目錄
themes/next/layout/_partials/comments.swig，修改文件comments.swig中的那段代碼（見上面描述）為：<section id="comments"> <!-- 多說評論框 start --> <div id="ds-thread" class="ds-thread" data-thread-key="{{ page.path }}" data-title="{{ page.title }}" data-url="{{ page.permalink }}" data-author-key="{{ theme.duoshuo_info.data_author_key }}"></div> <!-- 多說評論框 end --> <!-- 多說公共JS代碼 start (一個網(wǎng)頁只需插入一次) --> <script type="text/javascript"> var duoshuoQuery = {short_name:"shortTime"};(function() {
var ds = document.createElement('script');
ds.type = 'text/javascript';ds.async = true;
ds.src = (document.location.protocol == 'https:' ? 'https:' : 'http:') + '//static.duoshuo.com/embed.js';
ds.charset = 'UTF-8';
(document.getElementsByTagName('head')[0]
|| document.getElementsByTagName('body')[0]).appendChild(ds);
})();
</script>
</section> 上述代碼與之前的比較，可以看出其實(shí)就是增加了一個變量：
data-author-key="{{ theme.duoshuo_info.data_author_key }}"
- 這里設(shè)置好之后，修改主題下的
_config.yml文件，增加一行配置，如下：
duoshuo_info:
data_author_key: 1 #此處填寫上面js腳本中的data變量中的users[0][user_key]的值，因?yàn)樯厦鏋?，這里我就填寫為1了
- 到這里基本的工作就完成了，重新發(fā)布博客，就可以使用主動評論郵件提醒了。
- 參照我的博客
-
PS一句，這種郵件提醒不是實(shí)時提醒，而是每天一封匯總郵件。如果你中途查看了這個評論的話，也是不會郵件提醒的。
以上內(nèi)容是筆者在創(chuàng)建個人博客過程中一些做法，大家如有其它意見歡迎評論。
