Hexo博客配置twikoo评论系统并调用最新评论
温馨提示:这篇文章已超过774天没有更新,请注意相关的内容是否还可用!
Twikoo是基于腾讯云开发的一个简洁、安全、无后端的静态网站评论系统。具有免费搭建、注重隐私安全、支持邮箱和微信通知、支持反垃圾评论、支持调用最新评论、支持评论点赞等特点。
我为什么选择从valine转为twikoo?
解决了一个痛点:
在哔哔页面下实现了在线翻页
之前哔哔页面因为和valine的冲突导致不能在线翻页,现在换了twikoo之后,可以完美翻页了。
同时:
搭建方便(官方文档写的很清楚,一步一步来即可)
后台配置简单(可以说把评论后台搬到了前端,不用像valine那样在leancloud里面部署valine-server)
这两个特点使得配置 Twikoo 非常适合新手。
最新评论的调用方法
基本的搭建官网已经讲解的很清楚了,在这里只记录twikoo最新评论的调用函数。
更新
12月5日:(twikoo v0.2.9 新增了avatar和relativeTime相对评论时间)不用再调用友好地显示时间函数和头像获取函数
效果图
核心js
//判断网址,防止访客网址不写http和https function wangzhi(e){ http = e.slice(0,4) https = e.slice(0,5) if (http == "http" || https == "https" ){ return e } else if (e == "" || e == null || e == undefined){ return e } else { e = 'http://'+ e return e } } //调用twikoo最新评论主函数 function newcomment() { twikoo.getRecentComments({ envId: '你的腾讯云环境id', // 环境 ID pageSize: 7, // 获取多少条,默认:10,最大:100 includeReply: false // 是否包括最新回复,默认:false }).then(function (res) { console.log(res); var hotComments = $("#hot-comments"); for (var i = 0; i < res.length; i++) { if (i === 0) { console.log(res[0]); } var nick = res[i].nick;//访客姓名 var content = res[i].commentText;//评论内容 var newcontent = content.substring(0, 50); //字数截取后评论内容 var url = res[i].url;//文章链接 var avatar = res[i].avatar;//评论者头像 var link = wangzhi(res[i].link);//评论者网址 var updatedAt = res[i].relativeTime;//评论时间 var commentId = '#' + res[i].id;//评论id hotComments.append('<li class="px1 pb2 flex items-center"><img style="width: 40px;height:40px" class="circle mx1 listavatar" src="' + avatar + '"><div class="w100"><div class="flex justify-between"><div class="h6 listauthor overflow-hidden" title="' + nick + '"><a target="_blank" rel="noopener external nofollow noreferrer" href="' + link + '">' + nick + '</a></div><span class="h6 mr1 listdate wenzi hang1">' + updatedAt + '</span></div> <a href="' + url + commentId + '"><div class="h5 list-comcontent overflow-hidden">' + newcontent + '</div></a></div></li>'); } }).catch(function (err) { console.error(err); }); } $(function () { newcomment();//调用newcomment });
其中:
<li class="px1 pb2 flex items-center"><img style="width: 40px;height:40px" class="circle mx1 listavatar" src="' + mail + '"><div class="w100"><div class="flex justify-between"><div class="h6 listauthor overflow-hidden" title="' + nick + '"><a target="_blank" rel="noopener external nofollow noreferrer" href="' + link + '">' + nick + '</a></div><span class="h6 mr1 listdate wenzi hang1">' + updatedAt + '</span></div> <a href="' + url + commentId + '"><div class="h5 list-comcontent overflow-hidden">' + newcontent + '</div></a></div></li>
为每条评论的
代码,主要调用了nick、mail、newcontent、link、updatedAt、commentId等数据。
HTML和CSS样式可按需自行修改。
完毕!
多说一句
开启了pjax的小伙伴,在pjax回调函数里面记得加上newcomment();,防止最新评论刷不出来。