搭建自己的技術部落格系列(五)hexo部落格接入busuanzi外掛,展示訪問量和網站執行時間
busuanzi計數指令碼
要使用不蒜子必須在頁面中引入busuanzi.js,目前最新版如下。
不蒜子可以給任何型別的個人站點使用,如果你是用的hexo,開啟themes/你的主題/layout/_partial/footer.ejs新增上述指令碼即可,當然你也可以新增到 header 中。
只需要複製相應的html標籤到你的網站要顯示訪問量的位置即可。您可以隨意更改不蒜子標籤為自己喜歡的顯示效果,內容參考第三部分擴充套件開發。根據你要顯示內容的不同,這分幾種情況。
1、顯示站點總訪問量
要顯示站點總訪問量,複製以下程式碼新增到你需要顯示的位置。有兩種演算法可選:
演算法a:pv的方式,單個使用者連續點選n篇文章,記錄n次訪問量。
例項效果參考:
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次閱讀量。
例項效果參考:
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
是否開啟訪問量統計功能(不蒜子)
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/,如需轉載,請註明出處,否則將追究法律責任。
相關文章
- 搭建自己的技術部落格系列(四)部落格接入百度統計,隨時瞭解你部落格的PV/UV
- 搭建自己的技術部落格系列(三)讓你的部落格擁有評論功能!
- hexo搭建個人網站部落格完全教程Hexo網站
- 技術人如何搭建自己的技術部落格
- Hexo+GitHub+阿里域名搭建自己部落格HexoGithub阿里
- 用自己的伺服器搭建HEXO部落格伺服器Hexo
- Hexo 搭建部落格Hexo
- 搭建Hexo部落格相簿Hexo
- 使用docker搭建nginx掛載hexo部落格DockerNginxHexo
- GitHub + Hexo搭建自己部落格(一) 基本內容GithubHexo
- hexo 部落格搭建筆記Hexo筆記
- Hexo部落格搭建記錄Hexo
- GitHub + Hexo搭建自己部落格(二) Next主題配置GithubHexo
- 使用 hexo 搭建個人部落格Hexo
- 利用docker快速搭建hexo部落格DockerHexo
- 整合github、hexo搭建部落格GithubHexo
- hexo搭建個人部落格心得Hexo
- 使用 Hexo 搭建靜態部落格Hexo
- 搭建自己的技術部落格系列(六)酷炫主題icarus常用配置整合版,快速搞定部落格首頁
- GitHub Pages + Hexo搭建個人部落格網站-github風格-採坑記錄GithubHexo網站
- Hexo部落格多端同步問題Hexo
- 手把手教你用Hexo搭建個人技術部落格Hexo
- 用Github Pages+Hexo搭建部落格之(八)Hexo部落格Next主題新增統計文章閱讀量(訪問量/瀏覽量/閱讀次數)功能GithubHexo
- Hexo部落格搭建+主題優化+外掛配置+常用操作+錯誤分析Hexo優化
- vps攜手hexo的部落格搭建之旅Hexo
- Hexo + Github 搭建靜態部落格(一)HexoGithub
- hexo+github搭建個人部落格HexoGithub
- Hexo-Node-Git搭建部落格HexoGit
- Git+Hexo搭建靜態部落格GitHexo
- Hexo+Github部落格搭建完全教程HexoGithub
- 基於Hexo搭建靜態部落格Hexo
- Hexo+Gitee搭建個人部落格HexoGitee
- 部落格網站網站
- 只需9步教你搭建自己的個人部落格 (Hexo+Github)HexoGithub
- 同為部落格,不同風格 ——Hexo另類搭建Hexo
- 開始編寫自己的技術部落格...
- Hexo部落格同步工具Hexo
- Hexo部落格備份Hexo