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

总结

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

我的博客地址可点击原文进行浏览

原文发布于微信公众号 - Bug生活2048(BugLife2048)

原文发表时间:2018-04-17

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏编程坑太多

『高级篇』docker之微服务业务分析(九)

1353
来自专栏数据之美

CPU 100% 异常排查实践与总结

1、问题背景 昨天下午突然收到运维邮件报警,显示数据平台服务器cpu利用率达到了98.94%,而且最近一段时间一直持续在70%以上,看起来像是硬件资源到瓶颈需要...

4498
来自专栏JAVA高级架构

浅谈高并发解决方案

摘要: 高并发一直是然个人头疼的问题;然而,其解决方式则是一套组合策略,由整体入手,逐步分析,逐步解决部分问题,进而解决所有问题;就像一支庞大的输水管道,不断的...

3636
来自专栏Android-JessYan

MVPArms官方快速组件化方案开源,来自5K star的信赖

原文地址: https://www.jianshu.com/p/f671dd76868f

1091
来自专栏web前端教室

前几天有个同学问我,“什么是响应式编程”?另,它和函数式编程有啥区别?

前几天有个同学问我,啥叫响应式编程?当时我正在讲课没顾得上回他。今天晚上仔细写个文章回复他,顺便我自己也学习一下。 响应式编程的英文名,Reactive Pro...

2606
来自专栏windealli

性能测试知识总结

(下面很多指标术语在不同的语境下可能会有不同的含义,在评价性能指标时,通常是指他们能够达到的最优值。比如吞吐量是指服务能承受的最大吞吐量。)

2912
来自专栏iOS Developer

Biosn收集的Git常见的错误解决方式--转自Bison的技术博客

1462
来自专栏smartguys

(七):C++分布式实时应用框架 2.0

版权声明:本文版权及所用技术归属smartguys团队所有,对于抄袭,非经同意转载等行为保留法律追究的权利!

1843
来自专栏吴生的专栏

水平分库分表的关键问题及解决思路

关系型数据库本身比较容易成为系统性能瓶颈,单机存储容量、连接数、处理能力等都很有限,数据库本身的“有状态性”导致了它并不像Web和应用服务器那么容易扩展。在互联...

48011
来自专栏kevindroid

JNI简介

1265

扫码关注云+社区

领取腾讯云代金券