r1ngs's blog

Valine的评论和阅读量统计功能配置

2019-01-04

最近差不多把试考完了,终于有时间来配一下自己的博客了,由于最近比较喜欢绿色,所以选了这套主题,就是这个主题的作者貌似2017年就跑路不维护了有点难受= =

看着别人的blog都有评论和阅读量,于是我也决定弄一个,最终我选择了用Valine来实现评论和统计阅读量,弄了一天也踩了很多坑,决定发出来分享给大家

Valine简介

Valine官网

Valine 诞生于2017年8月7日,是一款基于Leancloud的快速、简洁且高效的无后端评论系统。

理论上支持但不限于静态博客,目前已有HexoJekyllTypechoHugo 等博客程序在使用Valine。

评论功能配置

官网里已经有快速开始的步骤,但是说明不够详细,导致有的萌新抓不着头脑,另外hexo的新版next主题已经内置Valine

next主题的可以看这篇文章

但是我的主题作者早就不更新了,所以是不支持的,那么就只能自己手动改了

HTML和JS代码配置

第一个遇到的问题就是步骤里面的html代码在哪里加,这里每个主题都不同,我用自己的主题举例子

主题下有一个layout文件夹里面有一个page.ejs文件,也就是模板的渲染文件,HTML应该加到加到这里

两个引入外部js的script标签我是直接放到了最上面第1,2行

1
2
<script src='//unpkg.com/valine/dist/Valine.min.js'></script>
<script src="//cdn1.lncld.net/static/js/3.0.4/av-min.js"></script>

然后在原来增加评论的地方加上一个valine的判断

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<% if (theme.comment === 'gitment') { %>
<!-- Gitment START -->
<div id="comments"></div>
<!-- Gitment END -->
<% } else if (theme.comment === 'uyan') { %>
<!-- UY START -->
<div id="uyan_frame"></div>
<script type="text/javascript" src="http://v2.uyan.cc/code/uyan.js"></script>
<!-- UY END -->
<% } else if (theme.comment === 'disqus') { %>
<!-- Disqus START -->
<div id="disqus_thread"></div>
<!-- Disqus END -->
<% }
else if (theme.comment === 'valine')
{ %>
<!-- valine START -->
<div id="vcomments"></div>
<!-- valine END -->
<% }
else { %>
<!-- No Comment -->
<% } %>

在最后面加上js代码

1
2
3
4
5
6
7
8
9
10
11
12
13
<script>
new Valine({
el: '#vcomments',
appId: '你的id',
appKey: '你的key',
notify: false,
verify: false,
avatar: 'mp',
placeholder: '输入你的邮箱,我会在看到后尽快发邮件回复的哦。ヾノ≧∀≦)o',
pageSize: 12,
visitor: true // 阅读量统计
})
</script>

最后在主题的config里面做相同的配置

1
2
3
4
5
6
7
8
9
10
11
12
comment: valine

valine:
enable: true //打开valine评论功能
appid: 你的id
appkey: 你的key
notify: false //邮件提醒
verify: false //评论时是否有验证码,需要在Leancloud 设置->安全中心 中打开
placeholder: 输入你的邮箱,我会在看到后尽快发邮件回复的哦。ヾノ≧∀≦)o //评论框默认显示
avatar: mp //评论者的头像,
pageSize: 12
visitor: true // 阅读量统计

这样的话就算是配置好了,评论功能就可以用了,如果不能的话,请查看前端源代码检查是否正常生成了这三处代码

阅读量统计

官方配置文档

这个配置比较简单,主要就是有一个坑点

首先如果你已经按照我上面说的默认设置visitor为true了的话

那么只需要在刚才的page.ejs找个合适的位置,比如你的评论区的上方插入这段代码就可以了

1
2
3
4
<span id='/<%= page.path %>' class="leancloud-visitors" data-flag-title="<%= page.title %>">
<em class="post-meta-item-text">阅读量 </em>
<i class="leancloud-visitors-count">1000000</i>
</span>

注意一定要配置好你的id的值,比如这篇文章的url是:https://r1ngs.top/2019/01/04/Essay-Valine配置/

那么id的值只能是:/2019/01/04/Essay-Valine配置/

多一个、少一个斜线都不行,可以参考我的配置,也可以参看hexo的变量

如果配置好了的话是会自动创建Counter类的,如果没有自动创建,那么极大的可能是你的id没有正确配置

结语

至此,Valine配置也就结束了,真的非常方便和简单

特别感谢官方群里给过我帮助的大佬~

如果还是有小伙伴配置失败的话,可以留下邮箱在下面评论回复,我看到后会尽快用邮件方式回复你的

Tags: 随笔

1000000