靜態網站使用不蒜子顯示瀏覽量


本文轉載自不蒜子不如

靜態網站建站現在有很多快速的技術和平台,但靜態是優點也有缺點,由於是靜態的,一些動態的內容如評論、計數等等模塊就需要借助外來平台,評論有“多說”,計數有“不蒜”

>“不蒜子”與百度統計谷歌分析等有區別:“不蒜子”可直接將訪問次數顯示在您在網頁上(也可不顯示);對於已經上線一段時間的網站,“不蒜子”允許您初始化首次數據。。
普通用戶據只需兩步走:一行腳本+一行標簽,搞定一切

安裝腳本(必選)

要使用不蒜子必須在頁面中引入busuanzi.js,目前最新版如下。


不蒜子可以給任何類型的個人站點使用,如果你是用的hexo,打開themes/你的主題/layout/_partial/footer.ejs添加上述腳本即可,當然你也可以添加到 header 中。

安裝標簽(可選)

只需要復制相應的html標簽到你的網站要顯示訪問量的位置即可。您可以隨意更改不蒜子標簽為自己喜歡的顯示效果,內容參考第三部分擴展開發。根據你要顯示內容的不同,這分幾種情況。

顯示站點總訪問量

要顯示站點總訪問量,復制以下代碼添加到你需要顯示的位置。有兩種算法可選:

算法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_uv"></span>人次
</span>

>如果你是用的hexo,打開themes/你的主題/layout/_partial/footer.ejs添加即可。

顯示單頁面訪問量

要顯示每篇文章的訪問量,復制以下代碼添加到你需要顯示的位置。

算法:pv的方式,單個用戶點擊1篇文章,本篇文章記錄1次閱讀量。

<span id="busuanzi_container_page_pv">
本文總閱讀量<span id="busuanzi_value_page_pv"></span>次
</span>

顯示站點總訪問量和單頁面訪問量

你懂的吧,上面兩種標簽代碼都安裝。

只計數不顯示

只安裝腳本代碼,不安裝標簽代碼。

至此,不蒜子已經可以正常運行,如果你還要自定義一些內容或有疑問,請繼續閱讀。

附錄:擴展開發(自定義)

不蒜子之所以稱為極客的算子,正是因為不蒜子自身只提供標簽+數字,至於顯示的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,不引入顯示標簽即可。

  1. 你的標簽太丑了,我想美化一下可以么?

可以的,您可以用自己站點的css進行控制,只要內層span的id正確以便回填訪問次數即可,甚至標簽都可以不是span。

  1. 中文字體太丑了,我的主題不適合?

您可以將本站總訪問量xxx次改成view xxx times等英文以獲得更和諧的顯示效果。

  1. 在訪問量數據未取回來之前,我不想讓頁面顯示為諸如“本站總訪問量 次”,顯得太low,怎么辦?

只需要如下css,不蒜子執行完畢會自動將標簽顯示出來,其他以此類推:

<span id="busuanzi_container_site_pv" style="display:none;">
    本站總訪問量<span id="busuanzi_value_site_pv"></span>次
</span>

上面的做法還是很low?!欣賞一下這位小伙伴的做法,請戳看效果:

http://blog.jamespan.me/2015/05/13/the-jump-guide

右鍵看下源碼,沒加載出來前就顯示個菊花轉轉轉:

首先,你要引入font-awesome字體:

其次,修改不蒜子標簽:

<span id="busuanzi_value_page_pv"><i class="fa fa-spinner"></i></span> Hits
或(旋轉效果)
<span id="bu

和諧多了!

5、我的網站已經運行一段時間了,想初始化訪問次數怎么辦?

請先注冊登錄,自行修改閱讀次數。

如果您願意捐助不蒜子請戳 http://ibruce.info/about,掃描支付寶二維碼輸入任意金額打賞。

更新日志:

  • 1). 2015-04-04:不蒜子1.0 正式發布,極簡的網站計數器服務。

  • 2). 2015-04-24:不蒜子2.0 正式發布,區分pv/uv的統計方式,統計更精准,滿足更多需求。

  • 3). 2015-05-18:不蒜子2.3 正式發布,去掉對jQuery的依賴,異步化執行,速度更快。
    ">


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM