根据林木木的哔哔教程第二弹熟悉的味道,不一样配方中的首页展示滚动条进行魔改了一下,结合之前发布的Butterfly下自定义加载页底部滚动文字方法做成了现在的首页展示哔哔的样式。

效果预览

Demo

查看如何配置bb

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

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

Bug

使用本教程会产生问题,目前还没有能力解决,如果你解决了欢迎告知我。如果想要体验无bug的首页哔哔,可以查看熟悉的味道,不一样配方这篇文章的内容。

你可能会遇到:

  • 在特殊情况下,以非常快的速度疯狂滚动。
  • 滚动完第9条后回滚到第1条动画不流畅。

说在前面

本文基于熟悉的味道,不一样配方对Butterfly的补充说明。重复部分不再赘述。

其中没有包含的部分为腾讯云的相关配置部分。

创建ui文件

创建themes/butterfly/layout/includes/bbTimeList.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
#bbTimeList.bbTimeList
#bber-talk(onclick="location='/bb/'")
ul#con1
ul#con2
.js-pjax
script(src='/zhheo/showbb_in_index.js',data-pjax='',defer='')
script(type='text/javascript').
var area = document.getElementById('bber-talk');
var con1 = document.getElementById('con1');
var con2 = document.getElementById('con2');
var mytimer1 = null;
var mytimer = null;
var time = 500 / 60;
con2.innerHTML = con1.innerHTML;
function scrollUp () {
if (area.scrollTop >= (con1.offsetHeight)) {
area.scrollTop = 0;
} else {
if (area.scrollTop % 25 == 0) {
clearInterval(mytimer);
clearInterval(mytimer1);
mytimer1 = setTimeout(function () {
mytimer = setInterval(scrollUp, time);
}, 5000);
}
area.scrollTop++;
}
}
mytimer = setInterval(scrollUp, time);

引入到主页

编辑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

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
function getbbdata(){
let bbsurl = "https://你的json地址"

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))
}
};
}


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

if (array.length) {
for (let i = 0; i < array.length; i++) {
result += `<li class='li-style'>${array[i].content}</li>`;
}
} else {
result += '!{_p("aside.card_funds.zero")}';
}

let $dom = document.querySelector('#bber-talk #con1');
$dom.innerHTML = result;
window.lazyLoadInstance && window.lazyLoadInstance.update();
window.pjax && window.pjax.refresh($dom);
}

const bbInit = () => {
// console.log('运行')
if (document.querySelector('#bber-talk #con1')) {
const data = saveToLocal.get('zhheo-bb');
if (data) {
generateBBHtml(JSON.parse(data))
} else {
getbbdata()
}
}
}

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

添加样式

样式仅供参考

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

#bber-talk #con1, #bber-talk #con2{
min-height: 25px;
width: 100%;
}

.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: var(--heo-hovertext);
}

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

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

/* 哔哔前往 */
.bber-gotobb{
line-height: 25px;
margin-left: 8px;
transition: 0.3s;
}

.bber-gotobb:hover{
color: var(--heo-hovertext);
transition: 0.3s;
}

/* 哔哔标志 */
.icon-bblogo{
font-size: 2rem;
font-size: 2rem;
line-height: 22px;
margin-right: 8px;
transition: 0.3s;
}

.icon-bblogo:hover{
color: var(--heo-hovertext);
transition: 0.3s;
}

大功告成

已经成功配置首页哔哔了!赶紧发条哔哔庆祝一下吧!