前言

本文教程主要针对 Hexo Butterfly 主题博客中的 Twikoo 评论，按本文逻辑或许可以获取其他类型的评论，本文不作探讨。

看了其他小伙伴的 评论热评教程，觉得有点复杂，于是自己想了一个方法来实现这个功能。

  • 沿用其他模块中用到的 swiper 轮播
  • 使用本地缓存保存 隐藏或显示 热评，刷新或切换页面时仍 隐藏或显示 热评
  • 增加评论的城市和日期
  • 页面提交评论后会立即更新热评数据
  • 点击 头像 可访问网站
  • 点击 热评 可跳转至评论区
  • 点击 评论内容 可跳转至改评论

此功能需关闭评论的懒加载 _config.butterfly.yml => comments.lazyload: false，否则需等页面活动至评论区才会加载。

1
2
3
4
5
6
7
8
9
10
11
comments:
  # Up to two comments system, the first will be shown as default
  # Choose: Disqus/Disqusjs/Livere/Gitalk/Valine/Waline/Utterances/Facebook Comments/Twikoo/Giscus/Remark42
  use: # Valine,Disqus
    - Twikoo
  text: true # Display the comment name next to the button
  # lazyload: The comment system will be load when comment element enters the browser's viewport.
  # If you set it to true, the comment count will be invalid
  lazyload: false 
  count: true # Display comment count in post's top_img
  card_post_count: false # Display comment count in Home Page

修改 twikoo.pug

打开 Twikoo 评论文件 \themes\butterfly\layout\includes\third-party\comments\twikoo.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
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
- const { envId, region, option } = theme.twikoo
- const { use, lazyload, count } = theme.comments

script.
  (()=>{
    const init = () => {
      twikoo.init(Object.assign({
        el: '#twikoo-wrap',
        envId: '!{envId}',
        region: '!{region}',
        onCommentLoaded: function () {
          btf.loadLightbox(document.querySelectorAll('#twikoo .tk-content img:not(.tk-owo-emotion)'))
+         setTimeout(function(){
+           let tk_comment = document.querySelectorAll('.tk-comments-container .tk-comment')
+           if (tk_comment.length > 0) {
+             let html = `<div class="swiper-wrapper">`
+             for (let i = 0; i < tk_comment.length; i++) {
+               let tk_id = tk_comment[i].getAttribute('id') || ''
+               let tk_nick = tk_comment[i].querySelector('.tk-nick')?.innerText || ''
+               let tk_href = tk_comment[i].querySelector('.tk-nick')?.href || ''
+               let tk_avatar = tk_comment[i].querySelector('.tk-avatar-img')?.src || ''
+               let tk_time = tk_comment[i].querySelector('.tk-time')?.innerText || ''
+               let tk_city = tk_comment[i].querySelector('.tk-extras .tk-extra:first-child span:last-child')?.innerText || ''
+               let tk_content = tk_comment[i].querySelector('.tk-content>span:last-child')?.innerHTML || ''
+               tk_content = tk_content.replace(/\n/g, '') // replace \n
+               tk_content = tk_content.replace(/<blockquote>.*?<\/blockquote>/gi, '') // replace blockquote
+               tk_content = tk_content.replace(/<pre.*?<\/pre>/gi, '[!{_p("aside.card_newest_comments.code")}]') // replace code
+               html += `
+                 <div class="swiper-slide">
+                   <div class="comment-barrage-item">
+                     <div class="barrage-info">
+                       <a class="barrage-title" title="跳转至评论区" href="#post-comment">热评</a>
+                       <a href="${tk_href ? tk_href + '" target="_blank" rel="noopener noreferrer" title="访问 '+ tk_nick +'"' : 'javascript:void(0);"'}>
+                         <img class="barrage-avatar" src="${tk_avatar}">
+                       </a>
+                       <span class="barrage-nick">${tk_nick}</span>
+                       <span class="barrage-city">${tk_city}</span>
+                       <span class="barrage-time">${tk_time}</span>
+                       <a class="barrage-close" onclick="eurkon.switchCommentBarrage()" title="隐藏热评"><i class="fa-solid fa-xmark"></i></a>
+                     </div>
+                     <div class="barrage-content">
+                       <a title="跳转至该评论" href="#${tk_id}">${tk_content}</a>
+                     </div>
+                   </div>
+                 </div>`
+             }
+             html += '</div>'
+             let barrageContainer = document.getElementById('comment-barrage') || document.createElement('div')
+             barrageContainer.id = 'comment-barrage'
+             barrageContainer.innerHTML = html
+             barrageContainer.style.display = window.localStorage.getItem('commentBarrageDisplay') === 'false' ? 'none' : 'block'
+             document.getElementById('post-comment').appendChild(barrageContainer)
+             var barrageSwiper = new Swiper('#comment-barrage', {
+               direction: 'vertical',
+               loop: true,
+               mousewheel: true,
+               autoplay: {
+                 delay: 3000,
+                 disableOnInteraction: true,
+               }
+             })
+             barrageContainer.onmouseenter = function () {
+               barrageSwiper.autoplay.stop()
+             };
+             barrageContainer.onmouseleave = function () {
+               barrageSwiper.autoplay.start()
+             };
+           }
+         }, 1000)
        }
      }, !{JSON.stringify(option)}))
    }

    const getCount = () => {
      const countELement = document.getElementById('twikoo-count')
      if(!countELement) return
      twikoo.getCommentsCount({
        envId: '!{envId}',
        region: '!{region}',
        urls: [window.location.pathname],
        includeReply: false
      }).then(function (res) {
        countELement.innerText = res[0].count
      }).catch(function (err) {
        console.error(err);
      });
    }

    const runFn = () => {
      init()
      !{count ? 'GLOBAL_CONFIG_SITE.isPost && getCount()' : ''}
    }

    const loadTwikoo = () => {
      if (typeof twikoo === 'object') {
        setTimeout(runFn,0)
        return
      } 
      getScript('!{url_for(theme.asset.twikoo)}').then(runFn)
    }

    if ('!{use[0]}' === 'Twikoo' || !!{lazyload}) {
      if (!{lazyload}) btf.loadComment(document.getElementById('twikoo-wrap'), loadTwikoo)
      else loadTwikoo()
    } else {
      window.loadOtherComment = () => {
        loadTwikoo()
      }
    }
  })()

增加自定义样式

增加自定义样式，下面 css 部分变量需自行修改，按 F12 自取。

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
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
/* 热评 */
#comment-barrage {
  display: block;
  position: fixed;
  z-index: 1;
  font-size: 90%;
  bottom: 1rem;
  right: 2rem;
  width: 306px;
  height: 150px;
  overflow: hidden;
}

@media screen and (max-width: 900px) {
  #comment-barrage {
    display: none !important;
  }
}

#comment-barrage .comment-barrage-item {
  opacity: 0;
  width: 300px;
  height: fit-content;
  max-height: 144px;
  padding: 10px;
  position: absolute;
  margin: 0 3px;
  bottom: 5px;
  background: var(--card-bg);
  border: var(--card-border);
  border-radius: var(--border-radius);
  box-shadow: var(--box-shadow);
  -webkit-transition: all .3s ease-in-out;
  -moz-transition: all .3s ease-in-out;
  -o-transition: all .3s ease-in-out;
  -ms-transition: all .3s ease-in-out;
  transition: all .3s ease-in-out;
}

#comment-barrage .swiper-slide-active .comment-barrage-item {
  opacity: 1;
}

#comment-barrage .comment-barrage-item:hover {
  border-color: var(--main) !important;
  box-shadow: var(--main-shadow) !important;
}

.barrage-info {
  overflow: hidden;
  font-size: 90%;
  height: 35px;
  border-bottom: var(--card-border-dashed);
}

.barrage-info span {
  margin: 0 .2em;
  vertical-align: middle;
}

.barrage-title {
  font-weight: bold;
  padding: .3em 0.5em;
  background: var(--font-color);
  color: var(--card-bg);
  margin-right: .5em;
  border-radius: .5em;
  vertical-align: middle;
}

.barrage-title:hover {
  color: var(--second);
  background: var(--main);
}

.barrage-avatar {
  height: 2em;
  width: 2em;
  border-radius: 50%;
  vertical-align: middle;
}

.barrage-nick {
  font-weight: bold;
}

.barrage-close {
  position: absolute;
  top: 0;
  right: 10px;
}

.barrage-content {
  padding-top: 5px;
  max-height: 95px;
  height: fit-content;
  overflow-y: scroll;
  text-align: justify;
  word-break: break-all;
}

.barrage-content a {
  color: var(--font-color);
}

.barrage-content a:hover {
  color: var(--theme-color);
}

.barrage-content p {
  margin: 0;
}

.barrage-content img {
  width: 3em;
}

增加 隐藏/显示 热评 js

1
2
3
4
5
6
7
// 切换热评
function switchCommentBarrage () {
  let flag = window.localStorage.getItem('commentBarrageDisplay') // undefined || false
  document.getElementById('comment-barrage').style.display = flag === 'false' ? 'block' : 'none'
  // 本地缓存一天，刷新或切换页面时仍 隐藏或显示 热评。
  window.localStorage.setItem('commentBarrageDisplay', flag === 'false' ? 'undefined' : 'false', 86400000)
}

引入 swiper 轮播功能

修改 _config.butterfly.yml 文件

1
2
3
4
5
6
7
# Inject
# Insert the code to head (before '</head>' tag) and the bottom (before '</body>' tag)
# 插入代码到头部 </head> 之前 和 底部 </body> 之前
inject:
  head:
    - <link rel="stylesheet" href="https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/Swiper/8.0.6/swiper-bundle.min.css"> # 轮播
    - <script data-pjax src="https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/Swiper/8.0.6/swiper-bundle.min.js"></script> # 轮播

Hexo 三连

执行 Hexo 三连

1
hexo clean && hexo g && hexo s