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

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

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

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/

 

上一篇：ubuntu18.04安装mysql忘记密码无法登录解决办法

下一篇：使用instant.page提高网页加载速度

相关文章

文章评论

推荐文章

点击排行

标签云

友情链接

Top