作为一个独立博客,即使没有人欣赏,统计功能也应该像模像样的做起来。
在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> © {{date format="YYYY"}}</section>
<span id="busuanzi_container_site_uv">总访客数 <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">阅读量 <span id="busuanzi_value_page_pv"></span></span>
<div id="vcomments"></div>
</section>
...
</html>
如上设置以后,再刷新看看,统计代码可以正常更新。Ghost的基础配置,终于基本完成了。
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。