Hexo博客调用Valine最新评论
温馨提示:这篇文章已超过752天没有更新,请注意相关的内容是否还可用!
Hexo作为静态博客,访问速度还是挺快的,但是还是有局限性的,比如调用最新评论、根据点击量和评论数进行热门文章排序等等。最近几天,在icraus主题的魔改版amazing主题上看到了最新评论的调用,适用于valine和gitalk,就想把这个功能移植过来,于是就有了这样一个最初的版本:
感谢辣椒の酱提供的思路,还有水寒大佬的代码。
本文调用Valine最新评论的代码,是在水寒博客的评论调用的基础上,增加了一下功能:
评论者网址
评论定位链接
博主判断
评论头像显示 感觉没啥必要,但功能可以实现
9月4日更新:
修改为保姆级教程,附上修改位置图。见修改思路。
使用方法
引用文件
这个是leancloud sdk,必须在最开始调用,否则会报错
//cdn.jsdelivr.net/npm/leancloud-storage@3/dist/av-min.js
接下来就是valine.js的调用,这个主题都自带
//cdn.jsdelivr.net/npm/valine@1.4/dist/Valine.min.js
js核心代码
把功能代码封装成名为 newcomment() 的函数:
function newcomment() { function queryLeanCloud(k) { let root = this; let len = arguments.length; if (len == 1) { let notExist = new AV.Query("Comment"); notExist.doesNotExist('rid'); let isEmpty = new AV.Query("Comment"); isEmpty.equalTo('rid', ''); let q = AV.Query.or(notExist, isEmpty); if (k === '*') q.exists('url'); else q.equalTo('url', decodeURI(k)); q.addDescending('createdAt'); q.addDescending('insertedAt'); return q; } else { let ids = JSON.stringify(arguments[1]).replace(/(\[|\])/g, ''); let cql = `select * from ${root['config']['clazzName']} where rid in (${ids}) order by -createdAt,-createdAt`; return AV.Query.doCloudQuery(cql) } } var valine = new Valine({ el: '#valine_container_ba(因为主题已经有valine的这些参数了,这里随意填都行)', app_id: '换成自己的leancloud appid', app_key: '换成自己的', placeholder: '', serverURLs: '换成自己的api' }); //判断博主,heson改为自己的昵称 function bozhu(e){ if (e == "heson"){ nick = e + '[博主]' return nick; } else { return e } } //判断网址 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 } } //查询评论 valine.Q('*').limit(7).find().then(function (comments) { var hotComments = $("#hot-comments"); for (var i = 0; i < comments.length; i++) { if (i === 0) { console.log(comments[0]); } var nick = bozhu(comments[i]._serverData.nick); var content = comments[i]._serverData.comment; var newcontent = content.substring(0, 50).replace(/<[^>]+>/g,""); var url = comments[i]._serverData.url; var link = wangzhi(comments[i]._serverData.link); var updatedAt = timeago(comments[i].updatedAt); var commentId = '#' + comments[i].id; hotComments.append('<div class="card-comment-item"><div class="item-header-text"><a href="'+ link +'" target="_blank" rel="nofollow noopener noreferrer" class="newcomment" >' + nick + '</a> 发表于' + updatedAt + '</div><div class="item-text"><a href="' + url + commentId +'" rel="nofollow" style="color:#717171" class="comments-detail" >' + newcontent + '</a></div></div>'); } }); };
注意在判断博主的位置,需要改成自己评论的昵称。
在content.substring(0, 50)处是截断评论字数,这里设置为50个英文字符长度。
通过F12控制台可以看到,这里还能根据邮箱信息,调用头像参数,但我就没写上去了,感觉没什么必要,如图所示:
css 代码
每个评论底部加上分割线用于区分,发表时间淡化字体颜色,链接hover用的主题的颜色,要改的基本就这些,如果含有头像的话,可以设置鼠标悬停显示,这样效果也挺不错,动手能力强的小伙伴可以自己加:
.card-comment-item margin:10px 0 10px 0 border-bottom: 1px solid #e2dada padding-bottom:5px .item-header-text color:#9a9a9a .item-text margin-top:5px padding:0 a.newcomment{ font-weight:bold; color:#444; } a.newcomment:hover{ color:#36ac91!important; } a.comments-detail:hover{ color:#36ac91!important; }
修改思路
核心js代码加载themes\volantis\layout\_third-party\comments\valine\script.ejs
因为开启了pjax,newcomment()的调用放在themes\volantis\layout\_third-party\pjax\index.ejs
CSS直接丢在main.styl里了
主题配置里面要加上通用文本栏目,核心是id为hot-comments的div框,js要通过这个id进行渲染,代码如下:
newcomment: class: text display: [desktop] # [desktop, mobile] header: icon: far fa-comments title: 最新评论 url: content: - '<div id="hot-comments"></div>'