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