简介

最近看到 Butterfly 主题新增了最新评论组件功能。发现自己使用了自托管的 Artalk 导致无法使用,就想把这个功能移植过来,于是就有了这样一个最初的版本

在原有的功能基础上,增加以下功能:

  • 评论头像默认识别QQ头像(判断是否为QQ邮箱)

新增 Artalk 最新评论获取

打开 /themes/Butterfly/layout/includes/third-party/newest-comments ,新建名为 artalk.pug 的文件

复制以下代码,粘贴并保存

script(src="https://cdn.jsdelivr.net/npm/blueimp-md5@2.17.0/js/md5.min.js")
script.
window.addEventListener('load', () => {
const changeContent = (content) => {
if (content === '') return content

content = content.replace(/<[^>]+>/g,"") // remove html tag
content = content.replace(/(http(s?):)([/|.|\w|\s|-])*\.(?:jpg|jpeg|gif|png|webp)/g, '') // remove image link
content = content.replace(/(\b(https?|ftp|file):\/\/[-A-Z0-9+&@#\/%?=~_|!:,.;]*[-A-Z0-9+&@#\/%=~_|])/gi, '') // remove url

if (content.length > 150) {
content = content.substring(0,150) + '...'
}
return content
}

const getArtalkIssues = () => {
let artalkArray = []
$.getJSON('!{theme.newest_comments.artalk.dataUrl}', (data) => {
data.sort(function(x,y){return (x.id < y.id) ? 1 : -1})
$.each(data, (index, item) => {

artalkArray.push({
'content': changeContent(item.content),
'nick': item.nick,
'mail': item.email,
'url': item.page_key,
'date': item.date
})
})
saveToLocal.set('artalk-newest-comments', JSON.stringify(artalkArray), 10/(60*24))
generateHtml(artalkArray)
})
}

const getAllIcon = (mail) => {
if(mail.indexOf("@qq.com") >= 0){
let prefix = mail.replace(/@.*/, "");
let pattern=/^\d+$/g;
let result= prefix.match(pattern);
if(result !== null){
iconUrl = "https://q1.qlogo.cn/g?b=qq&nk="+ prefix +"&s=100";
}
} else {
let defaultIcon = '!{ theme.newest_comments.artalk.default_avatar ? `?d=${theme.newest_comments.artalk.default_avatar}` : ''}'
iconUrl = `https://gravatar.loli.net/avatar/${md5(mail.toLowerCase()) + defaultIcon}`
}
return iconUrl;
}

const generateHtml = array => {
let result = ''

for (let i = 0; i < array.length; i++) {
result += '<div class=\'aside-list-item\'>'

if (!{theme.newest_comments.avatar}) {
result += `<a href='${array[i].url}' class="thumbnail"><img src='${getAllIcon(array[i].mail)}'></a>`
}

result += `<div class='content'>
<a class='comment' href='${array[i].url}'>${array[i].content}</a>
<div class='name'><span>${array[i].nick}</span><time> / ${btf.diffDate(array[i].date, true)}</time></div>
</div></div>`
}

let $dom = document.querySelector('.card-newest-comments .aside-list')
$dom.innerHTML= result
window.pjax && window.pjax.refresh($dom)
}

const newestCommentInit = () => {
if (document.querySelector('.card-newest-comments .aside-list')) {
const data = saveToLocal.get('artalk-newest-comments')
if (data) {
generateHtml(JSON.parse(data))
} else {
getArtalkIssues()
}
}
}

newestCommentInit()
document.addEventListener('pjax:complete', newestCommentInit)
})

将 Artalk 插入侧栏

打开 /themes/butterfly/layout/includes/third-party/newest-comments 路径下的”index.pug”

将代码添加至末尾,添加后的代码如下

if theme.newest_comments.leancloud.enable
include ./leancloud.pug
else if theme.newest_comments.github_issues.enable
include ./github-issues.pug
else if theme.newest_comments.disqus.enable
include ./disqus-comment.pug
else if theme.newest_comments.artalk.enable
include ./artalk.pug

打开主题配置 _config.yml 文件,跳转到 newest_comments

添加 Artalk 开关等参数代码

artalk:
enable: true
dataUrl: /data/comments.data.json
default_avatar: mp
参数解释
enable是否启用 Artalk 最新评论显示
dataUrl评论数据Url地址
default_avatar非QQ邮箱时,Gravatar的默认头像

Enjoy ~

其实并不难,主要是排序难倒我了,因为完全没接触过这类代码

好在百度了一圈,使用 sort() 解决了

参考本站预览效果 ~