第一个写的测试版有几个问题,这个版本中使用冰老师那年今日同款Swiper来进行滚动,滚动更加丝滑,并且没有pjax的疯狂滚动问题。并且鉴于Swiper有更多的扩展性,这个功能还有更多发挥空间。

样式预览

相比旧版本

相比旧版本增加特性

  • 滚动更流畅
  • 无疯狂滚动bug

查看如何配置bb

Hexo的Butterfly适配个人动态(哔哔 for 腾讯云),在博客上发朋友圈

Hexo的Butterfly主页适配哔哔动态,博客主页展示滚动消息

创建dom

创建themes/butterfly/layout/includes/bbTimeList.pug

1
2
3
4
5
6
7
#bbTimeList.bbTimeList.container
i.bber-logo.iconfont.icon-bblogo(onclick="location='/essay/'",title="即刻短文",style="font-size: 2rem;")
#bbtalk.swiper-container
#bber-talk.swiper-wrapper(onclick="location='/essay/'")
.js-pjax
script(src='https://cdn.jsdelivr.net/npm/swiper/swiper-bundle.min.js',data-pjax='')
script(src='/zhheo/showbb_in_index.js',data-pjax='',defer='')

引入到主页

编辑themes/butterfly/layout/index.pug

1
2
3
4
5
6
7
block content
include ./includes/mixins/post-ui.pug
#recent-posts.recent-posts
include includes/categoryList.pug
+ include includes/bbTimeList.pug
+postUI
include includes/pagination.pug

创建js文件

创建themes/butterfly/source/zhheo/showbb_in_index.js,并填写api地址。

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
function getbbdata(){
var bbsurl = "https://7a68-zhheo-0g8unj30bfbeb210-1302424805.tcb.qcloud.la/json/bber.json?sign=6162122afe14a6b7d3f837bb79b02fd9&t=1612691873"

var httpRequest = new XMLHttpRequest();//第一步:建立所需的对象
httpRequest.open('GET', bbsurl, true);//第二步:打开连接 将请求参数写在url中 ps:"./Ptest.php?name=test&nameone=testone"
httpRequest.send();//第三步:发送请求 将请求参数写在URL中
/**
* 获取数据后的处理程序
*/
httpRequest.onreadystatechange = function () {
if (httpRequest.readyState == 4 && httpRequest.status == 200) {
var json = httpRequest.responseText;//获取到json字符串,还需解析
var obj = eval('(' + json + ')');
// console.log(obj.data)
const bbArray = obj.data.map(e => {
return {
'date': e.date,
'content': e.content,
'from': e.from
}
})
// console.log(fundsArray)
saveToLocal.set('zhheo-bb', JSON.stringify(bbArray), 5 / (60 * 24))
const data = saveToLocal.get('zhheo-bb');
generateBBHtml(JSON.parse(data))
}
};
}


var generateBBHtml = array => {
var $dom = document.querySelector('#bber-talk');
var result = ''

if (array.length) {
for (let i = 0; i < array.length; i++) {
var itemcontent = array[i].content
var newitemcontent = itemcontent.replace(/(https?:[^:<>"]*\/)([^:<>"]*)(\.((png!thumbnail)|(png)|(jpg)|(webp)|(jpeg)|(gif)))/g,' [图片] ')
result += `<div class='li-style swiper-slide'>${newitemcontent}</div>`;
}
} else {
result += '!{_p("aside.card_funds.zero")}';
}

var $dom = document.querySelector('#bber-talk');
$dom.innerHTML = result;
window.lazyLoadInstance && window.lazyLoadInstance.update();
window.pjax && window.pjax.refresh($dom);
var swiper = new Swiper('.swiper-container', {
direction: 'vertical', // 垂直切换选项
loop: true,
autoplay: {
delay: 3000,
disableOnInteraction: true,
},
});
}
var bbInit = () => {
// console.log('运行')
if (document.querySelector('#bber-talk')) {
const data = saveToLocal.get('zhheo-bb');
if (data) {
generateBBHtml(JSON.parse(data))
} else {
getbbdata()
};
}
}

bbInit();
document.addEventListener('pjax:complete', bbInit);

引入css

themes/butterfly/_config.yml中的inject属性的head里添加

1
2
3
inject:
head:
- <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper/swiper-bundle.min.css">

并写入css

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
/* 主页哔哔bb */
#bber-talk {
width: 100%;
height: 25px;
line-height: 25px;
}

#bber-talk .li-style {
width: 100%;
height: 25px;
text-align: center;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
transition: 0.3s;
}

.li-style:hover{
color: #49b1f5;
}

ul,li{
list-style:none;
display:block;
margin: 0;
padding: 0;
}

#bbTimeList{
background: var(--card-bg);
color: var(--font-color);
margin-top: 1rem;
padding: 0.6rem 1rem 0.5rem 1rem;
border-radius: 12px;
cursor: pointer;
display: flex;
}

更新日志

  • v1.3
    支持图片从url链接转为显示[图片]

参考文章

熟悉的味道,不一样配方

Codepen Demo