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

1
2
3
4
5
6
7
8
9
10
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/Artalk
use: Twikoo # Valine,Disqus
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.(LazyLoad:当评论元素进入浏览器的视区时,评论系统将被加载。)
# If you set it to true, the comment count will be invalid(如果将其设置为True,则评论计数将无效)
lazyload: false
count: true # Display comment count in post's top_img(在文章的top_img中显示评论计数)
card_post_count: true # Display comment count in Home Page(在主页中显示评论计数)

修改 twikoo.pug

打开\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()
}
}
})()

直接删除+号,已对齐缩进,否则导致报错。

增加自定义样式

在自定义scss文件中添加以下代码:

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
// 热评start
#comment-barrage {
display: block;
position: fixed;
z-index: 1;
font-size: 15px;
bottom: 1rem;
right: 3rem;
width: 20rem;
height: 10rem;
overflow: hidden;
.comment-barrage-item {
opacity: 0;
width: 98%;
height: fit-content;
max-height: 10rem;
padding: .5rem;
position: absolute;
margin: 0 3px;
bottom: 5px;
background: var(--white);
border: var(--border);
border-radius: 8px;
box-shadow: var(--card-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;
}
.swiper-slide-active .comment-barrage-item {
opacity: 1;
&:hover {
background-color: var(--backcolor);
}
// 头部
.barrage-info {
overflow: hidden;
font-size: 90%;
height: 35px;
span {
margin: 0 .2em;
vertical-align: middle;
}
.barrage-title {
font-weight: bold;
padding: .3em 0.5em;
background: var(--forecolor);
color: var(--white);
margin-right: .5em;
border-radius: .5em;
vertical-align: middle;
}
// 头像
.barrage-avatar {
height: 2em;
width: 2em;
border-radius: 50%;
vertical-align: middle;
}
// 昵称
.barrage-nick {
font-family: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei";
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;
a {
color: var(--font-color);
&:hover {
color: var(--theme-color);
}
}
p {
margin: 0;
}
img {
width: 3em;
}
}
}
}
// 热评end

增加 隐藏/显示 热评 js

在自定义js文件中加入以下代码:

1
2
3
4
5
6
7
8
// 切换热评start
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)
}
// 切换热评end

引入 swiper 轮播功能

1
2
3
4
5
6
7
8
9
# 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>

参考链接

20-链接卡片标签外挂 18-动态分类标签导航栏