Hexo 博客配置 twikoo 评论系统，并调用最新评论 - 黑石博客

感谢 iMaeGoo 大佬的 Twikoo 。

Twikoo 评论系统是什么？

Twikoo是基于腾讯云开发的一个简洁、安全、无后端的静态网站评论系统。具有免费搭建、注重隐私安全、支持邮箱和微信通知、支持反垃圾评论、支持调用最新评论、支持评论点赞等特点。

我为什么选择从valine转为twikoo？

解决了一个痛点：

在哔哔页面下实现了在线翻页

之前哔哔页面因为和valine的冲突导致不能在线翻页，现在换了twikoo之后，可以完美翻页了。

同时：

搭建方便（官方文档写的很清楚，一步一步来即可）
后台配置简单（可以说把评论后台搬到了前端，不用像valine那样在leancloud里面部署valine-server）

这两个特点使得配置 Twikoo 非常适合新手。

效果图

核心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>

为每条评论的<li>代码，主要调用了nick、mail、newcontent、link、updatedAt、commentId等数据。

HTML和CSS样式可按需自行修改。

完毕！

多说一句

开启了pjax的小伙伴，在pjax回调函数里面记得加上newcomment();，防止最新评论刷不出来。

Twikoo 评论系统是什么？

我为什么选择从valine转为twikoo？

最新评论的调用方法

更新

效果图

核心js

多说一句