說(shuō)在最前面境析，最近剛發(fā)現(xiàn)一個(gè)好看的主題 Chic囚枪，然后果斷就換了。效果很好劳淆。感謝作者链沼。如果你們也喜歡的話(huà)，直接去GitHub項(xiàng)目沛鸵，里邊有安裝文檔括勺，非常的簡(jiǎn)單缆八。
附上我的博客地址，歡迎參觀(guān)疾捍。
評(píng)論和文章閱讀量統(tǒng)計(jì)經(jīng)過(guò)對(duì)比之后選用的都是 Valine奈辰。
添加評(píng)論
獲取 APP ID 和 APP Key
首先需要注冊(cè)一個(gè) LeanCloud 賬號(hào)，然后進(jìn)入控制臺(tái)乱豆，點(diǎn)擊左下角創(chuàng)建應(yīng)用奖恰。
隨便起個(gè)名字，選擇開(kāi)發(fā)版宛裕，然后創(chuàng)建就可以了瑟啃。創(chuàng)建完成之后，進(jìn)入剛剛創(chuàng)建的應(yīng)用续滋，選擇設(shè)置->應(yīng)用Key翰守，然后你就能找到 APP ID 和 APP Key 了。
主題 _config.yml 文件內(nèi)增加配置
在主題目錄下的 _config.yml 的文件中添加 valine 配置：
valine:
appid: #Leancloud應(yīng)用的appId
appkey: #Leancloud應(yīng)用的appKey
verify: true #驗(yàn)證碼
notify: true #評(píng)論回復(fù)提醒
placeholder: 這里留言疲酌。蜡峰。 #評(píng)論框占位符</pre>
添加 valine.ejs 文件
然后添加 valine.ejs 文件，我放到了 layout/_plugins/ 文件夾下朗恳，文件的內(nèi)容：
<div class="valine_comment"></div>
<!--載入js湿颅，在</body>之前插入即可-->
<!--Leancloud 操作庫(kù):-->
<script src="http://cdn1.lncld.net/static/js/3.0.4/av-min.js"></script>
<!--Valine 的核心代碼庫(kù)-->
<script src="http://unpkg.com/valine/dist/Valine.min.js"></script>
<script>
new Valine({
el: '.valine_comment',
app_id: '<%= theme.valine.appid %>',
app_key: '<%= theme.valine.appkey %>',
placeholder: '<%= theme.valine.placeholder %>',
notify: '<%= theme.valine.notify %>',
verify: '<%= theme.valine.verify %>',
});
</script>
添加調(diào)用代碼
在你的文章的 ejs 文件中添加評(píng)論的代碼，我使用的這個(gè)主題是在 layout/_page/post.ejs 文件中添加如下代碼：
<% if (theme.valine && theme.valine.appid && theme.valine.appkey){ %>
<section id="comments" class="comments">
<style>
.comments{margin:30px;padding:10px;background:#fff}
@media screen and (max-width:800px){.comments{margin:auto;padding:10px;background:#fff}}
</style>
<%- partial('_plugins/valine', {
key: post.slug,
title: post.title,
url: config.url+url_for(post.path)
}) %>
</section>
<% } %>
重新部署然后查看
然后你重新部署你的博客粥诫，就可以在文章底部看到評(píng)論框了油航。支持表情和 markdown 語(yǔ)法。還是非常好用的怀浆，不過(guò)免費(fèi)版好像每天有次數(shù)關(guān)系和總的空間大小限制谊囚。不過(guò)對(duì)于我這種自己的博客是完全夠用的。
添加文章的閱讀量
閱讀量同樣是用的 valine执赡。
主題 _config.yml 文件內(nèi)增加配置
在主題目錄下的 _config.yml 的文件中添加閱讀量配置：
valine:
appid: #Leancloud應(yīng)用的appId
appkey: #Leancloud應(yīng)用的appKey
verify: true #驗(yàn)證碼
notify: true #評(píng)論回復(fù)提醒
placeholder: 這里留言镰踏。。 #評(píng)論框占位符
visitor: true #閱讀量統(tǒng)計(jì)
如果開(kāi)啟了閱讀量統(tǒng)計(jì)沙合，Valine 會(huì)自動(dòng)檢測(cè) leancloud 應(yīng)用中是否存在Counter類(lèi)奠伪，如果不存在會(huì)自動(dòng)創(chuàng)建，無(wú)需手動(dòng)創(chuàng)建~
valine.ejs 文件中加入評(píng)論配置
然后添加 valine.ejs 文件首懈，我放到了 layout/_plugins/ 文件夾下绊率，文件的內(nèi)容：
<div class="valine_comment"></div>
<!--載入js，在</body>之前插入即可-->
<!--Leancloud 操作庫(kù):-->
<script src="http://cdn1.lncld.net/static/js/3.0.4/av-min.js"></script>
<!--Valine 的核心代碼庫(kù)-->
<script src="http://unpkg.com/valine/dist/Valine.min.js"></script>
<script>
new Valine({
el: '.valine_comment',
app_id: '<%= theme.valine.appid %>',
app_key: '<%= theme.valine.appkey %>',
placeholder: '<%= theme.valine.placeholder %>',
notify: '<%= theme.valine.notify %>',
verify: '<%= theme.valine.verify %>',
});
</script>
添加調(diào)用代碼
在你的文章的 ejs 文件中添加評(píng)論的代碼究履，我使用的這個(gè)主題是在 layout/_page/post.ejs 文件中合適位置添加如下代碼：
<span id="<%- url_for(post.path) %>" class="leancloud-visitors view" data-flag-title="<%= post.title %>">
<em class="post-meta-item-text">Pageviews:</em>
<i class="leancloud-visitors-count">loading</i>
</span>
Valine會(huì)自動(dòng)查找頁(yè)面中class值為leancloud_visitors的元素滤否，獲取其id為查詢(xún)條件。并將得到的值填充到其class的值為leancloud-visitors-count的子元素里挎袜。
重新部署然后查看
然后你就可以找到閱讀量的顯示了顽聂，每次刷新頁(yè)面肥惭，就會(huì)加1。
