普通用戶只需兩步走:一行腳本+一行標籤,搞定一切。追求極致的用戶可以進行任意DIY。
一、安裝腳本(必選)
要使用不蒜子必須在頁面中引入busuanzi.js,目前最新版如下。
<script async src="//dn-lbstatics.qbox.me/busuanzi/2.3/busuanzi.pure.mini.js">
</script>
不蒜子可以給任何類型的個人站點使用,如果你是用的hexo,打開themes/你的主題/layout/_partial/footer.ejs添加上述腳本即可,當然你也可以添加到 header 中。
二、安裝標籤(可選)
只需要複製相應的html標籤到你的網站要顯示訪問量的位置即可。您可以隨意更改不蒜子標籤爲自己喜歡的顯示效果,內容參考第三部分擴展開發。根據你要顯示內容的不同,這分幾種情況。
1、顯示站點總訪問量
要顯示站點總訪問量,複製以下代碼添加到你需要顯示的位置。有兩種算法可選:
算法a:pv的方式,單個用戶連續點擊n篇文章,記錄n次訪問量。
<span id="busuanzi_container_site_pv">
本站總訪問量<span id="busuanzi_value_site_pv"></span>次
</span>
算法b:uv的方式,單個用戶連續點擊n篇文章,只記錄1次訪客數。
<span id="busuanzi_container_site_uv">
本站訪客數<span id="busuanzi_value_site_u</span>人次
</span>
是用的hexo,打開themes/你的主題/layout/_partial/footer.ejs添加即可。
實例效果參考:
http://liam0205.me
http://gameknife.github.io
http://read.mobi
http://pgqlife.info
http://sdxy0506.github.io
http://www.gcrimson.com
http://libk.net
http://ztyoung.me
http://blog.itmyhome.com
2、顯示單頁面訪問量
要顯示每篇文章的訪問量,複製以下代碼添加到你需要顯示的位置。
算法:pv的方式,單個用戶點擊1篇文章,本篇文章記錄1次閱讀量。
本文總閱讀量次
代碼中文字是可以修改的,只要保留id正確即可。
實例效果參考:
http://dbarobin.com/2015/04/14/operation-and-maintenance-engineer-tips
http://blog.jamespan.me/2015/05/06/mvn-incremental-compilation
http://cubernet.cn/blog/optimization-3
注意:不蒜子爲保持極簡,暫不支持在站點文章摘要列表中(如首頁)逐個顯示每篇文章的閱讀次數,如果您非常需要這一功能,可以留言。根據需要程度再考慮開發相應的功能。
3、顯示站點總訪問量和單頁面訪問量
你懂的吧,上面兩種標籤代碼都安裝。
實例效果參考:
http://cubernet.cn/blog/swift-1
http://lvzejun.cn/2015/03/31/ubuntu-software
http://www.lvzejun.cn/2015/04/13/libvirt1md
4、只計數不顯示
只安裝腳本代碼,不安裝標籤代碼。
至此,不蒜子已經可以正常運行,如果你還要自定義一些內容或有疑問,請繼續閱讀。
附錄:擴展開發(自定義)
不蒜子之所以稱爲極客的算子,正是因爲不蒜子自身只提供標籤+數字,至於顯示的style和css動畫效果,任你發揮。
busuanzi_value_site_pv 的作用是異步回填訪問數,這個id一定要正確。
busuanzi_container_site_pv的作用是爲防止計數服務訪問出錯或超時(3秒)的情況下,使整個標籤自動隱藏顯示,帶來更好的體驗。這個id可以省略。
因此,你也可以使用極簡模式:
本站總訪問量<span id="busuanzi_value_site_pv"></span>
次
本站訪客數<span id="busuanzi_value_site_uv"></span>
人次
本文總閱讀量<span id="busuanzi_value_page_pv"></span>
次
或者個性化一下:
Total <span id="busuanzi_value_site_pv"></span> views.
您是xxx的第<span id="busuanzi_value_site_uv"></span>個小夥伴
<span id="busuanzi_value_page_pv"></span> Hits
1、我只要統計不顯示?
只引入busuanzi.js,不引入顯示標籤即可。
2、你的標籤太醜了,我想美化一下可以麼?
可以的,您可以用自己站點的css進行控制,只要內層span的id正確以便回填訪問次數即可,甚至標籤都可以不是span。
3、中文字體太醜了,我的主題不適合?
您可以將本站總訪問量xxx次改成view xxx times等英文以獲得更和諧的顯示效果。
4、在訪問量數據未取回來之前,我不想讓頁面顯示爲諸如“本站總訪問量 次”,顯得太low,怎麼辦?
只需要如下css,不蒜子執行完畢會自動將標籤顯示出
<span id="busuanzi_container_site_pv" style='display:none'>
本站總訪問量<span id="busuanzi_value_site_pv"></span>次
</span>
欣賞一下這位小夥伴的做法,請戳看效果:http://blog.jamespan.me/2015/05/13/the-jump-guide
右鍵看下源碼,沒加載出來前就顯示個菊花轉轉轉:
首先,你要引入font-awesome字體:
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
或`
<link rel="stylesheet" href="//cdn.bootcss.com/font-awesome/4.3.0/css/font-awesome.min.css">
其次,修改不蒜子標籤:
<span id="busuanzi_value_page_pv"><i class="fa fa-spinner"></i></span> Hits
或(旋轉效果)
<span id="busuanzi_value_page_pv"><i class="fa fa-spinner fa-spin"></i></span> Hits
和諧多了!