您现在的位置是:首页 > 点滴分享 > 经验分享 网站首页点滴分享

Valine评论系统使用及评论置顶的实现

简介最近将博客的评论系统改成了Valine,同时修改代码为该系统添加上了置顶功能。

0、前言


之前由于博客托管服务器为DO云,网站域名一直没有备案,因此博客评论系统一直用的都是来必力;前段时间将博客迁移至华为云之后,同时也就将评论系统更换成了畅言(来必力初始化太慢了),可是畅言虽然功能强大,可是有一点个人觉得不太友好,就是评论需要登录(这也是小声逼逼)。最后选定了现在使用的Valine


1、安装与使用


Valine,是一款基于Leancloud的快速、简洁且高效的无后端评论系统。特性如下:

  • > 快速
  • > 安全
  • > Emoji
  • > 无后端实现
  • > MarkDown 全语法支持
  • > 轻量易用(~15kb gzipped)
  • > 文章阅读量统计 (v1.2.0+)

我们需要使用Valine,首先需要登录或者注册Leanloud,然后点击创建应用 创建应用

创建应用之后,进入该应用,点击设置>应用 Key,就能看到APP IDAPP KEY了,参考下图:

参考图片

获取到APP IDAPP 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/

 

文章评论

Top