您现在的位置是:首页 > 点滴分享 > 经验分享 网站首页点滴分享
Valine评论系统使用及评论置顶的实现
- 经验分享
- 2019年4月18日 20:26
- 2150已阅读
- 20
0、前言
之前由于博客托管服务器为DO云,网站域名一直没有备案,因此博客评论系统一直用的都是来必力;前段时间将博客迁移至华为云之后,同时也就将评论系统更换成了畅言(来必力初始化太慢了),可是畅言虽然功能强大,可是有一点个人觉得不太友好,就是评论需要登录(这也是小声逼逼)。最后选定了现在使用的Valine。
1、安装与使用
Valine,是一款基于Leancloud的快速、简洁且高效的无后端评论系统。特性如下:
- > 快速
- > 安全
- > Emoji
- > 无后端实现
- > MarkDown 全语法支持
- > 轻量易用(~15kb gzipped)
- > 文章阅读量统计 (v1.2.0+)
我们需要使用Valine,首先需要登录或者注册Leanloud,然后点击创建应用
创建应用之后,进入该应用,点击设置
>应用 Key
,就能看到APP ID
和APP KEY
了,参考下图:
获取到APP ID
和APP KEY
之后就可以开始使用Valine,html代码如下所示:
<head>
...
<script src="//cdn1.lncld.net/static/js/3.0.4/av-min.js"></script>
<script src='//unpkg.com/valine/dist/Valine.min.js'></script>
...
</head>
<body>
...
<div id="vcomments"></div>
<script>
new Valine({
el: '#vcomments',
appId: '<API_ID>',
appKey: '<API_Key>'
})
</script>
</body>
将代码插放在需要显示评论框的地方即可。效果如下:
这只是快速安装和使用,更具体的内容可以参考文章:Valine: 独立博客评论系统
2、置顶实现
2.1、添加置顶字段
Valine相对其他第三方评论工具而言确实更加简洁、方便,但是同样也有一些地方可以值得改进,例如评论置顶。
本站Valine评论系统的Valine.min.js
文件采用Deserts提供的:Valine EX,因此一些修改也是基于该文件进行。
博主本人对JS并不是很了解,因此更改Valine.mib.js
文件时可以说是各种寻找、各种尝试。在这里就直接说一下更改方案。首先,我们在LeanCloud
中点击存储
>Comment
>添加列
添加一个新的字段,如下所示:
当然也可以命名为其他名字,这个不重要。
2.2、r.select 返回字段修改
然后修改Valine.min.js
,因为这个是压缩了的,更改起来十分的不方便,我们可以利用一些工具将其格式化,然后再更改。
首先,我们可以使用使用ctrl+f
搜索r.select
,然后在后面添加“zhiding”
字段
这里添加的原因是,在select
中的字段名的值在请求时会被返回,因此我们需要添加zhiding
2.3、评论框初始化
然后就是置顶评论的初始化了,初始的Valine.min.js
对评论框处的初始化时,会新建一个<ul class="vlist">
,该页面所有的评论都会在该ul
中显示,因此我们需要添加一个新的ul
,用于置顶评论的放置。
同样通过ctrl+f
搜索来定位,搜索<ul class="vlist“
确定位置,然后在其前面新添加一个ul
,在这里需要注意一下,由于我们不改样式,因此新建的ul
依然有属性class=”vlist“
,所以我们添加id
属性来区别,具体如下图所示:
2.2、置顶评论显示
然后就是置顶评论的显示问题。同样利用ctrl+f
搜索r.innerHTML
来进行定位,仔细看一下代码可以发现这里是将获取到的评论通过html显示出来。修改r.innerHTML
,在自己觉得需要方式置顶
二字或者其他东西的地方,添加代码,参考如下所示:
图中代码为:
(e.get("zhding")?'<span style="font-size:12px;display:inline-block;line-height:20px;background:red;border-radius:2px;color:#fff;padding:0 5px;position:inherit;margin-left:10px"> 置顶</span>\n':'\n')
这样,若是置顶的评论便会带上额外的标签。然后,修改下图方框中的代码
我们在这里加一个判断,如果该条评论是置顶评论,即zhiding
字段为true
,则添加至我们在上面步骤添加的ul
中
代码为:
if (e.get("zhiding")){
for (var s = t.el.querySelector("#zhiding"), l = s.querySelectorAll("li"), c = r.querySelector(".vat"), u = r.querySelectorAll("a"), p = 0, d = u.length; p < d; p++) {
var h = u[p];
h && "at" != h.getAttribute("class") && (h.setAttribute("target", "_blank"),
h.setAttribute("rel", "nofollow"))
}
n ? s.insertBefore(r, l[0]) : s.appendChild(r);
var f = r.querySelector(".vcomment");
i(f),
L(c)
} else {
for (var s = t.el.querySelector("#vlist"), l = s.querySelectorAll("li"), c = r.querySelector(".vat"), u = r.querySelectorAll("a"), p = 0, d = u.length; p < d; p++) {
var h = u[p];
h && "at" != h.getAttribute("class") && (h.setAttribute("target", "_blank"),
h.setAttribute("rel", "nofollow"))
}
n ? s.insertBefore(r, l[0]) : s.appendChild(r);
var f = r.querySelector(".vcomment");
i(f),
L(c)
}
}
至此,Valine.min.js修改完毕。然后我们需要将一条评论设置为置顶,只需在LeanCloud
数据库中修改其zhiding
的值。最终效果如下:
版权声明:本文为博主原创文章,转载时请注明来源。https://blog.thinker.ink/passage/25/