简介

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

在原有的功能基础上，增加以下功能：

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

新增 Artalk 最新评论获取

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

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
script(src="https://gcore.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”

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

1
2
3
4
5
6
7
8
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 开关等参数代码

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

Enjoy ~

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

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

参考本站预览效果 ~