Ghost博客评论、统计、打赏接入

今天有空又鼓捣了下自己的博客,接入了评论、统计和打赏,这里简单记录下接入过程。

插件选择

首先是选择问题,对于后端的我来说,在ghost基础赏进行二次开发显然有点难度,只能选择第三方插件来丰富自己的代码。

真希望ghost能快点迭代更新,多开发些常用的功能。

首先是页面统计,虽然自己的博客已经埋了百度统计的代码,便于分析(当然,自己的小博客的流量也没什么好分析的)。

但想反应到博客本身的页面上,百度统计显然不是很满足需求且繁琐。

网上找了一会发现不蒜子还是满足需求的,接入也比较简单,于是就采用它了。

至于评论和打赏,貌似国内畅言是用的最多的了,于是就选择它了。

统计接入

统计一般接两种统计方式,一种是网站的总请求量和访问总人数,另一个就是单篇文章的阅读数。

首先到ghost后台在Blog Header引入相印的js:

<script async src="//dn-lbstatics.qbox.me/busuanzi/2.3/busuanzi.pure.mini.js">
</script>

image

接下来就需要修改代码了,总的访问量一般放在页脚,可以找到你的主题,一般在/var/www/ghost/content/themes,在default.hbs文件下合适的位置加入统计代码:

<span id="busuanzi_container_site_pv">
    本站总访问量<span id="busuanzi_value_site_pv"></span>次
</span>

<span id="busuanzi_container_site_uv">
  本站访客数<span id="busuanzi_value_site_uv"></span>人次
</span>

这样就ok了,不出意外,你就能直接看效果了。

至于文章阅读量的接入其实差不多,只是你要找对地方,通常主题中文章模板是post.hbs,找到合适的地方加入下面代码:

<span id="busuanzi_container_page_pv">
  本文总阅读量<span id="busuanzi_value_page_pv"></span>次
</span>

可以看下我设置的效果:

image

评论接入

首先在登陆畅言官网,没有就注册一个,进入后台,有详细的设置和文档介绍。

其实接入还是挺简单的,找对应的地方插入相应的代码就可以了。

评论一般放在文章的最下面,还是修改post.hbs模板,加入下面代码:

<!--PC版-->
<div id="SOHUCS" sid="请将此处替换为配置SourceID的语句"></div>
<script charset="utf-8" type="text/javascript" src="https://changyan.sohu.com/upload/changyan.js" ></script>
<script type="text/javascript">
window.changyan.api.config({
appid: 'cyts5TyrV',
conf: 'prod_b46a3a7efe0abcff2fff5e52e20fa7d5'
});
</script>

这里注意的是你的SID,如果有点基础可以配置下,官网的解释是:

畅言默认通过文章url进行评论框匹配,因此,你可能会遇到以下两种问题:

1)同一文章显示不同评论框:同一篇文章有多个URL地址,但每个页面显示不同的评论框;
2)评论错乱:文章链接发生变动导致评论错乱

如果你不想这么麻烦不配置也可以,保证对应的url唯一且不修改就可以了。

到这里,评论也就接好了,可以看下效果:

image

打赏接入

在畅言的实验室里有打赏模块的接入,也是找对应的地方放置对应的代码就可以了。

依旧在post.hbs模板中,到对应的位置,加入以下代码:

<section class="post ">
<div style="text-align:center">
<!-- 代码1:放在页面需要展示的位置  -->
<!-- 如果您配置过sourceid,建议在div标签中配置sourceid、cid(分类id),没有请忽略  -->
<div id="cyReward" role="cylabs" data-use="reward"></div>
<!-- 代码2:用来读取评论框配置,此代码需放置在代码1之后。 -->
<!-- 如果当前页面有评论框,代码2请勿放置在评论框代码之前。 -->
<!-- 如果页面同时使用多个实验室项目,以下代码只需要引入一次,只配置上面的div标签即可 -->
<script type="text/javascript" charset="utf-8" src="https://changyan.itc.cn/js/lib/jquery.js"></script>
<script type="text/javascript" charset="utf-8" src="https://changyan.sohu.com/js/changyan.labs.https.js?appid=cyts5TyrV"></script>
</div>
</section>

这样就可以在前台看下效果了。

image

总结

好啦,自己的博客也丰富起来了,有兴趣的同学也可以自己尝试下搭建属于自己的博客吧。

作者:玄冰
欢迎关注我的微信公众号和博客小程序
欢迎关注我的公众号 欢迎关注我的公众号