valine topset 09/21/2020
最近更新于:

扩展功能

前两天搁置的笔记今天给记一下,说的两个功能很多评论程序都有自带,不过 Valine 没有只能自己改了。获取博主显示的思路很简单,直接在 Valine 写入元素之前加一个对昵称/邮件的判断即可,置顶程序则需要在 leancloud 后台添加一个列来判断(实现方式各不相同)

博主显示只更改了头像外框颜色区分

具体实现

博主评论

首先是判断博主评论,打开 valine.js.org 定位到 var C=function(e,n,r) 后创建判断函数(完成后会在博主头像添加一个 id 为 admin 的特征(否则返回 id 为 guset)然后自定义就行了,也可以参考下方置顶的方法生成一个“博主”的显示元素)

记得更换 adminNick 与 adminMail 值为自己的昵称和邮箱!

var isAdmin = (n,m) =>{
    let adminNick = n.match(/2broear/g),
        adminMail = m.match("xty@2broear.com");
    if (adminNick && adminMail) return "admin";
    else return "guest"
},
adCheck = isAdmin(e.get("nick"), e.get("mail"));

然后定位到 o = m.hide ? "": '<img class="vimg" 后为生成的 img 标签添加id

o = m.hide ? "": '<img id="' + adCheck + '" class="vimg"

评论置顶

然后是评论置顶,其实置顶这个东西实现的方式有很多种(可以参考:Valine评论系统使用及评论置顶的实现)也可以直接利用 leancloud 提供的查询排序来实现,有相似点也有不同点。

准备工作

要判断置顶需要在 leancloud 后台为 valine 的 Comment 创建一个列

依次选择 结构化数据—Comment—添加行

设定值随意(可以是布伦值,也可以是数字大小)完成后你可以先设置某个页面的评论 topset 值为 true,等待判断后生效

新增 topset 排序

定位到 i.addDescending("createdAt") 在这之前再 addDescending 一个我们控制台新建的 topset(前后看起来像这样)

...
i.addDescending("topset"),i.addDescending("createdAt"),i.addDescending("insertedAt")
...

接着再定位到 i=u.create("div" 添加以下代码即可(同样是上方的位置,因为具体写入元素都在这块)

var topset = e.get("topset"),
    isTop="",ifTop="";
topset!=undefined&&topset!=false ? (isTop=topset,ifTop='<span class="vtop"> 置顶评论 </span>') : false;
var i=u.create("div",{
    class: "vcard "+isTop,
    id: e.id
})

然后在后面找到 l='<span class="vsys">' + s.browser 在前面添加 ifTop 即可(完成后会在 vcard 元素添加置顶为 true 的 class 并在创建评论时将该 vcard 置顶并显示自定义的“元素”)

l=ifTop+'<span class="vsys">' + s.browser

其他

通过获取指定 id/class 即可为 博主/置顶 创建不同的样式写入即可。

已知 bug

当置顶评论为“楼中楼”时无效

之前的排序看起来不太对发现原来少写了几个步骤..

下次更新内容:文章页面海报生成思路及方案


以上,有问题评论区留言。