Ghost配置4——添加網站統計

作爲一個獨立博客,即使沒有人欣賞,統計功能也應該像模像樣的做起來。

在Ghost博客上添加了評論組件後見這裏,發現在1.20版本後Valine框架還添加了訪問統計的功能,順便就參照着說明一頓猛如虎的操作。

然而一直都沒有成功。參照着官網的說明反覆檢查,確認和說明書上寫的一樣。但在網頁刷新後,Valine並沒有主動去leancloud上創建Counter對象。即使手動創建了,也沒有任何效果。

無奈之下,另外找到了一個統計組件不蒜子,使用方法也非常簡單。一共就兩行代碼,一行導入js,一行顯示統計字段。

使用不蒜子

不蒜子的使用甚至比Valine更簡單。

<script async src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script>
<span id="busuanzi_container_site_pv">本站總訪問量<span id="busuanzi_value_site_pv"></span>次</span>

js的引入可以通過Ghost的代碼注入功能注入到header當中。統計字段的顯示,則需要手動修改源碼,將數據顯示到自己想要顯示的位置上。

顯示訪問人數

訪問人數的顯示,只需要將顯示代碼的id改爲busuanzi_value_site_uv即可。至於顯示的位置,我選擇了網站的底部。修改代碼如下:

<!-- 修改:ghost/content/themes/casper/default.hbs -->
<html>
  ...
  <footer class="site-footer outer">
    <div class="site-footer-content inner">
      <section class="copyright"><a href="{{@blog.url}}">{{@blog.title}}</a> &copy; {{date format="YYYY"}}</section>
      <span id="busuanzi_container_site_uv">總訪客數&nbsp;<span id="busuanzi_value_site_uv"></span></span>
      <nav class="site-footer-nav">
        <a href="{{@blog.url}}">最近更新</a>
      </nav>
    </div>
  </footer>
  ...
</html>

顯示博文閱讀數

文章的閱讀數,則需要將顯示代碼的id改爲busuanzi_page_pv。顯示位置仍然需要自定義,我選擇放在評論的上方。修改代碼如下:

<!-- 修改:ghost/content/themes/casper/post.hbs -->
<html>
  ...
  <section class="post-full-content">
    <div class="post-content">
      {{content}}
    </div>
    <span id="busuanzi_container_page_pv" style="font-size: 1.5rem">閱讀量&nbsp;<span id="busuanzi_value_page_pv"></span></span>
    <div id="vcomments"></div>
  </section>
  ...
</html>

如上設置以後,再刷新看看,統計代碼可以正常更新。Ghost的基礎配置,終於基本完成了。

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