搭建自己的技術部落格系列(五)hexo部落格接入busuanzi外掛,展示訪問量和網站執行時間

a724888發表於2019-09-14

busuanzi計數指令碼

在這裡插入圖片描述

busuanzi官方指引

一、安裝指令碼(必選)

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

不蒜子可以給任何型別的個人站點使用,如果你是用的hexo,開啟themes/你的主題/layout/_partial/footer.ejs新增上述指令碼即可,當然你也可以新增到 header 中。

二、安裝標籤(可選)

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

1、顯示站點總訪問量
要顯示站點總訪問量,複製以下程式碼新增到你需要顯示的位置。有兩種演算法可選:

演算法a:pv的方式,單個使用者連續點選n篇文章,記錄n次訪問量。

本站總訪問量 次 演算法b:uv的方式,單個使用者連續點選n篇文章,只記錄1次訪客數。
本站訪客數 人次 如果你是用的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

我的配置

1、配置是否開啟不蒜子訪問量統計功能

在themes/icarus/_config.yml新增屬性

是否開啟訪問量統計功能(不蒜子)
busuanzi:
enable: true

2、引入不蒜子並新增站點訪問量

在themes/icarus/layout/footer.ejs末尾新增如下程式碼
<% if (theme.busuanzi && theme.busuanzi.enable){ %>
        <!-- 不蒜子統計 -->
        <span id="busuanzi_container_site_pv">
                本站總訪問量<span id="busuanzi_value_site_pv"></span>次
        </span>
        <span class="post-meta-divider">|</span>
        <span id="busuanzi_container_site_uv" style='display:none'>
                本站訪客數<span id="busuanzi_value_site_uv"></span>人
        </span>
        <script async src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script>
  <% } %>

3、新增文章訪問量
在themes/icarus/layout/common/article.ejs開頭新增如下程式碼
事實上,這段程式碼我並不確定是否能用
在這裡插入圖片描述
由於icarus主題的配置比較特殊,有些配置項我也不太確定,於是都配置了上去
在這裡插入圖片描述

網站上線時間展示

在這裡插入圖片描述

效果展示

看看我部落格最下方的展示效果吧:how2playlife.com
在這裡插入圖片描述


來自 “ ITPUB部落格 ” ,連結:http://blog.itpub.net/69906029/viewspace-2657007/,如需轉載,請註明出處,否則將追究法律責任。

相關文章