作爲一個獨立博客,即使沒有人欣賞,統計功能也應該像模像樣的做起來。
在Ghost博客上添加了評論組件後見這裏,發現在1.20版本後Valine框架還添加了訪問統計的功能,順便就參照着說明一頓猛如虎的操作。
然而一直都沒有成功。參照着官網的說明反覆檢查,確認和說明書上寫的一樣。但在網頁刷新後,Valine並沒有主動去leancloud上創建Counter對象。即使手動創建了,也沒有任何效果。
無奈之下,另外找到了一個統計組件不蒜子,使用方法也非常簡單。一共就兩行代碼,一行導入js,一行顯示統計字段。
使用不蒜子
不蒜子的使用甚至比Valine更簡單。
<script async src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script>
<span id="busuanzi_container_site_pv">本站總訪問量<span id="busuanzi_value_site_pv"></span>次</span>
js的引入可以通過Ghost的代碼注入功能注入到header當中。統計字段的顯示,則需要手動修改源碼,將數據顯示到自己想要顯示的位置上。
顯示訪問人數
訪問人數的顯示,只需要將顯示代碼的id改爲busuanzi_value_site_uv即可。至於顯示的位置,我選擇了網站的底部。修改代碼如下:
<!-- 修改:ghost/content/themes/casper/default.hbs -->
<html>
...
<footer class="site-footer outer">
<div class="site-footer-content inner">
<section class="copyright"><a href="{{@blog.url}}">{{@blog.title}}</a> © {{date format="YYYY"}}</section>
<span id="busuanzi_container_site_uv">總訪客數 <span id="busuanzi_value_site_uv"></span></span>
<nav class="site-footer-nav">
<a href="{{@blog.url}}">最近更新</a>
</nav>
</div>
</footer>
...
</html>
顯示博文閱讀數
文章的閱讀數,則需要將顯示代碼的id改爲busuanzi_page_pv。顯示位置仍然需要自定義,我選擇放在評論的上方。修改代碼如下:
<!-- 修改:ghost/content/themes/casper/post.hbs -->
<html>
...
<section class="post-full-content">
<div class="post-content">
{{content}}
</div>
<span id="busuanzi_container_page_pv" style="font-size: 1.5rem">閱讀量 <span id="busuanzi_value_page_pv"></span></span>
<div id="vcomments"></div>
</section>
...
</html>
如上設置以後,再刷新看看,統計代碼可以正常更新。Ghost的基礎配置,終於基本完成了。