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
总结
好啦，自己的博客也丰富起来了，有兴趣的同学也可以自己尝试下搭建属于自己的博客吧。
我的博客地址可点击原文进行浏览