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

時間 2019-12-08

標籤 ghost 配置添加網站統計欄目網站開發简体版

原文原文鏈接

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

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

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

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

使用不蒜子

不蒜子的使用甚至比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當中。統計字段的顯示，則須要手動修改源碼，將數據顯示到本身想要顯示的位置上。url

顯示訪問人數

訪問人數的顯示，只須要將顯示代碼的id改成busuanzi_value_site_uv便可。至於顯示的位置，我選擇了網站的底部。修改代碼以下：spa

<!-- 修改：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。顯示位置仍然須要自定義，我選擇放在評論的上方。修改代碼以下：code

<!-- 修改：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的基礎配置，終於基本完成了。orm