github博客加訪問量標籤

普通用戶只需兩步走:一行腳本+一行標籤,搞定一切。追求極致的用戶可以進行任意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

和諧多了!

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章