說在最前面,最近剛發現一個好看的主題 Chic,然后果斷就換了。效果很好。感謝作者。如果你們也喜歡的話,直接去GitHub項目,里邊有安裝文檔,非常的簡單。
附上我的博客地址,歡迎參觀。
評論和文章閱讀量統計經過對比之后選用的都是 Valine。
添加評論
獲取 APP ID 和 APP Key
首先需要注冊一個 LeanCloud 賬號,然后進入控制臺,點擊左下角創建應用。
隨便起個名字,選擇開發版,然后創建就可以了。創建完成之后,進入剛剛創建的應用,選擇設置->應用Key,然后你就能找到 APP ID 和 APP Key 了。
主題 _config.yml 文件內增加配置
在主題目錄下的 _config.yml 的文件中添加 valine 配置:
valine:
appid: #Leancloud應用的appId
appkey: #Leancloud應用的appKey
verify: true #驗證碼
notify: true #評論回復提醒
placeholder: 這里留言。。 #評論框占位符</pre>
添加 valine.ejs 文件
然后添加 valine.ejs 文件,我放到了 layout/_plugins/ 文件夾下,文件的內容:
<div class="valine_comment"></div>
<!--載入js,在</body>之前插入即可-->
<!--Leancloud 操作庫:-->
<script src="http://cdn1.lncld.net/static/js/3.0.4/av-min.js"></script>
<!--Valine 的核心代碼庫-->
<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>
添加調用代碼
在你的文章的 ejs 文件中添加評論的代碼,我使用的這個主題是在 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>
<% } %>
重新部署然后查看
然后你重新部署你的博客,就可以在文章底部看到評論框了。支持表情和 markdown 語法。還是非常好用的,不過免費版好像每天有次數關系和總的空間大小限制。不過對于我這種自己的博客是完全夠用的。
添加文章的閱讀量
閱讀量同樣是用的 valine。
主題 _config.yml 文件內增加配置
在主題目錄下的 _config.yml 的文件中添加閱讀量配置:
valine:
appid: #Leancloud應用的appId
appkey: #Leancloud應用的appKey
verify: true #驗證碼
notify: true #評論回復提醒
placeholder: 這里留言。。 #評論框占位符
visitor: true #閱讀量統計
如果開啟了閱讀量統計
,Valine 會自動檢測
leancloud 應用中是否存在Counter
類,如果不存在會自動創建
,無需手動創建~
valine.ejs 文件中加入評論配置
然后添加 valine.ejs 文件,我放到了 layout/_plugins/ 文件夾下,文件的內容:
<div class="valine_comment"></div>
<!--載入js,在</body>之前插入即可-->
<!--Leancloud 操作庫:-->
<script src="http://cdn1.lncld.net/static/js/3.0.4/av-min.js"></script>
<!--Valine 的核心代碼庫-->
<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>
添加調用代碼
在你的文章的 ejs 文件中添加評論的代碼,我使用的這個主題是在 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會自動查找頁面中class
值為leancloud_visitors
的元素,獲取其id
為查詢條件。并將得到的值填充到其class
的值為leancloud-visitors-count
的子元素里。
重新部署然后查看
然后你就可以找到閱讀量的顯示了,每次刷新頁面,就會加1。